/* ==========================================================================
   MAS BONREPÒS · Sistema visual
   Paleta: verd bosc profund, oliva, pedra, crema · accents coure i ocre.
   Escrit a mà, sense frameworks. Ordre del fitxer:
     1 tokens · 2 reset · 3 tipografia · 4 botons · 5 imatges
     6 loader/nav · 7 hero · 8 seccions · 9 animacions · 10 responsive
   ========================================================================== */

:root{
  /* --- Color · paper d'embolicar i sang de bou ------------------------- */
  --ink:      #241A15;   /* marro fosc, gairebe negre */
  --ink-2:    #33241C;
  --ink-3:    #443026;
  --bosc:     #5A3524;   /* fons profunds: fusta vella */
  --oliva:    #8C7F6B;
  --oliva-2:  #B3A88F;
  --coure:    #7A2A22;   /* sang de bou · accent principal */
  --coure-2:  #A84436;
  --ocre:     #C99A2E;   /* mostassa · accent que brilla sobre fosc */
  --ocre-2:   #E8C670;
  --crema:    #F7F3EA;   /* paper d'embolicar */
  --crema-2:  #EFE7D8;
  --crema-3:  #DCCFB8;
  --pedra:    #8A7C6C;   /* text secundari sobre clar */

  --bg:       var(--crema);
  --fg:       var(--ink);

  /* --- Tipografia ----------------------------------------------------- */
  --display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:    "Jost", "Futura", "Century Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Mides ---------------------------------------------------------- */
  --wrap: 1280px;
  --gut:  clamp(20px, 5vw, 72px);
  --r:    2px;
  --r-lg: 4px;

  /* --- Corbes --------------------------------------------------------- */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);
}

/* ==========================================================================
   2 · RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15.5px,1.02vw,17px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--coure); color:var(--crema); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(84px,11vw,168px); position:relative; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--ink); color:var(--crema); padding:12px 20px;
}
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--ocre); outline-offset:3px; }

/* --- Textura de gra: treu el look "plantilla neta" de les fotos d'estoc --- */
.grain-defs{ position:absolute; width:0; height:0; }
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9998;
  opacity:.15; mix-blend-mode:multiply;
  filter:url(#grainFilter);
  background:#fff;
}
@supports not (filter:url(#grainFilter)){ .grain{ display:none; } }

/* ==========================================================================
   3 · TIPOGRAFIA
   ========================================================================== */
.h2{
  font-family:var(--display);
  font-weight:350;
  font-size:clamp(2.1rem,5.2vw,4.15rem);
  line-height:1.04;
  letter-spacing:-.022em;
  font-variation-settings:"SOFT" 20, "WONK" 1;
}
.h2 em{
  font-style:italic;
  color:var(--coure);
  font-variation-settings:"SOFT" 40, "WONK" 1;
}
.h2--light{ color:var(--crema); }
.h2--light em{ color:var(--ocre-2); }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:.7rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--coure);
  margin-bottom:clamp(18px,2.4vw,28px);
}
.eyebrow i{
  font-style:normal; font-family:var(--display);
  font-size:.78rem; letter-spacing:0;
  color:var(--oliva);
  padding-right:12px;
  border-right:1px solid color-mix(in srgb, var(--oliva) 45%, transparent);
}
.eyebrow--light{ color:var(--ocre-2); }
.eyebrow--light i{ color:var(--ocre); border-right-color:color-mix(in srgb, var(--ocre) 45%, transparent); }

.lead{
  font-size:clamp(1.06rem,1.32vw,1.24rem);
  line-height:1.62;
  color:color-mix(in srgb, var(--ink) 88%, transparent);
}
p{ color:color-mix(in srgb, var(--ink) 74%, transparent); }
.section--dark p, .section--deep p{ color:color-mix(in srgb, var(--crema) 68%, transparent); }

.sec-head{ margin-bottom:clamp(46px,6vw,84px); }
.sec-head--split{
  display:grid; grid-template-columns:1.35fr .85fr;
  gap:clamp(24px,5vw,72px); align-items:end;
}
.sec-head__aside{
  font-size:.96rem; line-height:1.72;
  padding-left:24px;
  border-left:1px solid color-mix(in srgb, var(--ink) 15%, transparent);
}
.section--dark .sec-head__aside, .section--deep .sec-head__aside{
  border-left-color:color-mix(in srgb, var(--crema) 20%, transparent);
}
.sec-head--center{ text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
@media (max-width:860px){
  .sec-head--split{ grid-template-columns:1fr; align-items:start; }
}

/* ==========================================================================
   4 · BOTONS I ENLLAÇOS
   ========================================================================== */
.btn{
  --b-bg:var(--ink); --b-fg:var(--crema); --b-bd:var(--ink);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 30px;
  border:1px solid var(--b-bd);
  border-radius:100px;
  background:var(--b-bg); color:var(--b-fg);
  font-size:.8rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; isolation:isolate;
  transition:color .45s var(--e-out), border-color .45s var(--e-out), transform .45s var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--b-fg);
  transform:translateY(101%);
  transition:transform .55s var(--e-out);
}
.btn:hover{ color:var(--b-bg); transform:translateY(-2px); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }

.btn--lg{ padding:17px 38px; }
.btn--sm{ padding:10px 20px; font-size:.72rem; }
.btn--block{ display:flex; width:100%; }

.btn--ocre{  --b-bg:var(--ocre);  --b-fg:var(--ink);   --b-bd:var(--ocre); }
.btn--coure{ --b-bg:var(--coure); --b-fg:var(--crema); --b-bd:var(--coure); }
.btn--dark{  --b-bg:var(--ink);   --b-fg:var(--crema); --b-bd:var(--ink); }
.btn--ghost{ --b-bg:transparent;  --b-fg:var(--crema); --b-bd:color-mix(in srgb, var(--crema) 42%, transparent); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--crema); }
.btn--outline{ --b-bg:transparent; --b-fg:var(--ink); --b-bd:color-mix(in srgb, var(--ink) 30%, transparent); }
.btn--outline::before{ background:var(--ink); }
.btn--outline:hover{ color:var(--crema); border-color:var(--ink); }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--coure);
  padding-bottom:5px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--e-out), color .3s;
}
.link-arrow::after{ content:"→"; transition:transform .45s var(--e-out); }
.link-arrow:hover{ background-size:0% 1px; }
.link-arrow:hover::after{ transform:translateX(6px); }
.section--dark .link-arrow, .section--deep .link-arrow{ color:var(--ocre-2); }

/* ==========================================================================
   5 · IMATGES I PLACEHOLDERS
   Cada foto va dins d'un <figure class="ph" data-ph="què hi ha d'anar">.
   Si li treus la imatge de dins, el forat es dibuixa sol amb el text a sota.
   ========================================================================== */
.ph{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--oliva) 22%, var(--crema-2)) 0%,
                            var(--crema-2) 48%,
                            color-mix(in srgb, var(--ocre) 20%, var(--crema-2)) 100%);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius:var(--r-lg);
  isolation:isolate;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(45deg, transparent 0 11px,
                    color-mix(in srgb, var(--ink) 5%, transparent) 11px 12px);
  opacity:.55;
}
.ph::after{
  content:attr(data-ph);
  position:absolute; inset:auto 0 0 0;
  padding:10px 14px;
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 58%, transparent);
  background:color-mix(in srgb, var(--crema) 82%, transparent);
  backdrop-filter:blur(4px);
  border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  text-align:center;
}
.ph:has(img){ background:none; border:0; }
.ph:has(img)::before, .ph:has(img)::after{ display:none; }
.ph > img{ width:100%; height:100%; object-fit:cover; }

/* Un tractament comú lliga fotos de procedències diferents com si fossin
   d'una sola sessió. Amb la fotografia real es pot suavitzar o treure. */
.ph > img{ filter:saturate(.9) contrast(1.05) hue-rotate(-4deg); }
.hero__media img{ filter:saturate(.85) contrast(1.06) hue-rotate(-6deg); }

.ph--cover{ width:100%; height:100%; border-radius:0; border:0; }
.ph--4x5{ aspect-ratio:4/5; }
.ph--5x4{ aspect-ratio:5/4; }
.ph--1x1{ aspect-ratio:1/1; }
.ph--16x10{ aspect-ratio:16/10; }
.ph--round{ border-radius:50%; aspect-ratio:1/1; }
.ph--round::after{ display:none; }

/* ==========================================================================
   6 · LOADER, PROGRÉS, NAV
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .7s var(--e-out), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; }
.loader__word{
  display:block;
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(1.6rem,4vw,2.6rem);
  letter-spacing:.02em; color:var(--crema);
  opacity:0; animation:fadeUp .9s var(--e-out) .1s forwards;
}
.loader__bar{
  display:block; width:min(220px,42vw); height:1px;
  background:color-mix(in srgb, var(--crema) 20%, transparent);
  margin:22px auto 0; overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0; background:var(--ocre);
  animation:loadBar 1.05s var(--e-io) .2s forwards;
}
@keyframes loadBar{ to{ width:100%; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:1001;
  background:transparent; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--oliva), var(--ocre));
}

.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding-block:clamp(14px,2vw,26px);
  transition:transform .5s var(--e-out), padding .5s var(--e-out),
             background .5s var(--e-out), box-shadow .5s var(--e-out);
}
.nav.is-stuck{
  padding-block:11px;
  background:color-mix(in srgb, var(--crema) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
.nav.is-hidden{ transform:translateY(-102%); }

.nav__in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vw,24px);
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__mark{
  display:grid; place-items:center;
  width:38px; height:38px; flex:none;
  border:1px solid color-mix(in srgb, var(--ocre) 70%, transparent);
  border-radius:50%;
  font-family:var(--display); font-size:1.05rem; font-style:italic;
  color:var(--ocre);
  transition:background .5s var(--e-out), color .5s var(--e-out);
}
.brand:hover .brand__mark{ background:var(--ocre); color:var(--ink); }
.brand__mark--lg{ width:54px; height:54px; font-size:1.5rem; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt b{
  font-family:var(--display); font-weight:400; font-size:1.16rem;
  letter-spacing:-.01em; color:var(--crema);
  white-space:nowrap;
  transition:color .5s;
}
.brand__txt em{
  font-style:normal; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 55%, transparent);
  white-space:nowrap;
  transition:color .5s;
}
.nav.is-stuck .brand__txt b{ color:var(--ink); }
.nav.is-stuck .brand__txt em{ color:var(--pedra); }

/* Els set enllaços han de cabre en una sola línia des dels 1080 px, que és on
   apareixen. Per això van amb nowrap i amb mides que s'estrenyen soles: si es
   parteixen en dues línies, la barra creix i sembla que estigui trencada. */
.nav__links{ display:flex; flex-wrap:nowrap; gap:clamp(13px,1.7vw,30px); }
.nav__links a{
  position:relative;
  font-size:clamp(.7rem,.62vw,.76rem); letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 78%, transparent);
  padding-block:4px;
  white-space:nowrap;
  transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ocre);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--e-out);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a:hover, .nav__links a.is-active{ color:var(--ocre-2); }
.nav.is-stuck .nav__links a{ color:color-mix(in srgb, var(--ink) 72%, transparent); }
.nav.is-stuck .nav__links a:hover, .nav.is-stuck .nav__links a.is-active{ color:var(--coure); }

.nav__end{ display:flex; align-items:center; gap:18px; flex:none; }
.nav__end .btn{ white-space:nowrap; }
.nav__tel{
  font-size:.78rem; letter-spacing:.1em; white-space:nowrap;
  color:color-mix(in srgb, var(--crema) 70%, transparent);
  transition:color .35s;
}
.nav.is-stuck .nav__tel{ color:var(--ink); }
.nav__tel:hover{ color:var(--ocre); }

.burger{ display:none; width:34px; height:34px; position:relative; }
.burger span{
  position:absolute; left:5px; right:5px; height:1.5px; background:var(--crema);
  transition:transform .45s var(--e-out), opacity .3s, background .5s;
}
.burger span:nth-child(1){ top:13px; }
.burger span:nth-child(2){ top:20px; }
.nav.is-stuck .burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span{ background:var(--crema); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* De 1080 a 1300 la barra va justa: primer cau el telèfon (que ja és al calaix
   i al peu) i després s'estrenyen marca, enllaços i botó. Els set enllaços no
   es toquen: han de sortir tots a dalt. */
@media (max-width:1300px){
  .nav__end .nav__tel{ display:none; }
}
@media (max-width:1200px){
  .brand__mark{ width:34px; height:34px; font-size:.95rem; }
  .brand__txt b{ font-size:1.02rem; }
  .brand__txt em{ font-size:.53rem; letter-spacing:.15em; }
  .nav__end .btn{ padding:9px 16px; font-size:.67rem; letter-spacing:.1em; }
}
@media (max-width:1080px){
  .nav__links{ display:none; }
  .burger{ display:block; }
}
@media (max-width:720px){ .nav__end{ display:none; } }

/* --- Calaix mòbil --- */
.drawer{
  position:fixed; inset:0; z-index:999;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px var(--gut) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--e-out);
  pointer-events:none;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.drawer__nav{ display:flex; flex-direction:column; gap:2px; }
.drawer__nav a{
  display:flex; align-items:baseline; gap:16px;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.7rem,7vw,2.7rem);
  line-height:1.35; color:var(--crema);
  border-bottom:1px solid color-mix(in srgb, var(--crema) 12%, transparent);
  padding-block:9px;
  opacity:0; transform:translateY(22px);
  transition:color .35s;
}
.drawer.is-open .drawer__nav a{ animation:fadeUp .7s var(--e-out) forwards; }
.drawer.is-open .drawer__nav a:nth-child(1){ animation-delay:.16s; }
.drawer.is-open .drawer__nav a:nth-child(2){ animation-delay:.22s; }
.drawer.is-open .drawer__nav a:nth-child(3){ animation-delay:.28s; }
.drawer.is-open .drawer__nav a:nth-child(4){ animation-delay:.34s; }
.drawer.is-open .drawer__nav a:nth-child(5){ animation-delay:.40s; }
.drawer.is-open .drawer__nav a:nth-child(6){ animation-delay:.46s; }
.drawer.is-open .drawer__nav a:nth-child(7){ animation-delay:.52s; }
.drawer__nav a i{
  font-style:normal; font-family:var(--sans);
  font-size:.62rem; letter-spacing:.2em; color:var(--ocre);
}
.drawer__nav a:hover{ color:var(--ocre-2); }
.drawer__foot{
  margin-top:40px; display:flex; flex-wrap:wrap; gap:24px;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ocre-2);
}

/* ==========================================================================
   7 · HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:150px 0 clamp(78px,10vw,120px);
  overflow:hidden;
  background:var(--ink);
}
.hero__media{
  position:absolute; inset:-8% 0 -8% 0; z-index:0;
  will-change:transform;
}
.hero__media > *{ width:100%; height:100%; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media .ph{ animation:kenburns 28s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.12); } }

.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 76%, transparent) 0%,
      color-mix(in srgb, var(--ink) 26%, transparent) 34%,
      color-mix(in srgb, var(--ink) 70%, transparent) 66%,
      var(--ink) 100%),
    radial-gradient(120% 82% at 12% 92%, color-mix(in srgb, var(--bosc) 62%, transparent), transparent 70%);
}

.hero__in{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
}
.hero__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(3.2rem,12.4vw,10.5rem);
  line-height:.88;
  letter-spacing:-.045em;
  color:var(--crema);
  font-variation-settings:"SOFT" 30, "WONK" 1;
  margin-bottom:clamp(20px,3vw,34px);
}
.hero__title em{
  font-style:italic;
  color:var(--ocre-2);
  font-variation-settings:"SOFT" 60, "WONK" 1;
}
.hero__claim{
  max-width:36ch;
  font-size:clamp(1.05rem,1.65vw,1.42rem);
  line-height:1.55;
  color:color-mix(in srgb, var(--crema) 84%, transparent) !important;
}
.hero__claim em{
  font-family:var(--display); font-style:italic;
  color:var(--ocre-2);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.4vw,44px); }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,60px);
  margin-top:clamp(38px,5vw,64px);
  padding-top:26px;
  border-top:1px solid color-mix(in srgb, var(--crema) 16%, transparent);
}
.hero__meta li{ display:flex; flex-direction:column; gap:2px; }
.hero__meta b{
  font-family:var(--display); font-weight:400; font-size:1.85rem;
  color:var(--ocre-2); line-height:1;
}
.hero__meta span{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 54%, transparent);
}

.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(96px,12vw,150px); z-index:3;
  display:none; align-items:center; gap:14px;
  font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 60%, transparent);
  writing-mode:vertical-rl;
}
@media (min-width:1080px){ .hero__scroll{ display:flex; } }
.hero__scroll i{
  width:1px; height:64px; background:color-mix(in srgb, var(--crema) 25%, transparent);
  position:relative; overflow:hidden; display:block;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--ocre);
  animation:scrollDot 2.2s var(--e-io) infinite;
}
@keyframes scrollDot{
  0%{ transform:translateY(-100%); } 50%{ transform:translateY(0); } 100%{ transform:translateY(100%); }
}

.hero__ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  border-top:1px solid color-mix(in srgb, var(--crema) 14%, transparent);
  background:color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter:blur(6px);
  overflow:hidden;
  padding-block:13px;
}
.ticker__track{
  display:flex; align-items:center; gap:30px; width:max-content;
  animation:ticker 36s linear infinite;
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 64%, transparent);
  white-space:nowrap;
}
.ticker__track i{ color:var(--ocre); font-style:normal; font-size:.55rem; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   8 · SECCIONS
   ========================================================================== */
.section--soft{ background:color-mix(in srgb, var(--crema-2) 68%, var(--crema)); }
.section--dark{ background:var(--ink); color:var(--crema); }
.section--deep{
  background:
    radial-gradient(92% 62% at 82% 0%, color-mix(in srgb, var(--bosc) 66%, transparent), transparent 66%),
    var(--ink-2);
  color:var(--crema);
}

/* --- 8.1 El mas (història + amfitrions) --------------------------------- */
.historia__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(28px,5vw,80px);
  align-items:center;
}
/* El `grid-row:1` és imprescindible al bloc invertit: allà el text va primer al
   codi però ocupa les columnes de la dreta, i sense fila fixada la col·locació
   automàtica no pot retrocedir i baixa les fotos a una segona fila. */
.historia__txt{ grid-column:1 / span 6; grid-row:1; }
.historia__media{ grid-column:8 / span 5; grid-row:1; position:relative; padding-bottom:14%; }
.historia--flip .historia__txt{ grid-column:7 / span 6; }
.historia--flip .historia__media{ grid-column:1 / span 5; }
.historia__txt p + p{ margin-top:1.1em; }
.historia__media--small{
  position:absolute; right:-12%; bottom:0; width:52%;
  border:8px solid var(--crema);
  box-shadow:0 22px 60px -22px color-mix(in srgb, var(--ink) 55%, transparent);
}
.section--soft .historia__media--small{ border-color:color-mix(in srgb, var(--crema-2) 68%, var(--crema)); }

.seal{
  position:absolute; top:-28px; left:-28px; z-index:3;
  width:98px; height:98px; border-radius:50%;
  display:grid; place-content:center; text-align:center;
  background:var(--bosc); color:var(--ocre-2);
  box-shadow:0 14px 34px -12px color-mix(in srgb, var(--ink) 60%, transparent);
  animation:spinSlow 30s linear infinite;
}
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.seal b{ display:block; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400; }
.seal em{
  display:block; font-family:var(--display); font-style:normal;
  font-size:1.45rem; line-height:1.1; color:var(--crema);
}

.signature{ margin-top:clamp(26px,3.4vw,40px); display:flex; align-items:center; gap:18px; }
.signature__av{ width:64px; height:64px; flex:none; border-radius:50%; overflow:hidden; }
.signature__name{
  display:block;
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size:1.75rem; color:var(--bosc); line-height:1.1;
}
.signature__role{
  display:block; margin-top:4px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pedra);
}

/* --- 8.2 Avantatges ------------------------------------------------------ */
.valores__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:1px;
  background:color-mix(in srgb, var(--crema) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--crema) 13%, transparent);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.vcard{
  position:relative; background:var(--ink);
  padding:clamp(28px,3.2vw,44px);
  transition:background .6s var(--e-out);
  overflow:hidden;
}
.vcard::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--oliva),var(--ocre));
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--e-out);
}
.vcard:hover{ background:var(--ink-3); }
.vcard:hover::after{ transform:scaleX(1); }
.vcard__ico{
  display:grid; place-items:center;
  width:52px; height:52px; margin-bottom:22px;
  border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ocre) 40%, transparent);
  color:var(--ocre);
  transition:transform .6s var(--e-out), background .5s, color .5s;
}
.vcard__ico svg{ width:24px; height:24px; }
.vcard:hover .vcard__ico{
  transform:rotate(-8deg) scale(1.06);
  background:color-mix(in srgb, var(--ocre) 14%, transparent);
  color:var(--ocre-2);
}
.vcard h3{
  font-family:var(--display); font-weight:400;
  font-size:1.3rem; line-height:1.25; letter-spacing:-.01em;
  color:var(--crema); margin-bottom:12px;
}
.vcard p{ font-size:.94rem; line-height:1.68; }

.valores__note{
  margin-top:clamp(38px,4.4vw,58px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  padding:26px clamp(22px,3vw,38px);
  border:1px solid color-mix(in srgb, var(--ocre) 30%, transparent);
  border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--ocre) 7%, transparent);
}
.valores__note p{
  font-family:var(--display); font-size:1.16rem; font-style:italic;
  color:var(--crema) !important; max-width:54ch;
}

/* --- 8.3 Les cases ------------------------------------------------------- */
.casas{ display:flex; flex-direction:column; gap:clamp(72px,9vw,146px); }

.casa{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.6vw,80px);
  align-items:center;
}
.casa:nth-child(even) .casa__media{ order:2; }

.casa__media{ position:relative; }
.casa__frame{ position:relative; overflow:hidden; border-radius:var(--r-lg); }
.casa__frame .ph{ transition:transform 1.2s var(--e-out); }
.casa:hover .casa__frame .ph{ transform:scale(1.045); }
.casa__n{
  position:absolute; z-index:2; top:-.35em; left:-.12em;
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(4.5rem,9vw,8.5rem); line-height:1;
  color:color-mix(in srgb, var(--coure) 82%, transparent);
  pointer-events:none;
  text-shadow:0 10px 30px color-mix(in srgb, var(--ink) 30%, transparent);
}
.casa:nth-child(even) .casa__n{ left:auto; right:-.12em; }
.casa__badge{
  position:absolute; z-index:2; top:16px; right:16px;
  padding:7px 14px; border-radius:100px;
  background:color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter:blur(6px);
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ocre-2);
}

.casa__body h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.06;
  letter-spacing:-.02em; color:var(--ink);
  margin-bottom:16px;
}
.casa__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.casa__chips li{
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 68%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius:100px; padding:5px 12px;
  background:color-mix(in srgb, var(--crema) 60%, transparent);
}
.casa__body > p{ font-size:1rem; line-height:1.72; max-width:46ch; }
.casa__body > p + p{ margin-top:.9em; }

.casa__feats{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 22px; margin-top:22px;
}
.casa__feats li{
  position:relative; padding-left:17px;
  font-size:.88rem; line-height:1.6;
  color:color-mix(in srgb, var(--ink) 70%, transparent);
}
.casa__feats li::before{
  content:""; position:absolute; left:0; top:.66em;
  width:7px; height:1px; background:var(--coure);
}

.casa__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:18px 28px;
  margin-top:clamp(26px,3vw,36px);
  padding-top:22px;
  border-top:1px solid color-mix(in srgb, var(--ink) 13%, transparent);
}
.casa__price{ display:flex; align-items:baseline; gap:9px; }
.casa__price b{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,3vw,2.5rem); line-height:1;
  color:var(--coure);
}
.casa__price span{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pedra);
}

/* --- El mas sencer ------------------------------------------------------- */
.sencer{
  margin-top:clamp(70px,8vw,130px);
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(24px,4vw,56px);
  padding:clamp(30px,4vw,54px) clamp(26px,4vw,58px);
  border:1px solid color-mix(in srgb, var(--oliva) 42%, transparent);
  border-radius:var(--r-lg);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--oliva) 12%, transparent),
                            color-mix(in srgb, var(--ocre) 8%, transparent));
}
.sencer__n{
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(3.2rem,7vw,5.4rem); line-height:.9; color:var(--bosc);
}
.sencer__n span{
  display:block; font-family:var(--sans); font-style:normal;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pedra);
  margin-top:6px;
}
.sencer__txt h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.14;
  color:var(--ink); margin-bottom:8px;
}
.sencer__txt p{ font-size:.96rem; max-width:52ch; }
.sencer__cta{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.sencer__price{
  font-family:var(--display); font-size:1.5rem; color:var(--coure); white-space:nowrap;
}
.sencer__price em{ font-style:normal; font-family:var(--sans); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--pedra); display:block; text-align:right; }

.casas__legal{
  margin-top:clamp(30px,3.6vw,48px);
  font-size:.82rem; line-height:1.7;
  color:color-mix(in srgb, var(--ink) 58%, transparent);
  max-width:74ch;
}

/* --- 8.4 Banda a sangre -------------------------------------------------- */
.sangre{
  position:relative; overflow:hidden;
  min-height:clamp(400px,72vh,760px);
  display:grid; place-items:center;
  background:var(--ink);
}
.sangre__media{ position:absolute; inset:-12% 0; z-index:0; will-change:transform; }
.sangre__media > *{ width:100%; height:100%; }
.sangre__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 62%, transparent),
                            color-mix(in srgb, var(--ink) 46%, transparent) 45%,
                            color-mix(in srgb, var(--ink) 72%, transparent));
}
.sangre__in{
  position:relative; z-index:2; text-align:center;
  padding:clamp(70px,10vw,130px) var(--gut);
  max-width:940px;
}
.sangre__quote{
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(1.7rem,4.6vw,3.5rem); line-height:1.18;
  letter-spacing:-.02em;
  color:var(--crema) !important;
}
.sangre__quote em{ font-style:normal; color:var(--ocre-2); }
.sangre__by{
  margin-top:26px;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 58%, transparent) !important;
}

/* --- 8.5 Entorn i activitats -------------------------------------------- */
.acts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,3.4vw,52px) clamp(34px,5vw,84px);
  margin-top:clamp(40px,5vw,68px);
}
.act{ display:flex; align-items:baseline; gap:12px; padding-bottom:14px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.act h3{
  font-family:var(--display); font-weight:400; font-size:1.1rem;
  line-height:1.3; color:var(--ink); flex:0 1 auto;
}
.act h3 span{ display:block; font-family:var(--sans); font-size:.84rem;
  color:var(--pedra); margin-top:3px; }
.dots{
  flex:1 1 auto; min-width:18px; height:1px;
  align-self:flex-end; margin-bottom:8px;
  background-image:radial-gradient(circle, color-mix(in srgb, var(--ink) 34%, transparent) 1px, transparent 1px);
  background-size:6px 2px; background-repeat:repeat-x;
}
.act__dist{
  flex:none; font-family:var(--display); font-size:1rem; color:var(--coure); white-space:nowrap;
}

/* --- 8.6 Galeria --------------------------------------------------------- */
/* Mosaic de 4 × 3 amb cada peça col·locada a mà. Les peces NO porten
   aspect-ratio: l'alçada els la dona la fila i s'estiren fins a omplir-la, que
   és l'única manera que el mosaic no deixi forats. El retall el fa l'object-fit
   de la imatge, no la caixa.

     +-----------+---+---+
     |     a     | b | c |
     |           |   +---+
     |           |   | e |
     +-----------+---+---+
     |     d     |   f   |
     +-----------+-------+                                                    */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:clamp(120px,13vw,187px) clamp(120px,13vw,187px) clamp(200px,22vw,318px);
  gap:clamp(10px,1.4vw,18px);
}
.gal{ border-color:color-mix(in srgb, var(--crema) 14%, transparent); }
.gal--a{ grid-area:1 / 1 / 3 / 3; }
.gal--b{ grid-area:1 / 3 / 3 / 4; }
.gal--c{ grid-area:1 / 4 / 2 / 5; }
.gal--e{ grid-area:2 / 4 / 3 / 5; }
.gal--d{ grid-area:3 / 1 / 4 / 3; }
.gal--f{ grid-area:3 / 3 / 4 / 5; }
.gallery .ph{ transition:transform .9s var(--e-out), filter .9s var(--e-out); }
.gallery .ph:hover{ transform:scale(1.02); filter:brightness(1.06); }

/* En dues columnes: la gran a dalt ocupant-ho tot, dues parelles i una ampla
   per tancar. Sis peces en cinc files, sense cap cel·la buida. */
@media (max-width:820px){
  .gallery{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:none;
    grid-auto-rows:clamp(110px,24vw,170px);
  }
  .gal{ grid-area:auto; grid-column:span 1; grid-row:span 1; }
  .gal--a{ grid-column:span 2; grid-row:span 2; }
  .gal--f{ grid-column:span 2; grid-row:span 2; }
}

.marquee{
  margin-top:clamp(56px,7vw,96px);
  padding-block:clamp(18px,2.4vw,30px);
  border-block:1px solid color-mix(in srgb, var(--crema) 14%, transparent);
  overflow:hidden;
}
.marquee__track{
  display:flex; align-items:center; gap:22px; width:max-content;
  animation:ticker 42s linear infinite;
  white-space:nowrap;
}
.marquee__track span{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.6rem,4.4vw,3.2rem);
  color:color-mix(in srgb, var(--crema) 30%, transparent);
}
.marquee__track em{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.6rem,4.4vw,3.2rem);
  color:var(--ocre);
}

/* --- 8.7 Testimonis ------------------------------------------------------ */
.rating{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; }
.rating__stars{ color:var(--ocre); letter-spacing:.18em; font-size:1rem; }
.rating b{ font-family:var(--display); font-weight:400; font-size:1.7rem; color:var(--ink); }
.rating span:last-child{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pedra); }

.slider{ position:relative; }
.slider__viewport{ overflow:hidden; margin-inline:-2px; padding-inline:2px; }
.slider__track{
  display:flex; gap:clamp(18px,2.4vw,30px);
  transition:transform .85s var(--e-out);
  will-change:transform;
}
.quote{
  flex:0 0 calc((100% - (2 * clamp(18px,2.4vw,30px))) / 3);
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  padding:clamp(28px,3vw,40px);
  background:#fff;
  border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius:var(--r-lg);
  box-shadow:0 20px 50px -34px color-mix(in srgb, var(--ink) 50%, transparent);
  position:relative;
  transition:transform .6s var(--e-out), box-shadow .6s var(--e-out);
}
.quote:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -32px color-mix(in srgb, var(--ink) 55%, transparent); }
.quote::before{
  content:"\201D";
  position:absolute; top:6px; right:22px;
  font-family:var(--display); font-size:5.5rem; line-height:1;
  color:color-mix(in srgb, var(--ocre) 42%, transparent);
  pointer-events:none;
}
.quote p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.02rem,1.3vw,1.16rem); line-height:1.55;
  color:var(--ink-2) !important;
}
.quote footer{ display:flex; align-items:center; gap:14px; }
.quote__av{
  display:grid; place-items:center;
  width:46px; height:46px; flex:none;
  border-radius:50%;
  background:linear-gradient(140deg, var(--bosc), var(--oliva));
  color:var(--ocre-2);
  font-family:var(--display); font-size:1.15rem; line-height:1;
  user-select:none;
}
.quote footer b{ display:block; font-size:.92rem; font-weight:400; color:var(--ink); }
.quote footer em{
  display:block; font-style:normal;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--pedra);
}
@media (max-width:1040px){ .quote{ flex-basis:calc((100% - clamp(18px,2.4vw,30px)) / 2); } }
@media (max-width:680px){ .quote{ flex-basis:100%; } }

.slider__ui{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:clamp(26px,3vw,40px);
}
.slider__dots{ display:flex; gap:8px; }
.dot{
  width:26px; height:2px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 18%, transparent);
  transition:background .4s, width .5s var(--e-out);
}
.dot.is-active{ background:var(--coure); width:44px; }
.slider__arrows{ display:flex; gap:10px; }
.arrow{
  display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  color:var(--ink);
  transition:background .45s var(--e-out), color .45s, border-color .45s, transform .45s var(--e-out);
}
.arrow svg{ width:20px; height:20px; }
.arrow:hover{ background:var(--ink); color:var(--crema); border-color:var(--ink); }
.arrow:disabled{ opacity:.3; pointer-events:none; }

/* --- 8.8 Reserva --------------------------------------------------------- */
.reserva__grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(32px,4.6vw,76px);
  align-items:start;
}
@media (max-width:920px){ .reserva__grid{ grid-template-columns:1fr; } }

.info{ display:flex; flex-direction:column; gap:clamp(26px,3vw,38px); }
.info__block h3{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ocre); font-weight:400; margin-bottom:12px;
}
.info__block p{ font-size:1.05rem; line-height:1.6; }
.info__block .link-arrow{ margin-top:12px; }

.hours{ display:flex; flex-direction:column; gap:9px; }
.hours > div{
  display:flex; align-items:baseline; gap:12px;
  padding-bottom:9px;
  border-bottom:1px solid color-mix(in srgb, var(--crema) 12%, transparent);
}
.hours dt{
  flex:none; min-width:150px;
  font-size:.8rem; letter-spacing:.09em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 60%, transparent);
}
.hours dd{ font-size:.98rem; color:var(--crema); }

.info__big{
  display:block;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.9rem,3.4vw,2.5rem); line-height:1.1;
  color:var(--crema);
  transition:color .4s;
}
.info__big:hover{ color:var(--ocre-2); }
.info__mail{
  display:inline-block; margin-top:6px;
  font-size:.95rem; color:color-mix(in srgb, var(--crema) 68%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--ocre) 50%, transparent);
  padding-bottom:2px;
}
.info__mail:hover{ color:var(--ocre-2); }
.info__social{ display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; }
.info__social a{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 60%, transparent);
  transition:color .35s;
}
.info__social a:hover{ color:var(--ocre); }

.map{ position:relative; margin-top:6px; }
.map .ph, .map iframe{ border-radius:var(--r-lg); width:100%; }
.map iframe{ aspect-ratio:16/10; border:0; filter:grayscale(.4) sepia(.18) contrast(1.05); display:block; }
.map__link{
  position:absolute; right:12px; bottom:12px; z-index:2;
  padding:9px 16px; border-radius:100px;
  background:var(--crema); color:var(--ink);
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  transition:background .4s, color .4s;
}
.map__link:hover{ background:var(--ocre); }

.form-card{
  background:var(--crema); color:var(--ink);
  padding:clamp(26px,3.4vw,52px);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.75);
}
.form-card__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.15rem); line-height:1.1;
  letter-spacing:-.02em; margin-bottom:8px;
}
.form-card__sub{ font-size:.92rem; margin-bottom:clamp(22px,2.6vw,32px); color:var(--pedra) !important; }

form{ display:flex; flex-direction:column; gap:16px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.f-row--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:560px){ .f-row, .f-row--3{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 62%, transparent);
}
.field > span i{ font-style:normal; text-transform:none; letter-spacing:.02em; color:var(--pedra); }
.field input, .field select, .field textarea{
  width:100%;
  padding:13px 14px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius:var(--r);
  font-size:.95rem; font-weight:300;
  transition:border-color .35s, box-shadow .35s, background .35s;
}
.field textarea{ resize:vertical; min-height:88px; }
.field select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--pedra) 50%),
                   linear-gradient(135deg,var(--pedra) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--coure);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--coure) 16%, transparent);
}
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color:#B3382F; background:#FDF4F3;
}

.check{ display:flex; gap:11px; align-items:flex-start; margin-top:2px; }
.check input{ margin-top:5px; accent-color:var(--coure); width:16px; height:16px; flex:none; }
.check span{ font-size:.82rem; line-height:1.55; color:var(--pedra); }
.check a{ color:var(--coure); border-bottom:1px solid currentColor; }
.check.has-error span{ color:#B3382F; }

.form-card__alt{ text-align:center; font-size:.84rem; color:var(--pedra) !important; }
.form-card__alt a{ color:var(--coure); border-bottom:1px solid color-mix(in srgb,var(--coure) 40%, transparent); }

.form-msg{ font-size:.88rem; text-align:center; min-height:1px; }
.form-msg.is-ok{ color:#2F6B4F !important; }
.form-msg.is-err{ color:#B3382F !important; }

.portals{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:20px; padding-top:20px;
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.portals span{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pedra); }
.portals a{
  font-size:.72rem; letter-spacing:.1em;
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:100px; padding:7px 15px;
  transition:background .4s, color .4s, border-color .4s;
}
.portals a:hover{ background:var(--ink); color:var(--crema); border-color:var(--ink); }

/* --- 8.9 Footer ---------------------------------------------------------- */
.footer{
  background:var(--ink); color:var(--crema);
  padding-block:clamp(46px,5vw,72px);
  border-top:1px solid color-mix(in srgb, var(--crema) 10%, transparent);
}
.footer__in{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(24px,4vw,50px); align-items:center;
}
@media (max-width:880px){
  .footer__in{ grid-template-columns:1fr; text-align:center; justify-items:center; }
}
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand p{
  font-family:var(--display); font-size:1.3rem; line-height:1.2;
  color:var(--crema) !important;
}
.footer__brand em{
  display:block; font-family:var(--sans); font-style:normal;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 45%, transparent);
}
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; }
.footer__nav a{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--crema) 62%, transparent);
  transition:color .35s;
}
.footer__nav a:hover{ color:var(--ocre); }
.footer__legal{ text-align:right; }
@media (max-width:880px){ .footer__legal{ text-align:center; } }
.footer__legal p{
  font-size:.72rem; letter-spacing:.05em;
  color:color-mix(in srgb, var(--crema) 42%, transparent) !important;
}
.footer__legal a:hover{ color:var(--ocre); }

.cta-fixed{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:900;
  display:none; align-items:center; justify-content:center;
  padding:15px;
  background:var(--ocre); color:var(--ink);
  border-radius:100px;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5);
  transform:translateY(140%);
  transition:transform .6s var(--e-out);
}
.cta-fixed.is-visible{ transform:translateY(0); }
@media (max-width:720px){ .cta-fixed{ display:flex; } }

/* ==========================================================================
   9 · ANIMACIONS DE SCROLL
   ========================================================================== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--e-out), transform 1s var(--e-out);
  transition-delay:calc(var(--d, 0) * 110ms);
}
.reveal.is-in{ opacity:1; transform:none; }

.word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.word > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  transition:transform 1.05s var(--e-out);
  transition-delay:calc(var(--wd, 0) * 55ms);
}
[data-split].is-in .word > i{ transform:translateY(0); }

/* ==========================================================================
   10 · RESPONSIVE
   ========================================================================== */
@media (max-width:1040px){
  .casa{ grid-template-columns:1fr; gap:26px; }
  .casa:nth-child(even) .casa__media{ order:0; }
  .casa:nth-child(even) .casa__n{ left:-.12em; right:auto; }
  .casa__n{ font-size:clamp(3.6rem,13vw,5.6rem); }
  .sencer{ grid-template-columns:1fr; text-align:left; }
  .sencer__cta{ align-items:flex-start; }
  .sencer__price em{ text-align:left; }
}
@media (max-width:960px){
  /* En una sola columna cal deixar anar la fila fixada: si no, text i fotos
     es col·locarien tots dos a la fila 1 i quedarien un damunt de l'altre. */
  .historia__txt, .historia__media,
  .historia--flip .historia__txt, .historia--flip .historia__media{
    grid-column:1 / -1; grid-row:auto;
  }
  .historia__media{ padding-bottom:18%; }
  .historia__media--small{ right:0; width:46%; }
}
@media (max-width:820px){
  .acts{ grid-template-columns:1fr; }
  .casa__feats{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .seal{ width:74px; height:74px; top:-16px; left:-8px; }
  .seal em{ font-size:1.1rem; }
  .signature__av{ width:54px; height:54px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .word > i{ transform:none; }
  .hero__media .ph{ animation:none; }
}

/* =====================================================================
   AFEGITS DEL 21/08/2026
   Formulari a prova de fallades, mapa que no crida ningu sol,
   i les tres pagines legals.
   ===================================================================== */

/* --- Cassam de spam: invisible per a les persones, visible per als robots --- */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Sortida de socors si el mobil bloqueja la finestra del WhatsApp --- */
.form-fallback{ margin:.7rem 0 0; text-align:center; }
.form-fallback[hidden]{ display:none; }
.form-fallback a{
  display:inline-block; padding:.72rem 1.35rem; border-radius:100px;
  background:#25D366; color:#072714; font-weight:500; text-decoration:none;
  font-size:.95rem; letter-spacing:.01em;
}
.form-fallback a:hover,
.form-fallback a:focus-visible{ background:#1FBE5A; }

/* --- Mapa que no es carrega fins que algu el demana -------------------
   Abans l'iframe cridava OpenStreetMap tot sol en obrir la pagina.
   Aixi la web no demana res a ningu fins que el visitant ho decideix. --- */
.map-consent{
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.85rem; text-align:center; padding:1.5rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(133,125,108,.09) 14px 15px),
    var(--ink-3);
  color:var(--crema);
  border:1px solid color-mix(in srgb, var(--crema) 14%, transparent);
}
.map-consent__txt{
  font-family:var(--sans); font-weight:300; font-size:.92rem; line-height:1.55;
  max-width:30ch; color:var(--crema-3); margin:0;
}
.map-consent__btn{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 20px; border-radius:100px; border:0; cursor:pointer;
  background:var(--ocre); color:var(--ink); transition:background .35s;
}
.map-consent__btn:hover,
.map-consent__btn:focus-visible{ background:var(--ocre-2); }

/* =====================================================================
   Pagines legals · una columna estreta i lletra gran, per llegir-les
   ===================================================================== */
.legal-top{
  background:var(--ink); color:var(--crema);
  padding:1.1rem var(--gut); position:sticky; top:0; z-index:50;
}
.legal-top__in{
  max-width:var(--wrap); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.legal-top a{ color:var(--crema); text-decoration:none; }
.legal-back{
  font-family:var(--sans); font-size:.9rem; color:var(--ocre-2);
  border-bottom:1px solid color-mix(in srgb, var(--ocre) 40%, transparent);
  padding-bottom:2px; white-space:nowrap;
}
.legal-back:hover{ color:var(--crema); }

.legal{
  max-width:44rem; margin:0 auto;
  padding:clamp(2.5rem,6vw,4.5rem) var(--gut) 4rem;
  font-family:var(--sans); font-weight:300; font-size:1.03rem; line-height:1.75;
  color:var(--ink-2);
}
.legal h1{
  font-family:var(--display); font-weight:400; line-height:1.1;
  font-size:clamp(2rem,5vw,2.9rem); margin:0 0 .4rem; color:var(--ink);
}
.legal .legal-date{
  font-size:.86rem; color:var(--pedra); letter-spacing:.04em; text-transform:uppercase;
  margin:0 0 2.4rem;
}
.legal h2{
  font-family:var(--display); font-weight:400; font-size:1.42rem; line-height:1.25;
  margin:2.6rem 0 .7rem; color:var(--ink);
  padding-top:1.4rem; border-top:1px solid var(--crema-3);
}
.legal h3{ font-family:var(--sans); font-weight:500; font-size:1.02rem; margin:1.5rem 0 .3rem; }
.legal p{ margin:0 0 1rem; }
.legal ul{ margin:0 0 1.2rem; padding-left:1.1rem; }
.legal li{ margin:0 0 .45rem; }
.legal a{ color:var(--coure); text-underline-offset:3px; }
.legal strong{ font-weight:500; }
.legal table{
  width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.95rem;
  table-layout:fixed;   /* si no, una cel·la llarga eixampla la pagina al mobil */
}
.legal th,.legal td{
  text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--crema-3);
  vertical-align:top; overflow-wrap:anywhere;
}
.legal th{ font-weight:500; color:var(--ink); }

/* Els buits que s'han d'omplir amb les dades reals del client.
   Es veuen d'un tret perque no se n'escapi cap. */
.omplir{
  background:#F7E3BC; color:#5E4310; font-weight:500;
  padding:.05em .4em; border-radius:2px; overflow-wrap:anywhere;
}

/* Avis de dalt de tot: aixo es una mostra, no un negoci de veritat. */
.legal-nota{
  background:var(--crema-2); border-left:3px solid var(--coure);
  padding:1rem 1.2rem; margin:0 0 2.2rem; font-size:.95rem; line-height:1.6;
}
.legal-nota b{ font-weight:500; color:var(--coure); }

@media (max-width:640px){
  .legal{ font-size:1rem; }
  .legal-top__in{ gap:.6rem; }
}

/* Enllacos de mostra que encara no van enlloc (Instagram, Booking, Airbnb):
   sense href no salten a dalt de tot, pero es veuen igual. */
.info__social a:not([href]),
.portals a:not([href]){ cursor:default; }


/* =====================================================================
   Llista de productes amb pes i preu. Ve del patro de la carta del
   Sobretaula: es llegeix sense fer pinca al mobil i es canvia en dos
   minuts quan pugen els preus.
   ===================================================================== */


/* =================================================================
   CARTA SENCERA
   ================================================================= */
.prod-full{
  margin-top:clamp(56px,7vw,104px);
  padding-top:clamp(46px,5.5vw,80px);
  border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.prod-full__head{ max-width:62ch; margin-bottom:clamp(36px,4.5vw,60px); }
.prod-full__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1.12;
  letter-spacing:-.02em; color:var(--ink); margin-bottom:14px;
}
.prod-full__intro{ font-size:.98rem; line-height:1.75; }
.prod-legend{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  margin-top:18px;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 62%, transparent);
}
.prod-legend b{ color:var(--coure-2); font-weight:400; margin-right:5px; }

.prod-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(34px,4.5vw,72px) clamp(34px,5vw,84px);
}
.prod-cols--tight{ margin-top:clamp(34px,4.5vw,64px); }

.prod-block__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.12rem,1.6vw,1.36rem); color:var(--coure);
  padding-bottom:12px; margin-bottom:22px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.prod-block__note{
  font-size:.78rem; letter-spacing:.04em;
  color:color-mix(in srgb, var(--ink) 58%, transparent);
  margin:-12px 0 20px;
}
.prod-list{ list-style:none; margin:0; padding:0; }
.prod-item + .prod-item{ margin-top:20px; }
.prod-list--compact .prod-item + .prod-item{ margin-top:13px; }

.prod-item__line{
  display:flex; align-items:baseline; gap:10px; margin:0;
}
.prod-item__name{
  flex:0 1 auto;
  font-family:var(--display); font-weight:400;
  font-size:1.02rem; line-height:1.35; color:var(--ink);
}
.prod-item__price{
  flex:none;
  font-family:var(--display); font-weight:400; font-size:1rem;
  color:var(--coure-2); white-space:nowrap;
}
.prod-item__desc{
  margin:5px 0 0;
  font-size:.86rem; line-height:1.6;
  color:color-mix(in srgb, var(--ink) 66%, transparent);
  max-width:44ch;
}
.prod-tag{
  display:inline-block; margin-left:7px;
  font-style:normal; font-family:var(--sans);
  font-size:.6rem; letter-spacing:.12em;
  color:var(--coure-2);
  border:1px solid color-mix(in srgb, var(--coure-2) 40%, transparent);
  border-radius:2px; padding:1px 5px; vertical-align:middle;
}

/* --- menú del dia --- */
.prod-dia{
  margin-top:clamp(44px,5.5vw,80px);
  padding:clamp(26px,3.4vw,44px);
  background:color-mix(in srgb, var(--crema-2) 62%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius:var(--r);
}
.prod-dia__head{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:8px 20px;
}
.prod-dia__head h4{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.8rem); color:var(--ink);
}
.prod-dia__price{
  font-family:var(--display); font-size:clamp(1.3rem,2.2vw,1.8rem);
  color:var(--coure-2);
}
.prod-dia__when{
  margin-top:6px;
  font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 58%, transparent);
}
.prod-dia__list{
  margin:22px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 30px;
}
.prod-dia__list li{
  position:relative; padding-left:18px;
  font-size:.95rem; line-height:1.6;
}
.prod-dia__list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:1px; background:var(--coure-2);
}
.prod-dia__foot{
  margin-top:20px; font-size:.86rem; line-height:1.65;
  color:color-mix(in srgb, var(--ink) 66%, transparent);
}

.prod-full__legal{
  margin-top:clamp(34px,4vw,56px);
  font-size:.8rem; line-height:1.7;
  color:color-mix(in srgb, var(--ink) 55%, transparent);
  max-width:70ch;
}

@media (max-width: 860px){
  .prod-cols{ grid-template-columns:1fr; }
  .prod-dia__list{ grid-template-columns:1fr; }
  .prod-item__name{ font-size:1.06rem; }
  .prod-item__desc{ font-size:.9rem; max-width:none; }
}


/* ---------------------------------------------------------------
   Formulari · cassam de spam i sortida de socors
   --------------------------------------------------------------- */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}


/* Els tres lots de Nadal, un al costat de l'altre. */
.valores__grid--lots{ align-items:start; }
.valores__grid--lots .prod-dia{ margin:0; height:100%; }
@media (max-width:900px){
  .valores__grid--lots{ grid-template-columns:1fr; }
}


/* Quan la columna de text es molt mes curta que la de la foto, centrar-la deixa
   un forat gran sota del titol. Amb aixo el text comenca a dalt, a l'alcada de
   la foto. */
.historia__grid--dalt{ align-items:start; }