/* ==========================================================================
   Pastisseria Llavina — sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — the split masthead + arch portal
   -------------------------------------------------------------------------- */
.hero{
  --px: 33%;
  --pt: 17vh;
  --pb: 11vh;
  position:relative;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 78% at 50% 8%, #FBF8F2 0%, var(--bone) 46%, var(--bone-2) 100%);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 46% at 50% 62%, color-mix(in srgb,var(--gold) 12%,transparent) 0%, transparent 70%);
}

.hero__type{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center;
  padding-top:calc(var(--header-h) * .4);
  pointer-events:none;
}
.hero__stack{ display:grid; justify-items:center; gap:clamp(14px,2.4vh,30px); text-align:center; }
.hero__eyebrow{
  font-size:var(--fs-micro); letter-spacing:.46em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap;
}
.hero__word{
  font-family:var(--serif); font-weight:300;
  font-size:max(3.4rem, min(15.2vw, 45vh));
  line-height:.86; letter-spacing:-.03em;
  color:var(--ink);
  white-space:nowrap;
}
.hero__word .ch{
  display:inline-block;
  transform:translate3d(0,116%,0);
  transition:transform 1.25s var(--ease);
  transition-delay:calc(var(--wi,0) * 62ms + 260ms);
}
.hero__word .ch-wrap{ display:inline-block; overflow:hidden; padding:0 .012em; margin:0 -.012em; vertical-align:bottom; }
.is-ready .hero__word .ch{ transform:none; }

.portal{
  position:absolute; inset:0; z-index:2;
  clip-path:inset(calc(var(--pt) + 19%) calc(var(--px) + 7%) calc(var(--pb) + 19%) calc(var(--px) + 7%) round 999px 999px 3px 3px);
  transition:clip-path 1.65s var(--ease) .15s;
}
.is-ready .portal{
  clip-path:inset(var(--pt) var(--px) var(--pb) var(--px) round 999px 999px 3px 3px);
}
.portal__media{
  position:absolute;
  top:var(--pt); bottom:var(--pb); left:var(--px); right:var(--px);
  overflow:hidden;
  background:var(--cocoa);
}
.portal__media img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.6) contrast(1.05) saturate(1.28) sepia(.26) hue-rotate(-6deg);
  transform:scale(1.12);
}
.is-ready .portal__media img{ transform:scale(1); }
/* Very slow push-in behind the wordmark. Driven by an animation rather than a
   transition on .is-ready: the intro curtain only runs once per session, so on
   every later load skipIntro() adds .is-ready synchronously and a transition
   never got a first frame to move from. linear keeps the drift even — var(--ease)
   would spend most of the travel in the first seconds. */
@media (prefers-reduced-motion: no-preference){
  .portal__media img{ animation:portalPush 22s linear both; }
}
@keyframes portalPush{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
.portal__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,14,.7) 0%, rgba(58,42,34,.1) 36%, rgba(20,16,14,.66) 100%);
  box-shadow:inset 0 0 120px rgba(20,16,14,.5);
}
.portal .hero__type{ z-index:3; }
.portal .hero__word{ color:var(--cream); }
.portal .hero__eyebrow{ color:var(--gold-3); }

/* corner meta */
.hero__meta{
  position:absolute; z-index:4; left:0; right:0; bottom:clamp(16px,3.2vh,40px);
  padding-inline:var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  font-size:var(--fs-micro); letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3);
  pointer-events:none;
}
.hero__meta span{ display:block; }
.hero__meta b{ color:var(--gold-text); font-weight:400; }
.hero__meta > *{ opacity:0; transform:translateY(14px); transition:opacity .9s ease 1.35s, transform .9s var(--ease) 1.35s; }
.is-ready .hero__meta > *{ opacity:1; transform:none; }
@media (max-width:700px){
  .hero__meta{ justify-content:center; text-align:center; }
  .hero__meta .m-right{ display:none; }
}

.scrollcue{
  position:absolute; z-index:5; left:50%; bottom:clamp(16px,3.2vh,40px);
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:8px;
  padding:10px 22px;
  pointer-events:auto;
  opacity:0; transition:opacity .8s ease 1.6s;
}
.is-ready .scrollcue{ opacity:1; }
.scrollcue i{ width:1px; height:clamp(28px,5vh,54px); background:linear-gradient(var(--gold),transparent); position:relative; overflow:hidden; }
.scrollcue i::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  animation:cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }
@media (max-width:700px){ .scrollcue{ display:none; } }

@media (max-width:1024px){
  .hero{ --px:21%; }
  .hero__word{ font-size:max(3.2rem, min(24vw, 42vh)); }
}
@media (max-width:760px){
  .hero{ --px:16%; --pt:15vh; --pb:13vh; }
  .hero__word{ font-size:max(3rem, min(31vw, 30vh)); }
  .hero__eyebrow{ font-size:.64rem; letter-spacing:.24em; }
}
@media (max-width:400px){ .hero{ --px:15%; } }

/* --------------------------------------------------------------------------
   2. RIBBON — gold marquee
   -------------------------------------------------------------------------- */
.ribbon{
  background:var(--ink);
  color:var(--bone);
  padding-block:clamp(13px,1.5vh,19px);
  overflow:hidden;
  border-block:1px solid var(--line);
  position:relative; z-index:3;
}
.ribbon__track{ display:flex; width:max-content; will-change:transform; }
@media (prefers-reduced-motion: no-preference){
  .ribbon__track{ animation:marquee 46s linear infinite; }
  .ribbon:hover .ribbon__track{ animation-play-state:paused; }
}
@keyframes marquee{ to{ transform:translate3d(-50%,0,0); } }
.ribbon__group{ display:flex; align-items:center; flex:none; }
.ribbon span{
  font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.35rem);
  letter-spacing:.06em; padding-inline:clamp(14px,1.8vw,26px); white-space:nowrap;
}
.ribbon em{ font-style:normal; color:var(--gold-2); font-size:.6em; }

/* --------------------------------------------------------------------------
   3. MANIFEST — philosophy + rotating seal
   -------------------------------------------------------------------------- */
.manifest{ background:var(--bone); }
.manifest__in{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(34px,6vw,90px); align-items:center;
}
.manifest__quote{ display:grid; gap:clamp(20px,3vw,34px); max-width:none; }
.manifest__quote .q{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.55rem,3.5vw,3.05rem);
  line-height:1.2; letter-spacing:-.012em; color:var(--ink);
  max-width:13em;
}
.manifest__quote .q b{ font-style:normal; font-weight:400; color:var(--gold); }
.manifest__note{ max-width:50ch; font-family:var(--sans); font-style:normal; font-size:var(--fs-lead); line-height:1.6; }
@media (max-width:900px){
  .manifest__in{ grid-template-columns:minmax(0,1fr); justify-items:start; gap:44px; }
  .manifest__in .seal{ justify-self:center; }   /* el text a l'esquerra, la roda al mig */
  .manifest__quote{ max-width:none; }
}

.seal{ position:relative; width:clamp(273px,30.9vw,403px); aspect-ratio:1; display:grid; place-items:center; flex:none; }
.seal svg{ position:absolute; inset:0; width:100%; height:100%; }
@media (prefers-reduced-motion: no-preference){ .seal svg{ animation:spin 30s linear infinite; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
.seal text{ font-family:var(--sans); font-size:8.6px; letter-spacing:.3em; fill:var(--gold-text); text-transform:uppercase; }
.seal__core{ display:grid; justify-items:center; gap:16px; text-align:center; }
.seal__core b{ font-family:var(--serif); font-size:clamp(3.9rem,6.5vw,5.53rem); font-weight:300; line-height:.82; color:var(--ink); }
.seal__core span{ font-size:calc(var(--fs-micro) * 1.625); letter-spacing:.34em; text-transform:uppercase; color:var(--ink-3); }
.seal__ring{ fill:none; stroke:var(--line-gold); stroke-width:.6; }

/* --------------------------------------------------------------------------
   4. HISTÒRIA
   -------------------------------------------------------------------------- */
.history{ background:var(--cream); }
.history__in{ display:grid; grid-template-columns:1.05fr .85fr; gap:clamp(36px,6vw,110px); align-items:start; }
@media (max-width:1000px){ .history__in{ grid-template-columns:1fr; } }

.gens{ position:relative; margin-top:clamp(34px,5vw,58px); padding-left:clamp(28px,4vw,54px); }
.gens__line{ position:absolute; left:0; top:6px; bottom:6px; width:1px; background:var(--line); }
.gens__line i{ position:absolute; inset:0; background:var(--gold); transform:scaleY(var(--p,0)); transform-origin:50% 0; transition:transform .3s linear; }
.gen{ position:relative; padding-block:clamp(22px,3.2vw,38px); }
.gen + .gen{ border-top:1px solid var(--line-2); }
.gen::before{
  content:""; position:absolute; left:calc(clamp(28px,4vw,54px) * -1); top:calc(clamp(22px,3.2vw,38px) + .62em);
  width:7px; height:7px; border-radius:50%; background:var(--bone-2);
  transform:translateX(-3px); transition:background .5s, box-shadow .5s;
}
.gen.is-on::before{ background:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent); }
.gen__year{
  font-family:var(--serif); font-size:clamp(2.1rem,4.4vw,3.4rem); font-weight:300;
  line-height:1; color:var(--ink); display:block; margin-bottom:.22em;
  letter-spacing:-.02em;
}
.gen__year small{ display:block; font-family:var(--sans); font-size:var(--fs-micro); letter-spacing:.3em; text-transform:uppercase; color:var(--gold-text); margin-bottom:.9em; }
.gen__body{ color:var(--ink-2); max-width:52ch; }
.gen__body strong{ font-weight:400; color:var(--ink); }

.history__art{ position:sticky; top:calc(var(--header-h) + 34px); display:grid; gap:clamp(34px,4vw,58px); }
@media (max-width:1000px){ .history__art{ position:static; grid-template-columns:1fr 1fr; align-items:end; } }
.history__art figure{ margin:0; }
.history__art figcaption{ font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-top:12px; }
.history__art .media{ aspect-ratio:4/5; }
.history__art .media--wide{ aspect-ratio:16/11; }

/* --------------------------------------------------------------------------
   5. L'OFICI — dark craft band
   -------------------------------------------------------------------------- */
.craft{
  background:var(--espresso);
  color:var(--bone);
  position:relative;
  overflow:clip;
}
.craft .eyebrow{ color:var(--gold-2); }
.craft__ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:clamp(9rem,26vw,24rem); line-height:1;
  color:rgba(230,214,174,.062); white-space:nowrap; pointer-events:none; user-select:none;
  font-style:italic;
}
.craft__in{ position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(30px,5vw,80px); align-items:center; }
@media (max-width:980px){ .craft__in{ grid-template-columns:1fr; text-align:left; } }

.craft__col{ display:grid; gap:clamp(18px,2.4vw,28px); }
.craft__col p{ color:rgba(241,236,227,.7); max-width:40ch; }
.craft__col h2{ color:var(--bone); }
.craft__quote{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.3; color:var(--gold-3);
  padding-left:22px; border-left:1px solid var(--line-gold); max-width:26ch;
}
.craft__col--right{ justify-items:start; }
@media (min-width:981px){ .craft__col--right{ justify-items:end; text-align:right; } .craft__col--right .eyebrow{ flex-direction:row-reverse; } .craft__col--right p{ text-align:right; } }

.craft__frame{ width:clamp(250px,29vw,382px); justify-self:center; }
.craft__frame .media{ aspect-ratio:9/16; border-radius:999px 999px 3px 3px; box-shadow:0 40px 90px -40px rgba(0,0,0,.8); }
.craft__frame figcaption{
  margin-top:18px; text-align:center;
  font-size:var(--fs-micro); letter-spacing:.28em; text-transform:uppercase; color:rgba(230,214,174,.72);
}
.craft__stats{ display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap; margin-top:8px; }
.craft__stat b{ display:block; font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.6rem); font-weight:300; color:var(--gold-2); line-height:1; }
.craft__stat span{ font-size:var(--fs-micro); letter-spacing:.26em; text-transform:uppercase; color:rgba(241,236,227,.68); }

/* --------------------------------------------------------------------------
   6. ESPECIALITATS — horizontal rail
   -------------------------------------------------------------------------- */
.spec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.rail{
  margin-top:clamp(30px,4.4vw,56px);
  display:flex; gap:clamp(16px,2.2vw,32px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding-inline:var(--gutter);
  padding-bottom:6px;
  margin-inline:calc(var(--gutter) * -1);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.rail.is-dragging *{ pointer-events:none; }
.spec{
  flex:0 0 clamp(248px,72vw,368px);
  scroll-snap-align:center;
  display:grid; gap:clamp(14px,1.4vw,20px);
  align-content:start;
}
.spec .media{ aspect-ratio:3/4; border-radius:999px 999px 3px 3px; }
.spec__row{ display:flex; align-items:baseline; gap:12px; }
.spec h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.4rem,2vw,1.85rem); line-height:1.1; letter-spacing:-.01em; }
.spec p{ color:var(--ink-2); font-size:.95rem; line-height:1.7; }
.rail-nav{ display:flex; gap:10px; }
.rail-nav button{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); transition:background .35s, border-color .35s, color .35s, opacity .3s;
}
.rail-nav button:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); }
.rail-nav button[disabled]{ opacity:.28; pointer-events:none; }
.rail-nav svg{ width:14px; height:14px; }
@media (max-width:760px){ .rail-nav{ display:none; } }
.railbar{ height:1px; background:var(--line); margin-top:clamp(22px,3vw,34px); position:relative; overflow:hidden; }
.railbar i{ position:absolute; top:0; left:0; height:100%; width:var(--w,30%); background:var(--gold); transform:translateX(var(--x,0)); }

/* --------------------------------------------------------------------------
   7. PRODUCTES — editorial index
   -------------------------------------------------------------------------- */
.productes{ background:var(--cream); }
.index{ position:relative; margin-top:clamp(30px,4.4vw,56px); }
@media (min-width:981px){ .index{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(40px,5vw,90px); } }

.index__list{ border-top:1px solid var(--line); }
.idx{ border-bottom:1px solid var(--line); }
.idx__head{
  width:100%; display:flex; align-items:center; gap:clamp(14px,2vw,26px);
  padding-block:clamp(18px,2.4vw,28px);
  text-align:left; position:relative;
  transition:padding-left .5s var(--ease), color .4s;
}
.idx__head h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.55rem,3.2vw,2.5rem); line-height:1.05; letter-spacing:-.015em; flex:1; }
.idx__head .num{ flex:none; transition:color .4s; }
.idx__sign{ width:14px; height:14px; flex:none; position:relative; }
.idx__sign::before,.idx__sign::after{
  content:""; position:absolute; inset:50% 0 auto; height:1px; background:var(--ink-3);
  transition:transform .5s var(--ease), background .4s;
}
.idx__sign::after{ transform:rotate(90deg); }
.idx.is-on .idx__sign::after{ transform:rotate(0deg); }
.idx.is-on .idx__sign::before,.idx.is-on .idx__sign::after{ background:var(--gold); }
@media (min-width:981px){
  .idx.is-on .idx__head{ padding-left:18px; }
  .idx__head:hover{ color:var(--gold); }
  .idx__sign{ display:none; }
  .idx__head::before{
    content:""; position:absolute; left:0; top:50%; width:8px; height:1px; background:var(--gold);
    transform:translateY(-50%) scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease);
  }
  .idx.is-on .idx__head::before{ transform:translateY(-50%) scaleX(1); }
  .idx.is-on .num{ color:var(--gold-text); }
}

.idx__panel{
  display:grid; gap:22px;
  overflow:clip;
}
@media (max-width:980px){
  .idx__panel{ height:0; opacity:0; transition:height .6s var(--ease), opacity .4s; }
  .idx.is-on .idx__panel{ opacity:1; }
  .idx__panel-in{ padding-bottom:clamp(20px,4vw,30px); display:grid; gap:20px; }
  .idx__panel .media{ aspect-ratio:4/3; border-radius:3px; }
}
@media (min-width:981px){
  .idx__panel{
    position:absolute; top:0; right:0;
    width:calc((100% - clamp(40px,5vw,90px)) * .92 / 1.92);
    height:100%;
    opacity:0; visibility:hidden;
    transition:opacity .6s var(--ease-soft), visibility .6s;
    pointer-events:none;
  }
  .idx.is-on .idx__panel{ opacity:1; visibility:visible; pointer-events:auto; }
  .idx__panel-in{ position:sticky; top:calc(var(--header-h) + 30px); display:grid; gap:24px; }
  .idx__panel .media{ aspect-ratio:5/4; border-radius:3px; }
  .idx__panel .media img{ transform:scale(1.06); transition:transform 1.3s var(--ease), opacity .9s; }
  .idx.is-on .idx__panel .media img.is-loaded{ transform:scale(1); }
}
.idx__items{ columns:2; column-gap:clamp(18px,2.4vw,34px); }
.idx__items li{
  break-inside:avoid; padding-block:5px;
  color:var(--ink-2); font-size:.94rem; line-height:1.55;
  display:flex; gap:9px; align-items:baseline;
}
.idx__items li::before{ content:""; width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none; transform:translateY(-3px); opacity:.7; }
.idx__note{ color:var(--ink-2); max-width:46ch; }
@media (max-width:520px){ .idx__items{ columns:1; } }

/* --------------------------------------------------------------------------
   8. CALENDARI — the year dial
   -------------------------------------------------------------------------- */
.calendari{ background:var(--bone); position:relative; overflow:hidden; }
.cal{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(34px,5vw,86px); align-items:center; margin-top:clamp(30px,4.4vw,56px); }
@media (max-width:980px){ .cal{ grid-template-columns:1fr; gap:34px; justify-items:center; } }

.dialwrap{ position:relative; width:clamp(272px,76vw,430px); aspect-ratio:1; display:grid; place-items:center; }
@media (min-width:981px){ .dialwrap{ width:clamp(320px,34vw,440px); } }
.dial{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dial__ring{ fill:none; stroke:var(--line); stroke-width:1; }
.dial__ring--in{ stroke:var(--line-2); }
.dial__tick{ stroke:var(--line); stroke-width:1; }
.dial__needle{ transition:transform 1.05s cubic-bezier(.22,1.12,.36,1); transform-origin:200px 200px; }
.dial__arc{ fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linecap:round; }
.dial__dot{ fill:var(--gold); }
.dial__needle .dial__dot{ r:4.6; }
.dial__pulse{ fill:none; stroke:var(--gold); stroke-width:1; opacity:.5; }
@media (prefers-reduced-motion: no-preference){ .dial__pulse{ animation:pulse 2.8s var(--ease-soft) infinite; transform-origin:center; } }
@keyframes pulse{ 0%{ r:8; opacity:.55 } 70%,100%{ r:22; opacity:0 } }
.dial__label{
  font-family:var(--sans); font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  fill:var(--ink-3); text-anchor:middle; dominant-baseline:middle;
  transition:fill .45s, font-size .45s;
  cursor:pointer;
}
.dial__hit{ fill:transparent; cursor:pointer; }
.dial__g:hover .dial__label{ fill:var(--ink); }
.dial__g.is-on .dial__label{ fill:var(--gold-text); font-size:15.5px; letter-spacing:.2em; font-weight:500; }

.cal__center{ display:grid; justify-items:center; gap:4px; text-align:center; pointer-events:none; max-width:56%; }
.cal__center b{ font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,3.3vw,2.9rem); line-height:1; letter-spacing:-.02em; }
.cal__center span{ font-size:var(--fs-micro); letter-spacing:.32em; text-transform:uppercase; color:var(--gold-text); }
.cal__arrows{ display:flex; gap:8px; margin-top:14px; pointer-events:auto; }
.cal__arrows button{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); transition:background .3s, color .3s, border-color .3s;
}
.cal__arrows button:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.cal__arrows svg{ width:12px; height:12px; }

.cal__stage{ position:relative; display:grid; min-height:clamp(340px,42vw,460px); width:100%; }
.calcard{
  grid-area:1/1;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(20px,3vw,44px); align-items:center;
  opacity:0; visibility:hidden; transform:translateY(18px);
  transition:opacity .6s var(--ease-soft), transform .8s var(--ease), visibility .6s;
}
.calcard.is-on{ opacity:1; visibility:visible; transform:none; }
.calcard .media{ aspect-ratio:4/5; border-radius:999px 999px 3px 3px; }
.calcard__body{ display:grid; gap:14px; align-content:center; }
.calcard__body h3{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.05; letter-spacing:-.015em; }
.calcard__date{ font-size:var(--fs-micro); letter-spacing:.3em; text-transform:uppercase; color:var(--gold-text); }
.calcard__list li{ color:var(--ink-2); font-size:.96rem; line-height:1.6; padding-block:4px; display:flex; gap:10px; align-items:baseline; border-top:1px solid var(--line-2); padding-top:9px; margin-top:5px; }
.calcard__list li:first-child{ border-top:0; margin-top:0; padding-top:0; }

/* Selector de mesos horitzontal. Substitueix la roda en mobil, on no hi cap
   be; de 620px en amunt mana la roda i aquest no existeix. */
.cal__months{ display:none; }
.calcard__list em{ font-style:normal; color:var(--ink); font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase; flex:none; width:8.4em; padding-top:.4em; line-height:1.4; }
@media (max-width:620px){
  /* align-content:start es imprescindible aqui. Totes les targetes comparteixen
     cel·la i l'escenari fa l'alcada de la mes llarga, de manera que les curtes
     s'estiren: sense aixo, les seves files creixien i la imatge quedava
     centrada mes avall: el peu de la imatge ballava fins a 40px segons el mes
     i la tira de mesos li queia a sobre. Amb start, la imatge acaba sempre al
     mateix lloc i la tira hi encaixa. */
  .calcard{ grid-template-columns:1fr; gap:22px; align-content:start; }
  .calcard .media{ aspect-ratio:16/12; border-radius:999px 999px 3px 3px; }

  /* --- la roda deixa pas al selector horitzontal ------------------------ */
  .dialwrap{ display:none; }
  .cal__months{
    display:flex; gap:4px; align-items:center;
    position:absolute; top:0; left:0; right:0; z-index:3;
    /* Just sota la imatge. La imatge es 16/12, o sigui que la seva alcada es
       el 75% de la seva amplada, i un marge en % es mesura sempre sobre
       l'AMPLADA del contenidor: 75% = exactament el peu de la imatge. El
       22px es el mateix gap que separa les files de la targeta. */
    margin-top:calc(75% + 22px);
    height:46px; padding-inline:2px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    border-block:1px solid var(--line-2);
  }
  .cal__months::-webkit-scrollbar{ display:none; }
  .cal__month{
    flex:none; scroll-snap-align:center;
    margin:0; padding:7px 13px; border:0; border-radius:999px;
    background:none; cursor:pointer; white-space:nowrap;
    font-family:var(--sans); font-size:var(--fs-micro);
    letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
    transition:color .35s var(--ease-soft), background-color .35s var(--ease-soft);
  }
  .cal__month.is-on{ color:var(--cream); background:var(--gold-text); }
  /* el text arrenca per sota del selector: gap + tira + gap */
  .calcard__body{ margin-top:calc(46px + 22px); }
  .calcard__list em{ width:100%; display:block; margin-bottom:2px; }
  .calcard__list li{ flex-direction:column; gap:0; }
}

/* --------------------------------------------------------------------------
   9. GALERIA
   -------------------------------------------------------------------------- */
.galeria{ background:var(--cream); }
.mosaic{
  --mg:clamp(8px,1.1vw,16px);
  --rowh:clamp(215px,18vw,280px);
  margin-top:clamp(30px,4.4vw,56px);
  display:flex; flex-wrap:wrap; gap:var(--mg);
}
.tile{
  position:relative; overflow:hidden; border-radius:2px; background:transparent;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  flex-grow:calc(var(--ar) * 100);
  flex-basis:calc(var(--ar) * var(--rowh));
  height:var(--rowh);
  min-width:0;
}
.tile .media{ width:100%; height:100%; border-radius:0; aspect-ratio:auto; }
.tile--tall{ border-radius:999px 999px 2px 2px; }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 34%,rgba(20,16,14,.55) 66%,rgba(20,16,14,.82));
  opacity:0; transition:opacity .5s var(--ease-soft);
}
.tile:hover::after,.tile:focus-visible::after{ opacity:1; }
.tile:hover .media__zoom{ transform:scale(1.05); }
.tile figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(12px,1.4vw,20px);
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--cream);
  text-shadow:0 1px 6px rgba(20,16,14,.7);
  opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease);
}
.tile:hover figcaption{ opacity:1; transform:none; }
/* Narrow viewports pack badly as justified rows — a lone landscape image ends
   up stretched across a whole row. A uniform grid is calmer, and the last tile
   spans whatever columns are left over so the block still ends flush. */
@media (max-width:1100px){
  .mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--mg); }
  .tile{ height:auto; flex:none; }
  .tile .media{ aspect-ratio:1; }
  /* every tile is square here, so an arch keyed to the source aspect would look
     arbitrary — give it a regular rhythm instead */
  .tile--tall{ border-radius:2px; }
  .tile:nth-child(4n+1){ border-radius:999px 999px 2px 2px; }
  .tile:last-child:nth-child(3n+1){ grid-column:span 3; }
  .tile:last-child:nth-child(3n+1) .media{ aspect-ratio:3/1; }
  .tile:last-child:nth-child(3n+2){ grid-column:span 2; }
  .tile:last-child:nth-child(3n+2) .media{ aspect-ratio:2/1; }
}
@media (max-width:700px){
  .mosaic{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .tile:nth-child(4n+1){ border-radius:2px; }
  .tile:nth-child(3n+1){ border-radius:999px 999px 2px 2px; }
  .tile:last-child:nth-child(3n+1),
  .tile:last-child:nth-child(3n+2){ grid-column:auto; }
  .tile:last-child:nth-child(3n+1) .media,
  .tile:last-child:nth-child(3n+2) .media{ aspect-ratio:1; }
  .tile:last-child:nth-child(odd){ grid-column:span 2; }
  .tile:last-child:nth-child(odd) .media{ aspect-ratio:2/1; }
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:9200;
  background:color-mix(in srgb,var(--espresso) 96%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; grid-template-rows:auto 1fr auto;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease-soft), visibility 0s .45s;
}
.lightbox.is-on{
  opacity:1; visibility:visible;
  transition:opacity .45s var(--ease-soft), visibility 0s 0s;
}
.lightbox__bar{ display:flex; justify-content:space-between; align-items:center; padding:clamp(14px,2.4vw,26px) var(--gutter) 0; color:var(--bone); }
.lightbox__bar span{ font-size:var(--fs-micro); letter-spacing:.3em; text-transform:uppercase; color:var(--gold-2); }
.lightbox__close{ width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(230,214,174,.24); border-radius:50%; color:var(--bone); transition:background .3s,color .3s; }
.lightbox__close:hover{ background:var(--gold); color:var(--espresso); }
.lightbox__close svg{ width:14px; height:14px; }
.lightbox__stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,2.4vw,26px) var(--gutter);
  min-height:0; overflow:hidden;
}
.lightbox__stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  min-width:0; min-height:0; flex:0 1 auto;
  border-radius:2px; box-shadow:0 40px 100px -40px #000;
  opacity:0; transform:scale(.98); transition:opacity .5s var(--ease-soft), transform .7s var(--ease);
}
.lightbox__stage img.is-loaded{ opacity:1; transform:none; }
.lightbox__foot{ display:flex; justify-content:center; align-items:center; gap:18px; padding:0 var(--gutter) max(clamp(14px,2.4vw,26px), env(safe-area-inset-bottom)); }
.lightbox__foot button{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(230,214,174,.24); color:var(--bone); transition:background .3s, color .3s; }
.lightbox__foot button:hover{ background:var(--gold); color:var(--espresso); }
.lightbox__foot svg{ width:14px; height:14px; }
.lightbox__cap{ color:rgba(241,236,227,.75); font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase; min-width:10ch; text-align:center; }

/* --------------------------------------------------------------------------
   10. BOTIGA
   -------------------------------------------------------------------------- */
.botiga{ background:var(--bone); }
.botiga__in{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:clamp(28px,4.6vw,80px); align-items:center; }
@media (max-width:900px){ .botiga__in{ grid-template-columns:1fr; } }
.botiga__art{ display:grid; gap:clamp(10px,1.4vw,18px); align-content:start; }
.botiga__art .media{ aspect-ratio:3/4; border-radius:999px 999px 3px 3px; }
.botiga__band{ margin-top:clamp(30px,5vw,72px); }
.botiga__band .media{ aspect-ratio:21/8; border-radius:3px; }
.botiga__band figcaption{ margin-top:14px; font-size:var(--fs-micro); letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:700px){ .botiga__band .media{ aspect-ratio:16/10; } }

.botiga__card{
  background:var(--cream);
  border:1px solid var(--line);
  padding:clamp(24px,3.4vw,52px);
  display:grid; gap:clamp(18px,2.4vw,28px); align-content:center;
  position:relative;
}
.botiga__card::before{
  content:""; position:absolute; inset:9px; border:1px solid var(--line-gold); pointer-events:none;
}
.botiga__card > *{ position:relative; }
.botiga__card h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.04; letter-spacing:-.018em; }
.hours{ display:grid; gap:0; }
.hours div{ display:flex; justify-content:space-between; gap:18px; padding-block:11px; border-top:1px solid var(--line-2); font-size:.95rem; }
.hours div:first-child{ border-top:0; }
.hours dt{ color:var(--ink-3); font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase; padding-top:.35em; }
.hours dd{ margin:0; color:var(--ink); text-align:right; }
.hours .is-closed dd{ color:var(--claret); }
.botiga__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.botiga__addr{ display:grid; gap:6px; }
.botiga__addr a{ font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.6rem); color:var(--ink); padding-block:6px; }
.botiga__addr p{ color:var(--ink-2); }

/* --------------------------------------------------------------------------
   section index markers
   -------------------------------------------------------------------------- */
.smark{
  position:absolute; left:var(--gutter); top:clamp(18px,2.4vh,36px);
  font-size:var(--fs-micro); letter-spacing:.3em; color:var(--ink-3); opacity:.7;
}
@media (max-width:1280px){ .smark{ display:none; } }

/* --------------------------------------------------------------------------
   11. video layers, dial transform box, parallax-safe overrides
   -------------------------------------------------------------------------- */
.portal__media > img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.portal__poster{ z-index:0; }
.portal__veil{ z-index:2; }

.craft__frame .media{ position:relative; }
.craft__video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease-soft);
}
.craft__video.is-playing{ opacity:1; }

.dial__needle{ transform-box:view-box; transform-origin:200px 200px; }

/* ghost word — no transform so parallax can drive it */
.craft__ghost{
  position:absolute; inset:0; left:0; top:0; transform:none;
  display:grid; place-items:center;
  text-align:center;
}

.hero__type{ will-change:transform; }

/* the arch on history / craft images keeps its own radius above the zoom */
.history__art .media,.botiga__art .media{ overflow:hidden; }
.history__art figure:first-child .media{ border-radius:999px 999px 3px 3px; }

/* rail hint on touch */
@media (hover:none){
  .rail{ cursor:default; }
  /* Un dit no necessita anella de focus. En tocar un mes, alguns
     navegadors (Safari sobretot) la dibuixen igualment i surt un
     requadre damunt la roda. El mes triat ja es distingeix pel color
     i la mida; amb teclat l'anella es conserva. */
  .dial__g:focus,
  .dial__g:focus-visible{ outline:none; }
}

/* print — keep it civilised */
@media print{
  .grain,.cursor,.progress,.mobilebar,.totop,.site-header,.navpanel,.scrollcue,.ribbon{ display:none !important; }
  .portal,.craft__ghost{ display:none !important; }
  body{ background:#fff; }
  .section{ padding-block:24px; break-inside:avoid; }
  .calcard{ opacity:1 !important; visibility:visible !important; position:static; }
  .cal__stage{ display:block; }
}

/* --------------------------------------------------------------------------
   12. hero vertical side labels
   -------------------------------------------------------------------------- */
.hero__side{
  position:absolute; z-index:4; top:50%;
  translate:0 -50%;
  writing-mode:vertical-rl;
  font-size:var(--fs-micro); letter-spacing:.38em; text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity 1.1s ease 1.5s;
}
.is-ready .hero__side{ opacity:.8; }
.hero__side--l{ left:calc(var(--gutter) * .42); rotate:180deg; }
.hero__side--r{ right:calc(var(--gutter) * .42); }
.hero__side b{ color:var(--gold-text); font-weight:400; }
@media (max-width:1180px){ .hero__side{ display:none; } }

/* footer: keep the right label clear of the back-to-top button */
@media (min-width:1100px){ .footer-mark{ padding-right:74px; } }

/* gallery tile caption is decorative on touch */
@media (hover:none){
  .tile figcaption{ opacity:1; transform:none; }
  .tile::after{ opacity:1; }
}

/* --------------------------------------------------------------------------
   13. wide-screen alignment — keep edge labels on the content grid
   -------------------------------------------------------------------------- */
.hero__meta{
  max-width:var(--maxw);
  margin-inline:auto;
}
.smark{
  left:max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}

/* the craft video sits exactly on its poster — no scale offset while it fades in */
.media > .craft__video{ transform:none; }

/* --------------------------------------------------------------------------
   14. CONTACTE — the closing call to action
   -------------------------------------------------------------------------- */
.cta{
  background:var(--espresso-2);
  color:var(--bone);
  text-align:center;
  position:relative;
}
.cta::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);
  opacity:.45;
}
.cta .eyebrow{ color:var(--gold-2); }
.cta__in{ display:grid; justify-items:center; gap:clamp(18px,2.6vw,30px); }
.cta__tel{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem,10.5vw,5.4rem);
  line-height:1; letter-spacing:-.02em;
  color:var(--bone);
  display:inline-block; padding:.08em .06em;
  background-image:linear-gradient(var(--gold-2),var(--gold-2));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .6s var(--ease), color .4s;
  white-space:nowrap;
}
.cta__tel:hover,.cta__tel:focus-visible{ color:var(--gold-3); background-size:100% 1px; }
.cta__note{ color:rgba(241,236,227,.72); max-width:46ch; text-wrap:pretty; }
.cta__row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.botiga__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.04; letter-spacing:-.018em;
}

/* --------------------------------------------------------------------------
   15. FET A MÀ — full-bleed film band
   -------------------------------------------------------------------------- */
.film{
  position:relative;
  height:clamp(320px,52vw,620px);
  overflow:hidden;
  background:var(--cocoa);
  isolation:isolate;
}
.film__media{ position:absolute; inset:-15% 0; will-change:transform; }
.film__media > img,.film__media > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.film__media > video{ opacity:0; transition:opacity 1s var(--ease-soft); }
.film__media > video.is-playing{ opacity:1; }
.film__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,16,14,.34) 0%, rgba(20,16,14,.06) 42%, rgba(20,16,14,.5) 100%);
}
.film__text{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center; text-align:center;
  padding:0 var(--gutter);
  color:var(--cream);
}
.film__stack{ display:grid; gap:clamp(14px,2vw,24px); justify-items:center; }
.film__text .eyebrow{ color:var(--gold-3); }
.film__text .h2{
  color:var(--cream);
  font-size:clamp(2.3rem,6.6vw,5.8rem);
  text-shadow:0 2px 34px rgba(20,16,14,.55);
}
.film__text .h2 em{ color:var(--gold-3); }
.film__corner{
  position:absolute; z-index:2; bottom:clamp(14px,2.4vw,28px);
  font-size:var(--fs-micro); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(241,236,227,.72); text-shadow:0 1px 8px rgba(20,16,14,.6);
}
.film__corner--l{ left:var(--gutter); }
.film__corner--r{ right:var(--gutter); }
@media (max-width:700px){
  .film{ height:clamp(340px,92vw,480px); }
  .film__corner--r{ display:none; }
}

/* --------------------------------------------------------------------------
   16. L'OFICI — scroll-scrubbed process film
   -------------------------------------------------------------------------- */
.craft__head .h2{ color:var(--bone); }
.lead--light{ color:rgba(241,236,227,.72); }
.scrub{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(30px,6vw,120px); align-items:start;
  margin-top:clamp(34px,5vw,64px);
  position:relative;
}
.scrub__media{ position:sticky; top:calc(var(--header-h) + 18px); }
.scrub__media .media{
  aspect-ratio:9/16; width:min(100%,400px); margin-inline:auto; border-radius:999px 999px 3px 3px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.scrub__media .media > video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:none; transition:opacity .8s var(--ease-soft);
}
.scrub__media .media > video.is-playing,
.scrub__media .media > video.is-scrub{ opacity:1; }
.scrub__bar{ width:min(100%,400px); margin-inline:auto; margin-top:18px; height:1px; background:rgba(230,214,174,.16); position:relative; }
.scrub__bar i{ position:absolute; inset:0; background:var(--gold-2); transform:scaleX(var(--p,0)); transform-origin:0 50%; }
.scrub__media figcaption{
  margin-top:14px; text-align:center;
  font-size:var(--fs-micro); letter-spacing:.28em; text-transform:uppercase; color:rgba(230,214,174,.72);
}
.scrub__steps{ display:grid; padding-bottom:clamp(30px,13vh,140px); }
.step{
  min-height:clamp(250px,42vh,400px);
  display:grid; align-content:center; gap:14px;
  padding-block:clamp(24px,4vh,48px);
  border-top:1px solid rgba(230,214,174,.12);
  opacity:.3; transition:opacity .6s var(--ease-soft);
}
.step:first-child{ border-top:0; }
.step.is-on{ opacity:1; }
.step .num{ color:var(--gold-2); }
.step h3{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2rem,3.8vw,3.2rem); line-height:1.02; letter-spacing:-.015em; color:var(--bone);
}
.step p{ color:rgba(241,236,227,.72); max-width:40ch; text-wrap:pretty; }
.craft__foot{
  margin-top:clamp(28px,4vw,56px);
  padding-top:clamp(24px,3vw,40px);
  border-top:1px solid rgba(230,214,174,.12);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px 40px;
}
/* Frases que donen una instruccio: n'hi ha una per a cada disseny, perque
   en mobil no hi ha ni pel·licula que segueixi el desplacament (L'ofici)
   ni cercle per girar (calendari). Cada seccio canvia al seu punt. */
.txt-mob{ display:none; }
@media (max-width:900px){ .craft .txt-desk{ display:none; } .craft .txt-mob{ display:inline; } }
@media (max-width:620px){ .calendari .txt-desk{ display:none; } .calendari .txt-mob{ display:inline; } }

/* Les fotos per pas i la barra de progres nomes existeixen en mobil. */
.step__img,.ofici-nav{ display:none; }

@media (max-width:900px){
  /* En mobil, L'ofici deixa de ser el video que segueix el desplacament i
     passa a ser un carrusel de quatre targetes, una per pas, cadascuna amb la
     seva foto. El video ni es mostra ni es descarrega (veure main.js). */
  .scrub{ display:block; }
  .scrub__media{ display:none; }

  .scrub__steps{
    display:grid; grid-auto-flow:column; grid-auto-columns:min(78%, 330px);
    gap:16px; position:relative;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);
    /* A sang: el carril arriba a les dues vores de la pantalla i la targeta
       seguent treu el nas per la dreta, que es el que convida a lliscar. */
    margin-inline:calc(var(--gutter) * -1);
    padding:6px var(--gutter) 4px;
    scrollbar-width:none;
  }
  .scrub__steps::-webkit-scrollbar{ display:none; }

  .step,.step.is-on{
    min-height:0; padding:0; border-top:0;
    display:grid; align-content:start; gap:12px;
    scroll-snap-align:start;
    opacity:1;                 /* l'estat del video d'escriptori aqui no pinta res */
  }
  .step__img{
    display:block; margin:0 0 8px;
    aspect-ratio:4/5; overflow:hidden;
    border-radius:999px 999px 4px 4px;
    background:rgba(230,214,174,.06);
    box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
  }
  .step__img img{ display:block; width:100%; height:100%; object-fit:cover; }
  .step .num{ display:flex; align-items:center; gap:12px; font-size:var(--fs-micro); letter-spacing:.3em; }
  .step .num::after{ content:""; flex:1; height:1px; background:rgba(230,214,174,.18); }
  .step h3{ font-size:clamp(1.9rem, 8vw, 2.3rem); }
  .step p{ font-size:.97rem; line-height:1.6; }

  /* La targeta de davant, plena; les altres, un pas enrere. Nomes quan el JS
     ha posat en marxa el carrusel: sense JS es veuen totes senceres.
     L'escala va a la FOTO i no a la targeta: el navegador alinea les targetes
     per la seva vora, i encongir-les la desplacava gairebe 5px. */
  .scrub__steps.is-carousel .step{ opacity:.42; transition:opacity .45s var(--ease-soft); }
  .scrub__steps.is-carousel .step.is-cur{ opacity:1; }
  .scrub__steps.is-carousel .step__img{ transform:scale(.955); transform-origin:50% 100%; transition:transform .6s var(--ease); }
  .scrub__steps.is-carousel .step.is-cur .step__img{ transform:none; }

  .ofici-nav{ display:flex; align-items:center; gap:18px; margin-top:24px; }
  .ofici-nav__bar{ flex:1; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
  .ofici-nav__seg{ position:relative; height:28px; padding:0; border:0; background:none; cursor:pointer; }
  .ofici-nav__seg::before{
    content:""; position:absolute; left:0; right:0; top:50%; height:2px; translate:0 -50%;
    border-radius:2px; background:rgba(230,214,174,.18);
    transition:background-color .4s var(--ease-soft);
  }
  .ofici-nav__seg.is-on::before{ background:var(--gold-2); }
  .ofici-nav__count{ font-size:var(--fs-micro); letter-spacing:.24em; color:rgba(230,214,174,.55); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .ofici-nav__count b{ color:var(--gold-2); font-weight:400; }

  .craft__foot{ display:grid; }
}

/* --------------------------------------------------------------------------
   17. gallery video tile + centred section heads
   -------------------------------------------------------------------------- */
.tile--video{ cursor:default; }
.tile--video .media > video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transform:none; transition:opacity .8s var(--ease-soft);
}
.tile--video .media > video.is-playing{ opacity:1; }
.tile--video::after{ opacity:1; }
.tile--video figcaption{ opacity:1; transform:none; display:flex; align-items:center; gap:10px; }
.tile--video figcaption::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-2);
  box-shadow:0 0 0 0 rgba(198,161,90,.6);
}
@media (prefers-reduced-motion: no-preference){
  .tile--video figcaption::before{ animation:livepulse 2.2s ease-out infinite; }
}
@keyframes livepulse{ 0%{ box-shadow:0 0 0 0 rgba(198,161,90,.55) } 100%{ box-shadow:0 0 0 9px rgba(198,161,90,0) } }

.section-head--center{ justify-items:center; text-align:center; }
.section-head--center .lead{ margin-inline:auto; }

/* --------------------------------------------------------------------------
   18. COM ARRIBAR — the map
   -------------------------------------------------------------------------- */
.mapblock{
  position:relative;
  margin-top:clamp(30px,5vw,72px);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:var(--cream);
}
.mapblock__media .media{ aspect-ratio:1024/600; border-radius:0; }
.mapblock__media .media img{ filter:contrast(1.02); }
.mapblock__card{
  position:absolute; z-index:2; left:0; bottom:0;
  width:min(392px,86%);
  margin:clamp(14px,2vw,26px);
  padding:clamp(20px,2.4vw,30px);
  background:color-mix(in srgb, var(--cream) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line-gold);
  display:grid; gap:14px;
}
.mapblock__addr{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.16; color:var(--ink);
}
.mapblock__addr span{ font-family:var(--sans); font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); }
.mapblock__note{ font-size:.92rem; color:var(--ink-2); text-wrap:pretty; }
.mapblock__credit{
  position:absolute; z-index:2; right:10px; bottom:8px;
  font-size:9.5px; letter-spacing:.06em; color:var(--ink-3);
  background:color-mix(in srgb, var(--cream) 80%, transparent);
  padding:3px 8px; border-radius:100px;
}
@media (max-width:760px){
  .mapblock{ background:transparent; border:0; }
  .mapblock__media .media{ aspect-ratio:4/3; border-radius:3px; border:1px solid var(--line); }
  .mapblock__card{
    position:static; width:auto; margin:14px 0 0;
    background:var(--cream); border:1px solid var(--line-gold);
  }
  .mapblock__credit{ position:static; display:block; text-align:right; background:none; padding:6px 0 0; }
}

/* --------------------------------------------------------------------------
   19. CONTACTE — phone on one side, email on the other
   -------------------------------------------------------------------------- */
.cta{ text-align:left; }
.cta__in{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(30px,5vw,88px); align-items:start; justify-items:stretch;
}
.cta__lead{ display:grid; gap:clamp(14px,2vw,22px); align-content:start; }
.cta__tel{ white-space:nowrap; }
.cta__note{ margin:0; }
.cta__hours{
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  line-height:2; color:rgba(241,236,227,.55);
}
@media (max-width:900px){
  .cta__in{ grid-template-columns:minmax(0,1fr); gap:34px; }
}

/* Correu: ocupa el lloc on hi havia el formulari. L'enllac obre el programa
   de correu de qui visita; l'adreca queda a la vista perque, si no en te cap
   configurat (a l'ordinador passa sovint), la pugui copiar. */
.cta__mail{
  display:grid; gap:18px; justify-items:start; align-content:start;
  padding:clamp(24px,3.2vw,40px);
  border:1px solid rgba(230,214,174,.16); border-radius:3px;
  background:rgba(241,236,227,.025);
}
.cta__mail-label{ margin:0; font-size:var(--fs-micro); letter-spacing:.3em; text-transform:uppercase; color:var(--gold-2); }
.cta__mail-addr{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.55rem,3.1vw,2.4rem); line-height:1.15; letter-spacing:-.01em;
  color:var(--bone); overflow-wrap:anywhere;
  background-image:linear-gradient(var(--gold-2),var(--gold-2));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .6s var(--ease), color .4s;
}
.cta__mail-addr:hover,.cta__mail-addr:focus-visible{ color:var(--gold-3); background-size:100% 1px; }
.cta__mail-note{ margin:0; font-size:.9rem; color:rgba(241,236,227,.55); }
.footer-mail{ user-select:all; }

/* the scrubbed film aligns to the section's left edge, not its column centre */
@media (min-width:901px){
  .scrub__media .media,.scrub__bar{ margin-inline:0; }
}