/* ==========================================================================
   NOIR SOUND — styles.css (v3 · redisseny visual 2026-10)
   Mateix ADN: Paper · Espresso · Bronze · Ink · Graphite.
   Tipografia: Bodoni Moda (display, cursiva d'accent) · Fredoka (titulars)
               · Archivo (interfície i text).
   Ritme:      paper càlid amb trams foscos d'espresso que fan de "capítols"
               (hero, vídeos, estils, tancament) i un tram tintat (qui som).
   Moviment:   només transform/opacity; tot queda inert amb
               prefers-reduced-motion. La classe .motion (posada al <head>)
               activa les revelacions; sense JS tot és visible.
   NOTA: admin.html / leads.html / tasks.html també carreguen aquest fitxer
   (botons, camps, xips) — mantenir aquests components genèrics.
   ========================================================================== */

:root{
  /* Paleta base (no canviar sense motiu de marca) */
  --paper: #FBF6EF;
  --paper-raised: #FFFFFF;
  --paper-deep: #F4ECE1;          /* tram tintat, per donar ritme */
  --espresso: #241C16;
  --espresso-deep: #1A140F;       /* fons de profunditat dins els trams foscos */
  --espresso-raised: #2F241C;
  --bronze: #B08654;
  --bronze-deep: #8A6339;
  --bronze-light: #D2AC7C;        /* accent sobre espresso (contrast AA) */
  --bronze-tint: #F3E7D6;
  --ink: #2A211A;
  --graphite: #6B6156;
  --mist: #756B5F;
  --line: #E8DFD2;
  --line-strong: #D9CCBA;
  --line-on-espresso: #3A2F26;
  --text-on-espresso: #F6EFE5;
  --muted-on-espresso: #C9BCA9;
  --ok: #2F7A4B;

  --radius-s: 6px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --max-w: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --shadow-s: 0 1px 2px rgba(36,28,22,.05), 0 4px 14px -6px rgba(36,28,22,.10);
  --shadow-m: 0 18px 40px -22px rgba(36,28,22,.35);
  --shadow-l: 0 40px 80px -36px rgba(36,28,22,.50);
  --glow-bronze: 0 14px 34px -14px rgba(176,134,84,.75);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);

  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-heading: "Fredoka", "Archivo", sans-serif;
  --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--graphite);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4{ font-family: var(--font-heading); font-style: normal; font-weight: 600; color: var(--ink); margin: 0 0 .4em; letter-spacing: -.015em; line-height: 1.15; }
p{ margin: 0 0 1em; max-width: 62ch; }
a{ color: inherit; }
img, video{ max-width: 100%; }
::selection{ background: var(--bronze); color: var(--espresso); }
.hidden{ display:none !important; }
[hidden]{ display:none !important; }
:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  html{ scroll-behavior: auto; }
}

/* Cursiva d'accent dins de titulars: Bodoni Moda, el gest "de marca" */
.hero-title em, .section-title em{
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  letter-spacing: -.01em; color: var(--bronze-deep); padding-right: .04em;
}

/* Icones del sprite */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.icon{ width: 1.2em; height: 1.2em; flex-shrink: 0; display:inline-block; vertical-align: middle; }

/* Gra fotogràfic subtil als trams foscos (SVG inline, ~0 KB) */
.grain{
  position:absolute; inset:0; pointer-events:none; z-index: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- eyebrow (etiqueta de secció) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap: 12px; margin: 0 0 18px;
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bronze-deep);
}
.eyebrow::before{ content:""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--light{ color: var(--bronze-light); }

/* Ornament: filet amb rombe, separador elegant */
.ornament{ display:block; position:relative; width: 120px; height: 9px; margin: 0 auto 28px; }
.ornament::before{ content:""; position:absolute; left:0; right:0; top:4px; height:1px; background: linear-gradient(90deg, transparent, var(--bronze), transparent); }
.ornament::after{ content:""; position:absolute; left:50%; top:0; width:9px; height:9px; background: var(--paper); border: 1px solid var(--bronze); transform: translateX(-50%) rotate(45deg); }
.ornament--light::after{ background: var(--espresso); border-color: var(--bronze-light); }

/* ---------- top bar ---------- */
.top-bar{
  position: relative; z-index: 31;
  background: var(--espresso-deep); color: var(--muted-on-espresso);
  display:flex; justify-content:center; align-items:center; flex-wrap: wrap; gap: 6px 22px;
  font-size: .78rem; letter-spacing: .02em; padding: 9px var(--gutter);
}
.top-bar-links{ display:inline-flex; gap: 18px; flex-wrap: wrap; justify-content:center; }
.top-bar a{ color: var(--bronze-light); text-decoration:none; font-weight: 600; transition: color .2s ease; }
.top-bar a:hover{ color: var(--text-on-espresso); }
@media (max-width: 720px){ .top-bar-claim{ display:none; } .top-bar{ font-size: .74rem; padding-top: 8px; padding-bottom: 8px; } }
@media (max-width: 420px){ .top-bar-links a[href*='instagram']{ display:none; } }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 30;
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  padding: 16px var(--gutter);
  background: rgba(251,246,239,.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{ background: rgba(251,246,239,.94); border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(36,28,22,.5); }
.logo{ font-family: var(--font-display); font-size: 1.45rem; font-style: italic; font-weight: 500; color: var(--ink); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.site-nav{ display:flex; gap: clamp(16px, 2.2vw, 30px); }
.site-nav a{ position: relative; color: var(--graphite); text-decoration:none; font-size: .9rem; font-weight: 500; padding: 6px 0; white-space: nowrap; transition: color .25s ease; }
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom: 0; height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.site-nav a:hover, .site-nav a.is-active{ color: var(--ink); }
.site-nav a:hover::after, .site-nav a.is-active::after{ transform: scaleX(1); transform-origin: left; }
.header-actions{ display:flex; align-items:center; gap: 12px; }

/* ---------- selector d'idioma (CA · ES · EN) ----------
   Mateix llenguatge que el botó hamburguesa: càpsula de filet fi, tipografia
   d'interfície en versaletes espaiades, i un punt de bronze sota l'idioma
   actiu (el mateix gest que el subratllat de bronze de la navegació). */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0; }
.lang-switch{
  display:inline-flex; align-items:stretch; flex-shrink: 0;
  height: 44px; padding: 0 5px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent;
  transition: border-color .25s ease, background .25s ease;
}
.lang-switch:hover{ border-color: var(--bronze); }
.lang-switch-btn{
  position: relative; appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0; cursor: pointer;
  min-width: 34px; padding: 0 7px;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .14em; line-height: 1;
  color: var(--mist); transition: color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch-btn + .lang-switch-btn::before{ /* filet separador */
  content:""; position:absolute; left: 0; top: 50%; width: 1px; height: 12px; background: var(--line-strong); transform: translateY(-50%);
}
.lang-switch-btn > span[aria-hidden]{ position: relative; display:inline-block; padding-left: .14em; /* compensa l'espaiat final */ }
.lang-switch-btn > span[aria-hidden]::after{
  content:""; position:absolute; left: 50%; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--bronze); transform: translateX(-50%) scale(0); transition: transform .45s var(--ease);
}
.lang-switch-btn:hover{ color: var(--ink); }
.lang-switch-btn.is-active{ color: var(--ink); cursor: default; }
.lang-switch-btn.is-active > span[aria-hidden]::after{ transform: translateX(-50%) scale(1); }
.lang-switch-btn:focus-visible{ outline: 2px solid var(--bronze); outline-offset: -4px; border-radius: 999px; }
/* Variant per a les pantalles del qüestionari/resum/confirmació (sense capçalera) */
.lang-switch--app{
  display:none; position: fixed; top: 20px; right: var(--gutter); z-index: 31;
  height: 42px; background: var(--paper-raised);
}
body:has(#screen-landing.hidden) .lang-switch--app{ display:inline-flex; }
body:has(#screen-form:not(.hidden)) .lang-switch--app{ right: calc(var(--gutter) + 54px); }
/* Abans que i18n.js tradueixi la pàgina (només si l'idioma no és el català):
   s'evita veure el català uns mil·lisegons. Xarxa de seguretat al <head>. */
.i18n-pending body{ visibility: hidden; }

/* ---------- menú mòbil (hamburguesa) ---------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line-strong); cursor:pointer; padding: 0;
  transition: border-color .2s ease, background .2s ease;
}
.nav-toggle:hover{ border-color: var(--ink); }
.nav-toggle-bars{ position:relative; width: 18px; height: 12px; display:block; }
.nav-toggle-bars span{
  position:absolute; left:0; right:0; height:1.5px; background: var(--ink);
  border-radius: 2px; transition: transform .35s var(--ease), opacity .25s ease, top .35s var(--ease);
}
.nav-toggle-bars span:nth-child(1){ top:0; }
.nav-toggle-bars span:nth-child(2){ top:5.25px; right: 5px; }
.nav-toggle-bars span:nth-child(3){ top:10.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ top:5.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ top:5.25px; transform: rotate(-45deg); }

.site-nav-mobile{
  position:fixed; top:0; right:0; bottom:0; z-index: 40;
  width: min(360px, 88vw); background: var(--paper);
  box-shadow: -24px 0 60px -20px rgba(36,28,22,.35);
  padding: 96px 30px 32px; display:flex; flex-direction:column; gap: 2px;
  transform: translateX(100%); transition: transform .55s var(--ease);
  overflow-y:auto; visibility: hidden;
}
.site-nav-mobile[data-open="true"]{ transform: translateX(0); visibility: visible; }
.site-nav-mobile a:not(.btn){
  color: var(--ink); text-decoration:none; font-family: var(--font-heading); font-weight:600;
  font-size: 1.35rem; padding: 14px 2px; border-bottom: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  opacity: 0; transform: translateX(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .2s ease;
}
.site-nav-mobile a:not(.btn)::after{ content:"→"; font-family: var(--font-ui); color: var(--bronze); font-size: 1rem; }
.site-nav-mobile[data-open="true"] a{ opacity: 1; transform: none; }
.site-nav-mobile[data-open="true"] a:nth-child(1){ transition-delay: .08s; }
.site-nav-mobile[data-open="true"] a:nth-child(2){ transition-delay: .12s; }
.site-nav-mobile[data-open="true"] a:nth-child(3){ transition-delay: .16s; }
.site-nav-mobile[data-open="true"] a:nth-child(4){ transition-delay: .20s; }
.site-nav-mobile[data-open="true"] a:nth-child(5){ transition-delay: .24s; }
.site-nav-mobile[data-open="true"] a:nth-child(6){ transition-delay: .28s; }
.site-nav-mobile a:not(.btn):hover, .site-nav-mobile a:not(.btn):focus-visible{ color: var(--bronze-deep); }
.nav-mobile-cta{ margin-top: 28px; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease) .32s, transform .5s var(--ease) .32s; }
.site-nav-mobile[data-open="true"] .nav-mobile-cta{ opacity:1; transform:none; }
.nav-backdrop{
  display:block; position:fixed; inset:0; z-index: 39;
  background: rgba(26,20,15,.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.nav-backdrop[data-open="true"]{ opacity: 1; pointer-events: auto; }
/* Amb el menú obert, la capçalera queda per sobre del panell: el botó ✕ sempre és accessible */
body:has(.site-nav-mobile[data-open="true"]) .site-header{ z-index: 45; background: var(--paper); }

/* Capçalera i idiomes: els enllaços i el botó mai es parteixen en dues
   línies. Amb el selector d'idioma i els textos més llargs (sobretot en
   català), la navegació completa només hi cap a partir de ~1240px: per sota,
   "La plataforma" surt de la capçalera (segueix a la barra superior, al peu i
   al menú mòbil) i, per sota de 1100px, passa a l'hamburguesa. */
@media (max-width: 1240px){ .site-nav a[href="plataforma/index.html"]{ display:none; } }
@media (max-width: 1100px){
  .site-nav{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 520px){ .btn-header{ display:none !important; } }
@media (min-width: 1101px){
  .site-nav-mobile, .nav-backdrop{ display:none !important; }
}

/* ==========================================================================
   BOTONS — estats normal / hover / active / focus / disabled
   ========================================================================== */
.btn{
  position: relative; display:inline-flex; align-items:center; justify-content:center; gap: .6em;
  font-family: var(--font-ui); font-weight: 600; font-size: .92rem; letter-spacing: .01em; line-height: 1.2;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  padding: 14px 26px; cursor: pointer; text-decoration: none; text-align: center;
  overflow: hidden; isolation: isolate;
  transition: transform .4s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .4s var(--ease), opacity .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0) scale(.97); transition-duration: .12s; }
.btn:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"]{ opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary{
  background: var(--bronze); color: var(--espresso);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -14px rgba(138,99,57,.9);
}
/* Reflex de llum que creua el botó en passar-hi per sobre */
.btn-primary::before{
  content:""; position:absolute; inset: 0; z-index:-1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform: translateX(-120%); transition: transform .9s var(--ease);
}
.btn-primary:hover{ background: var(--bronze-deep); color: var(--text-on-espresso); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--glow-bronze); }
.btn-primary:hover::before{ transform: translateX(120%); }
.btn-cta .btn-icon{ width: 1.1em; height: 1.1em; transition: transform .45s var(--ease); }
.btn-cta:hover .btn-icon{ transform: translateX(4px); }
.btn-header{ padding: 11px 20px; font-size: .84rem; white-space: nowrap; }
.btn-lg{ padding: 17px 32px; font-size: 1rem; }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover{ border-color: var(--ink); background: var(--paper-raised); box-shadow: var(--shadow-s); }
.btn-outline-light{ background: transparent; color: var(--text-on-espresso); border: 1px solid rgba(246,239,229,.28); }
.btn-outline-light:hover{ border-color: var(--text-on-espresso); background: rgba(246,239,229,.07); }
.btn-whatsapp{ background: #25D366; color: #06210F; font-weight: 700; padding: 14px 24px; margin-bottom: 6px; box-shadow: 0 10px 24px -16px rgba(37,211,102,.9); }
.btn-whatsapp.btn-lg{ padding: 17px 30px; }
.btn-whatsapp:hover{ background: #1EBE5A; color: #06210F; }
.btn-icon-left .icon{ color: var(--bronze-deep); transition: transform .45s var(--ease); }
.btn-icon-left:hover .icon{ transform: rotate(-8deg) scale(1.08); }
.link-quiet{ color: var(--graphite); text-decoration: none; border-bottom: 1px solid var(--line); align-self:center; font-size: .92rem; padding-bottom: 2px; transition: border-color .2s ease; }
.link-quiet:hover{ border-color: var(--ink); }

/* ==========================================================================
   HERO — primer impacte
   ========================================================================== */
.hero{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--espresso); color: var(--text-on-espresso);
  min-height: min(calc(100svh - 110px), 920px);
  display:flex; align-items:center;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(80px, 11vh, 120px);
}
.hero-field{
  position:absolute; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 22% 28%, rgba(176,134,84,.26), transparent 62%),
    radial-gradient(ellipse 45% 55% at 82% 62%, rgba(210,172,124,.14), transparent 62%),
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(0,0,0,.45), transparent 70%);
}
.hero-inner{
  position: relative; z-index: 1; width: 100%; max-width: var(--max-w); margin: 0 auto;
  display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items:center;
}
.hero-content{ position: relative; max-width: 640px; will-change: transform, opacity; }
.hero-eyebrow{
  display:flex; align-items:center; gap: 14px; margin-bottom: 26px;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-light);
  max-width: none; /* el límit global de 62ch, amb versaletes espaiades, el partia en dues línies */
}
.eyebrow-line{ width: 40px; height: 1px; background: currentColor; display:inline-block; flex-shrink: 0; }
.hero-title{
  color: var(--text-on-espresso); font-weight: 500;
  font-size: clamp(2.7rem, 5.9vw, 5.1rem); line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: .42em; max-width: 13ch; text-wrap: balance;
}
.hero-title em{ color: var(--bronze-light); font-size: 1.06em; }
.hero-sub{ max-width: 50ch; font-size: clamp(1.02rem, 1.3vw, 1.14rem); color: #DCD1C1; line-height: 1.7; }
.hero-actions{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-trust{
  display:flex; flex-wrap: wrap; gap: 6px 0; margin-top: 22px; font-size: .84rem; color: var(--muted-on-espresso); letter-spacing: .01em; max-width: none;
}
.hero-trust span{ display:inline-flex; align-items:center; }
.hero-trust span + span::before{ content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); margin: 0 12px; opacity: .8; }

/* Composició visual: arc amb les fotos reals dels DJs */
.hero-visual{ position: relative; justify-self: center; width: 100%; max-width: 440px; will-change: transform; }
.hero-arch{ position: relative; margin: 0; }
.hero-arch::before{ /* marc fi desplaçat: profunditat sense pes */
  content:""; position:absolute; inset: -16px -16px 16px 16px; border: 1px solid rgba(210,172,124,.38);
  border-radius: 999px 999px 30px 30px; pointer-events:none;
}
.hero-arch-frame{
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  border-radius: 999px 999px 28px 28px; background: var(--espresso-raised);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.8);
}
.hero-arch-frame::after{
  content:""; position:absolute; inset:0; z-index: 2; pointer-events:none;
  background: linear-gradient(180deg, transparent 55%, rgba(26,20,15,.82) 100%);
}
.hero-arch-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover; object-position: 50% 30%;
  opacity: 0; transition: opacity 1.4s var(--ease-in-out);
}
.hero-arch-img.is-active{ opacity: 1; z-index: 1; }
.hero-arch-caption{
  position:absolute; left: 0; right: 0; bottom: 26px; z-index: 3; text-align:center;
  display:flex; flex-direction:column; gap: 2px; pointer-events: none;
}
.hero-arch-kicker{ font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-light); font-weight: 600; }
.hero-arch-name{ font-family: var(--font-display); font-style: italic; font-size: 1.55rem; color: var(--text-on-espresso); transition: opacity .5s ease, transform .5s var(--ease); }
.hero-arch-name.is-changing{ opacity: 0; transform: translateY(6px); }
.hero-badge{
  position:absolute; left: -52px; top: 34%; z-index: 4;
  display:flex; align-items:center; gap: 12px;
  background: rgba(251,246,239,.96); color: var(--ink);
  padding: 10px 18px 10px 10px; border-radius: var(--radius-pill);
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
  font-size: .82rem; line-height: 1.3; white-space: nowrap;
}
.hero-badge-faces{ display:flex; flex-shrink: 0; }
.hero-badge-faces:empty{ display:none; }
.hero-badge-faces img{
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper);
  margin-left: -10px; background: var(--bronze-tint);
}
.hero-badge-faces img:first-child{ margin-left: 0; }
.hero-badge-text strong{ font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--bronze-deep); margin-right: 2px; }
.hero-scroll{
  position:absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  display:flex; flex-direction:column; align-items:center; gap: 8px;
  color: var(--muted-on-espresso); text-decoration:none; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
}
.hero-scroll-line{ width: 1px; height: 38px; background: linear-gradient(var(--bronze-light), transparent); transform-origin: top; }
.hero-scroll:hover{ color: var(--text-on-espresso); }

/* Hero en mòbil/tauleta: les fotos passen a ser el fons a pantalla completa */
@media (max-width: 860px){
  .hero{ min-height: calc(100svh - 72px); align-items: flex-end; padding-top: 120px; padding-bottom: 48px; }
  .hero-inner{ display:block; position: static; }
  .hero-content{ z-index: 2; }
  .hero-visual{ position:absolute; inset: 0; max-width: none; z-index: 0; }
  .hero-arch{ position:absolute; inset:0; }
  .hero-arch::before{ display:none; }
  .hero-arch-frame{ position:absolute; inset:0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .hero-arch-frame::after{ background: linear-gradient(180deg, rgba(26,20,15,.35) 0%, rgba(36,28,22,.72) 42%, var(--espresso) 82%); }
  .hero-arch-img{ object-position: 50% 20%; }
  .hero-arch-caption{ top: 24px; bottom: auto; left: auto; right: var(--gutter); text-align: right; }
  .hero-arch-name{ font-size: 1.05rem; }
  .hero-arch-kicker{ font-size: .6rem; }
  .hero-badge{ position: relative; left: auto; bottom: auto; display:inline-flex; margin-top: 22px; z-index: 2; }
  .hero-visual .hero-badge{ position:absolute; left: var(--gutter); top: 22px; bottom: auto; padding: 6px 14px 6px 6px; font-size: .74rem; white-space: normal; max-width: 210px; }
  .hero-badge-faces img{ width: 26px; height: 26px; }
  .hero-scroll{ display:none; }
  .hero-sub{ font-size: 1rem; }
}
@media (max-width: 520px){
  .hero-actions .btn{ width: 100%; }
  .hero-eyebrow{ font-size: .66rem; letter-spacing: .16em; margin-bottom: 18px; }
  .eyebrow-line{ width: 24px; }
}

/* ==========================================================================
   ESTRUCTURA DE SECCIONS
   ========================================================================== */
.section{ position: relative; padding: clamp(64px, 9vw, 128px) var(--gutter); max-width: var(--max-w); margin: 0 auto; }
.section-title{ font-size: clamp(2rem, 4.2vw, 3.15rem); line-height: 1.06; letter-spacing: -.025em; margin-bottom: .45em; text-wrap: balance; }
.section-intro{ color: var(--graphite); max-width: 60ch; font-size: 1.04rem; line-height: 1.7; margin-bottom: 2.2em; }
.section-intro--light{ color: var(--mist); }
.section-head{ margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .section-intro{ margin-bottom: 0; }
.section-head--center{ text-align:center; }
.section-head--center .section-intro{ margin-left:auto; margin-right:auto; }

/* Trams a tota amplada: fosc (capítol) i tintat */
.band{ position: relative; overflow: hidden; isolation: isolate; }
.band > .section{ position: relative; z-index: 1; }
.band--dark{ background: var(--espresso); color: var(--muted-on-espresso); }
.band--dark .section-title, .band--dark h3{ color: var(--text-on-espresso); }
.band--dark .section-title em{ color: var(--bronze-light); }
.band--dark .section-intro{ color: var(--muted-on-espresso); }
.band--tint{ background: var(--paper-deep); }

/* Capçalera partida: text + mitjà */
.split-head{
  display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: center;
  margin-bottom: clamp(44px, 6vw, 72px);
}
.split-head--reverse{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-head--reverse .split-head-text{ order: 2; }
.split-head .section-intro{ margin-bottom: 0; }
@media (max-width: 860px){
  .split-head, .split-head--reverse{ grid-template-columns: 1fr; }
  .split-head--reverse .split-head-text{ order: 0; }
}

/* Marcs de vídeo: forma variable segons la secció, mai el mateix rectangle */
.media-frame{
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-l);
  background: var(--espresso-raised); box-shadow: var(--shadow-m);
}
.media-frame video, .section-video-banner{ display:block; width:100%; height:100%; object-fit: cover; }
.media-frame video{ position:absolute; inset: -6% 0; height: 112%; transition: transform 1.8s var(--ease); }
.media-frame--cover{ aspect-ratio: 21 / 9; }
.media-frame--wide{ aspect-ratio: 16 / 10; }
.media-frame--tall{ aspect-ratio: 4 / 5; }
.media-frame--arch{ aspect-ratio: 3 / 4; border-radius: 999px 999px var(--radius-l) var(--radius-l); }
.band--dark .media-frame{ box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }

/* Parallax molt subtil dins els marcs (scroll-driven, sense JS; només on hi ha suport) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .media-frame video{ animation: frameDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes frameDrift{ from{ translate: 0 -4%; } to{ translate: 0 4%; } }

/* ==========================================================================
   EXPLORA — requadres de vídeo
   ========================================================================== */
.explore-tiles{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--espresso); }
.explore-tile{
  position:relative; aspect-ratio: 1 / 1.08; display:flex; flex-direction: column; justify-content:flex-end; gap: 6px;
  padding: clamp(18px, 2.2vw, 30px); text-decoration:none; overflow:hidden; isolation: isolate;
  font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: var(--text-on-espresso);
  background: var(--espresso-raised);
}
.explore-tile::before{
  content:""; position:absolute; inset:0; z-index: 1;
  background: linear-gradient(0deg, rgba(26,20,15,.88) 0%, rgba(26,20,15,.35) 45%, rgba(26,20,15,.12) 100%);
  transition: opacity .6s ease;
}
.explore-tile::after{ /* filet de bronze que creix en hover */
  content:""; position:absolute; left:0; right:0; bottom:0; height: 2px; z-index: 3; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
.explore-tile > *:not(video){ position: relative; z-index: 2; }
.explore-tile-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform 1.4s var(--ease); }
.explore-tile-num{ position:absolute !important; top: clamp(16px, 2vw, 26px); left: clamp(18px, 2.2vw, 30px); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1rem; color: var(--bronze-light); }
.explore-tile-label{ line-height: 1.2; max-width: 14ch; transition: transform .6s var(--ease); }
.explore-tile-arrow{ width: 22px; height: 22px; color: var(--bronze-light); opacity: .85; transition: transform .6s var(--ease), opacity .3s ease; }
.explore-tile-icon{ display:block; font-size: 1.6rem; margin-bottom: 8px; opacity: .9; }
.explore-tile:hover .explore-tile-video, .explore-tile:focus-visible .explore-tile-video{ transform: scale(1.07); }
.explore-tile:hover::before{ opacity: .75; }
.explore-tile:hover::after, .explore-tile:focus-visible::after{ transform: scaleX(1); }
.explore-tile:hover .explore-tile-label{ transform: translateY(-4px); }
.explore-tile:hover .explore-tile-arrow{ transform: translateX(8px); opacity: 1; }
.explore-tile:focus-visible{ outline-offset: -4px; }
@media (max-width: 720px){
  .explore-tiles{ grid-template-columns: 1fr 1fr; }
  .explore-tile{ aspect-ratio: 1 / 1.05; }
}

/* ==========================================================================
   PROVA SOCIAL
   ========================================================================== */
.stats-strip{
  display:grid; grid-template-columns: repeat(4,1fr);
  max-width: var(--max-w); margin: 0 auto; padding: clamp(40px, 5vw, 64px) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.stat-item{ text-align:center; display:flex; flex-direction:column; align-items:center; gap: 8px; padding: 0 16px; position: relative; }
.stat-item + .stat-item::before{ content:""; position:absolute; left:0; top: 12%; bottom: 12%; width:1px; background: var(--line); }
.stat-value{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.2rem, 4.2vw, 3.3rem); line-height: 1; color: var(--bronze-deep); letter-spacing: -.01em; }
.stat-label{ font-size: .84rem; color: var(--graphite); max-width: 22ch; line-height: 1.45; }
@media (max-width: 640px){
  .stats-strip{ grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .stat-item:nth-child(3)::before{ display:none; }
}

/* ==========================================================================
   DIFERENCIAL
   ========================================================================== */
.differential{ text-align:center; max-width: 900px; }
.differential-title{ font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; }
.differential-title em{ display:inline-block; margin-top: .06em; }
.differential-text{ font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 54ch; margin: 18px auto 0; color: var(--graphite); }

/* ==========================================================================
   DJS
   ========================================================================== */
.djs-section{ padding-top: clamp(24px, 4vw, 48px); }
.chapter-cover{ position: relative; border-radius: var(--radius-l); overflow: hidden; isolation: isolate; box-shadow: var(--shadow-l); }
.chapter-cover .media-frame{ border-radius: 0; box-shadow: none; }
.chapter-cover::after{
  content:""; position:absolute; inset:0; z-index: 1; pointer-events:none;
  background: linear-gradient(90deg, rgba(26,20,15,.85) 0%, rgba(26,20,15,.45) 45%, transparent 75%), linear-gradient(0deg, rgba(26,20,15,.5), transparent 50%);
}
.chapter-cover-text{ position:absolute; left: clamp(24px, 5vw, 64px); bottom: clamp(24px, 5vw, 56px); right: 24px; z-index: 2; }
.chapter-cover-text .section-title{ color: var(--text-on-espresso); margin: 0; font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 12ch; }
.chapter-cover-text .eyebrow{ margin-bottom: 14px; }
.section-lead{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap: wrap; gap: 16px 40px; margin: clamp(32px, 4vw, 48px) 0 clamp(28px, 4vw, 40px); }
.section-lead .section-intro{ margin: 0; }
.djs-count-note{
  display:inline-flex; align-items:center; gap: 10px; margin: 0;
  font-size: .82rem; color: var(--bronze-deep); font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 16px 8px 14px; background: var(--paper-raised);
}
.djs-count-note:empty{ display:none; }
.djs-count-note::before{ /* punt "en viu": la xifra es llegeix de djs-data.js */
  content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--bronze);
  box-shadow: 0 0 0 0 rgba(176,134,84,.55); animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse{ 0%{ box-shadow: 0 0 0 0 rgba(176,134,84,.55); } 70%,100%{ box-shadow: 0 0 0 9px rgba(176,134,84,0); } }
@media (max-width: 860px){
  .media-frame--cover{ aspect-ratio: 4 / 5; }
  .chapter-cover::after{ background: linear-gradient(0deg, rgba(26,20,15,.9) 0%, rgba(26,20,15,.35) 55%, transparent 80%); }
}

.djs-grid{ display:flex; flex-wrap: wrap; justify-content:center; gap: 24px; }
.dj-showcase-card{
  flex: 0 1 calc((100% - 48px) / 3); min-width: 0;
  position: relative; display:flex; flex-direction:column; text-align:left; cursor:pointer; overflow:hidden; padding: 0;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-s);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s ease;
}
.dj-showcase-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: var(--line-strong); }
.dj-showcase-card:focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; }
.dj-card-photo{ position: relative; width:100%; aspect-ratio: 4 / 4.4; overflow:hidden; background: var(--bronze-tint); }
.dj-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s var(--ease); }
.dj-showcase-card:hover .dj-card-photo img{ transform: scale(1.06); }
.dj-card-photo::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(26,20,15,.35) 0%, transparent 30%); pointer-events:none; }
.dj-card-zone{
  position:absolute; top: 14px; left: 14px; z-index: 1;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--ink);
  background: rgba(251,246,239,.92); padding: 6px 12px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dj-card-photo--placeholder{ display:flex; align-items:center; justify-content:center; }
.dj-card-photo--placeholder span{ font-family: var(--font-display); font-style: italic; font-size: 3rem; color: var(--text-on-espresso); }
.dj-showcase-body{ padding: 22px 24px 24px; display:flex; flex-direction:column; flex: 1; }
.dj-showcase-body h3, .dj-showcase-card h3{ font-size: 1.35rem; margin-bottom: 4px; }
.dj-showcase-zone{ font-size: .85rem; color: var(--mist); margin-bottom: 14px; }
.dj-showcase-bio{ font-size: .92rem; color: var(--graphite); margin-bottom: 14px; }
.dj-showcase-tags{ display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 18px; }
.dj-showcase-tags span{ font-size: .74rem; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-pill); padding: 4px 11px; color: var(--ink); }
.dj-showcase-tags .dj-tag-more{ background: transparent; border-style: dashed; color: var(--mist); }
.dj-showcase-area{ font-size: .84rem; color: var(--mist); margin:0; }
.dj-showcase-quote{ font-style: italic; font-size: .9rem; color: var(--ink); border-left: 2px solid var(--bronze); padding-left: 10px; margin: 0 0 16px; }
.dj-showcase-rating{ font-size: .88rem; color: var(--bronze-deep); font-weight:700; margin: 0 0 10px; }
.dj-showcase-rating span{ color: var(--mist); font-weight:400; }
.dj-showcase-cta{
  margin-top: auto; align-self: flex-start; display:inline-flex; align-items:center; gap: 8px;
  font-size: .86rem; font-weight: 600; color: var(--bronze-deep); padding: 0 0 3px;
  background: linear-gradient(var(--bronze), var(--bronze)) left bottom / 0% 1px no-repeat;
  transition: background-size .5s var(--ease), color .2s ease;
}
.dj-showcase-cta .icon{ width: 1em; height: 1em; transition: transform .5s var(--ease); }
.dj-showcase-card:hover .dj-showcase-cta{ background-size: 100% 1px; color: var(--ink); }
.dj-showcase-card:hover .dj-showcase-cta .icon{ transform: translateX(4px); }
.djs-empty, .empty-note{ color: var(--mist); font-style: italic; }
.dj-avatar{ width: 56px; height:56px; border-radius: 50%; display:flex; align-items:center; justify-content:center; color: var(--text-on-espresso); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; margin-bottom: 16px; }
.dj-photo{ border-radius: 50%; object-fit: cover; margin-bottom: 16px; }

@media (max-width: 1000px){ .dj-showcase-card{ flex-basis: calc((100% - 24px) / 2); } }
/* Mòbil: carrusel lliscant amb "snap" — visual i ràpid, no una columna infinita */
@media (max-width: 640px){
  .djs-grid{
    flex-wrap: nowrap; justify-content: flex-start; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 24px; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .djs-grid::-webkit-scrollbar{ display:none; }
  .dj-showcase-card{ flex: 0 0 82%; scroll-snap-align: start; }
  .dj-showcase-card:hover{ transform: none; }
}

/* ---------- modal de perfil de DJ ---------- */
.dj-modal-overlay, .meeting-modal-overlay{
  position: fixed; inset:0; z-index: 50;
  background: rgba(26,20,15,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 40px 16px; overflow-y:auto; overscroll-behavior: contain;
}
.dj-modal-overlay:not(.hidden), .meeting-modal-overlay:not(.hidden){ animation: overlayIn .4s ease both; }
.dj-modal-overlay:not(.hidden) .dj-modal, .meeting-modal-overlay:not(.hidden) .meeting-modal{ animation: modalIn .6s var(--ease) both; }
@keyframes overlayIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes modalIn{ from{ opacity: 0; transform: translate3d(0, 28px, 0) scale(.98); } to{ opacity: 1; transform: none; } }
.dj-modal{
  background: var(--paper-raised); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
  max-width: 660px; width:100%; padding: clamp(28px,5vw,48px); position:relative; margin: auto 0;
}
.dj-modal-close{
  position:absolute; top:18px; right:18px; z-index: 2; background: var(--paper); border: 1px solid var(--line);
  font-size: 1rem; cursor:pointer; color: var(--graphite);
  width: 40px; height:40px; border-radius: 50%; transition: transform .4s var(--ease), background .2s ease, color .2s ease;
}
.dj-modal-close:hover{ background: var(--espresso); color: var(--text-on-espresso); transform: rotate(90deg); }
.dj-modal-header{ display:flex; gap: 22px; align-items:center; margin-bottom: 22px; padding-right: 40px; }
.dj-modal-header h2{ font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 2px; }
.dj-modal-header .dj-avatar, .dj-modal-header .dj-photo{ flex-shrink:0; }
.dj-modal-zone{ color: var(--mist); font-size: .9rem; margin: 2px 0 10px; }
.dj-modal-personality{ font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink); border-left: 2px solid var(--bronze); padding-left: 16px; margin: 20px 0; }
.dj-modal-bio{ font-size: 1rem; color: var(--graphite); }
.dj-modal-match{ background: var(--bronze-tint); border-radius: var(--radius-m); padding: 22px 24px; margin: 22px 0; }
.dj-modal-match h3, .dj-modal-venues h3, .dj-modal-media h3{ font-family: var(--font-ui); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--bronze-deep); margin-bottom: 12px; }
.dj-modal-match ul{ margin:0; padding:0; list-style: none; display:flex; flex-direction:column; gap: 10px; }
.dj-modal-match li{ position: relative; padding-left: 22px; font-size: .95rem; color: var(--ink); }
.dj-modal-match li::before{ content:""; position:absolute; left: 2px; top: .62em; width: 8px; height: 8px; border: 1px solid var(--bronze-deep); transform: rotate(45deg); }
.dj-modal-venues, .dj-modal-media{ margin: 18px 0; }
.dj-modal-links{ display:flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.dj-modal-links a{ text-decoration:none; color: var(--ink); font-weight: 600; font-size: .86rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 8px 16px; transition: border-color .2s ease, background .2s ease; }
.dj-modal-links a:hover{ border-color: var(--bronze); background: var(--bronze-tint); }
.dj-modal-media a{ color: var(--bronze-deep); font-weight: 600; }
.dj-modal-cta{ width:100%; margin-top: 12px; }
.dj-modal-photo{ width: 112px; height:112px; border-radius: 22px; overflow:hidden; flex-shrink:0; box-shadow: var(--shadow-m); }
.dj-modal-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dj-modal-photo--placeholder{ display:flex; align-items:center; justify-content:center; }
.dj-modal-photo--placeholder span{ font-family: var(--font-display); font-style: italic; font-size: 1.8rem; color: var(--text-on-espresso); }
@media (max-width: 520px){
  .dj-modal-overlay, .meeting-modal-overlay{ padding: 16px 10px; }
  .dj-modal-header{ flex-direction: column; align-items:flex-start; padding-right: 0; }
}

/* ==========================================================================
   VÍDEOS — tram fosc "mode cinema"
   ========================================================================== */
.videos-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.video-card{
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px; overflow:hidden;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s ease;
}
.band--dark .video-card{ background: rgba(255,255,255,.03); border-color: var(--line-on-espresso); }
.video-card:hover{ transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); border-color: rgba(210,172,124,.35); }
.video-placeholder{
  position:relative; overflow: hidden; background: linear-gradient(135deg, var(--espresso), var(--bronze-deep));
  display:flex; align-items:center; justify-content:center; aspect-ratio: 16/9;
}
.video-card--vertical .video-placeholder{ aspect-ratio: 9/16; }
.video-placeholder img, .video-placeholder video{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s var(--ease); }
.video-card:hover .video-placeholder video, .video-card:hover .video-placeholder img{ transform: scale(1.05); }
.video-live{
  position:absolute; top: 14px; left: 14px; z-index: 1; display:inline-flex; align-items:center; gap: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-espresso);
  background: rgba(26,20,15,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.video-live::before{ content:""; width: 6px; height: 6px; border-radius: 50%; background: #E0533D; animation: livePulse 2.4s ease-out infinite; }
.video-play-icon{ color: var(--text-on-espresso); font-size: 2rem; opacity:.85; }
.video-card-info{ padding: 20px 22px 22px; }
.video-card-meta{ font-size: .7rem; font-weight: 700; letter-spacing: .16em; color: var(--bronze-deep); margin: 0 0 8px; }
.band--dark .video-card-meta{ color: var(--bronze-light); }
.video-card-info h3{ font-size: 1.15rem; margin-bottom: 6px; }
.video-card-desc{ font-size: .9rem; color: var(--graphite); margin-bottom: 0; }
.band--dark .video-card-desc{ color: var(--muted-on-espresso); }

/* ==========================================================================
   COM FUNCIONA — línia de temps amb progrés lligat a l'scroll
   ========================================================================== */
.timeline{ --tp: 1; position:relative; max-width: 820px; margin: 0 auto; padding:0; list-style:none; }
.timeline::before, .timeline::after{ content:""; position:absolute; left:50%; top:8px; bottom:40px; width:1px; transform: translateX(-50%); }
.timeline::before{ background: var(--line-strong); }
.timeline::after{ background: linear-gradient(var(--bronze-light), var(--bronze)); transform: translateX(-50%) scaleY(var(--tp)); transform-origin: top; width: 2px; }
.timeline-item{ position:relative; width:50%; padding: 0 52px 56px; box-sizing:border-box; }
.timeline-item--left{ left:0; text-align:right; }
.timeline-item--right{ left:50%; text-align:left; }
.timeline-index{
  position:absolute; top:0; width:40px; height:40px; border-radius:50%; z-index: 1;
  background: var(--paper); color: var(--bronze-deep); border: 1px solid var(--bronze);
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.05rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .5s var(--ease), color .5s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease);
}
.timeline-item.is-reached .timeline-index, html:not(.motion) .timeline-index{
  background: var(--bronze); color: var(--espresso); box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px rgba(176,134,84,.35);
}
.timeline-item.is-reached .timeline-index{ transform: scale(1.04); }
.timeline-item--left .timeline-index{ right:-20px; }
.timeline-item--right .timeline-index{ left:-20px; }
.timeline-content h3{ font-size: 1.25rem; margin-bottom: 8px; padding-top: 6px; }
.timeline-content p{ font-size: .95rem; color: var(--graphite); margin:0; margin-left:auto; max-width: 40ch; }
.timeline-item--right .timeline-content p{ margin-left:0; margin-right:auto; }
@media (max-width: 680px){
  .timeline::before, .timeline::after{ left: 20px; }
  .timeline-item, .timeline-item--left, .timeline-item--right{ width:100%; left:0; text-align:left; padding: 0 0 40px 64px; }
  .timeline-item--left .timeline-index, .timeline-item--right .timeline-index{ left:0; right:auto; }
  .timeline-content p, .timeline-item--right .timeline-content p{ margin-left:0; margin-right:0; }
}

/* ==========================================================================
   QUI SOM — relat editorial amb columna lateral fixa
   ========================================================================== */
.about{ padding-top: clamp(72px, 10vw, 136px); padding-bottom: clamp(72px, 10vw, 136px); }
.about-grid{ display:grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 104px); align-items: start; }
.about-aside{ position: sticky; top: 110px; }
.about-aside .media-frame{ margin-top: 28px; max-width: 380px; }
.about-copy p{ font-size: 1.05rem; max-width: 62ch; }
.about-copy .about-lead{ font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--ink); letter-spacing: -.01em; }
.about-copy .about-question{ font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--ink); margin: 1.4em 0; padding-left: 20px; border-left: 2px solid var(--bronze); }
.about-copy .about-turn{ font-weight: 600; color: var(--ink); font-size: 1.12rem; margin-top: 1.6em; }
.about-pullquote{ position: relative; margin: 2.2em 0; padding: 34px 0 30px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.about-pullquote::before{ content:"\201C"; position:absolute; top: -26px; left: 0; padding-right: 14px; background: var(--paper-deep); font-family: var(--font-display); font-style: italic; font-size: 4rem; line-height: 1; color: var(--bronze); }
.about-copy .about-pullquote p:first-child{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.18; color: var(--ink); margin-bottom: .45em; letter-spacing: -.01em; }
.about-copy .about-pullquote p:last-child{ font-size: 1.1rem; color: var(--graphite); margin: 0; }
@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-aside{ position: static; }
  .about-aside .media-frame{ max-width: 320px; aspect-ratio: 4 / 5; }
}

/* Llista de compromisos (marca de verificació dibuixada, no glifa) */
.promise-list{ list-style:none; margin: 2em 0 0; padding: 0; display:flex; flex-direction:column; gap: 14px; }
.promise-list li{ position:relative; padding-left: 36px; font-size: 1rem; color: var(--ink); line-height: 1.55; }
.promise-list li::before{
  content:""; position:absolute; left:0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bronze-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%238A6339' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  border: 1px solid rgba(176,134,84,.35);
}
/* Compatibilitat amb la revelació original de motion.js */
.promise-list li.reveal-pending{ opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.promise-list li.reveal-in{ opacity: 1; transform: translateY(0); }

/* ---------- equip (qui som) ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 20px; margin-top: 48px; }
.team-member{
  display:flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align:left;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px; padding: 24px;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.team-member:hover{ transform: translateY(-4px); box-shadow: var(--shadow-m); }
.team-photo-placeholder{
  width: 60px; height:60px; border-radius: 50%; margin: 0 0 14px;
  background: var(--espresso); display:flex; align-items:center; justify-content:center; overflow:hidden;
  font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--bronze-light);
  box-shadow: 0 0 0 4px var(--paper-raised), 0 0 0 5px var(--line-strong);
}
.team-photo-placeholder img{ width:100%; height:100%; object-fit:cover; }
.team-member h4{ font-family: var(--font-heading); font-weight:600; font-size: 1.2rem; margin: 0; }
.team-role{ font-size: .82rem; font-weight: 500; color: var(--bronze-deep); margin: 0; line-height: 1.4; }
.team-bio{ font-size: .92rem; color: var(--graphite); margin: 10px 0 0; }

/* ==========================================================================
   SERVEIS — índex numerat (sense caixes: contrast amb les targetes)
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; }
.service-item{ position: relative; padding: 26px 0 34px; border-top: 1px solid var(--line-strong); }
.service-item::before{
  content:""; position:absolute; left:0; top:-1px; height: 2px; width: 100%; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease);
}
.service-item:hover::before{ transform: scaleX(1); }
.service-num{ display:block; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--bronze-deep); margin-bottom: 18px; }
.service-item h3, .event-type-item h3{ font-size: 1.4rem; margin-bottom: 8px; }
.service-item p, .event-type-item p{ font-size: .95rem; color: var(--graphite); margin: 0; }
@media (max-width: 860px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){
  .services-grid{ grid-template-columns: 1fr; }
  .service-item{ display:grid; grid-template-columns: 40px 1fr; padding: 18px 0 20px; }
  .service-num{ margin: 4px 0 0; grid-row: span 2; }
  .service-item h3{ font-size: 1.2rem; margin-bottom: 4px; }
}

/* ==========================================================================
   TIPUS D'ESDEVENIMENT — composició amb peça destacada
   ========================================================================== */
.event-types-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.event-type-item{
  position: relative; display:flex; flex-direction:column; text-align:left; text-decoration:none; color: inherit;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px; padding: 28px 26px 24px;
  min-height: 230px; overflow: hidden; isolation: isolate;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s ease, background .3s ease;
}
.event-type-item:hover{ transform: translateY(-5px); border-color: var(--bronze); box-shadow: var(--shadow-m); }
.event-type-item p{ margin-bottom: 20px; }
.event-type-cta{
  margin-top: auto; display:inline-flex; align-items:center; gap: 8px;
  font-size: .82rem; font-weight: 600; color: var(--bronze-deep);
}
.event-type-cta .icon{ width: 1em; height: 1em; transition: transform .5s var(--ease); }
.event-type-item:hover .event-type-cta .icon{ transform: translateX(5px); }
.event-type-kicker{ font-family: var(--font-display); font-style: italic; color: var(--bronze-deep); font-size: 1rem; margin-bottom: 14px; display:block; }
.event-type-item--featured{
  grid-column: span 2; grid-row: span 2; justify-content: flex-end; min-height: 480px; padding: clamp(28px, 4vw, 44px);
  background: var(--espresso); border-color: var(--espresso); color: var(--muted-on-espresso);
}
.event-type-item--featured::before, .event-type-item--featured::after{ /* dos anells entrellaçats, dibuixats en CSS */
  content:""; position:absolute; top: 40px; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(210,172,124,.5); z-index: -1;
  transition: transform 1.2s var(--ease);
}
.event-type-item--featured::before{ right: 120px; }
.event-type-item--featured::after{ right: 40px; border-color: rgba(210,172,124,.3); }
.event-type-item--featured:hover::before{ transform: translateX(-10px); }
.event-type-item--featured:hover::after{ transform: translateX(10px); }
.event-type-item--featured h3{ color: var(--text-on-espresso); font-size: clamp(2rem, 3.8vw, 3rem); margin-top: auto; }
.event-type-item--featured .event-type-cta{ margin-top: 8px; }
.event-type-item--featured p{ color: var(--muted-on-espresso); font-size: 1.05rem; max-width: 36ch; }
.event-type-item--featured .event-type-kicker, .event-type-item--featured .event-type-cta{ color: var(--bronze-light); }
.event-type-item--featured:hover{ border-color: var(--bronze); box-shadow: var(--shadow-l); }
.event-type-item--wide{ grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items:center; gap: 12px 32px; flex-wrap: wrap; padding: 22px 28px; background: transparent; border-style: dashed; border-color: var(--line-strong); }
.event-type-item--wide h3{ margin: 0; font-size: 1.2rem; }
.event-type-item--wide p{ margin: 0; flex: 1; min-width: 220px; }
.event-type-item--wide .event-type-cta{ margin-top: 0; }
.event-type-item--wide:hover{ background: var(--paper-raised); border-style: solid; }
.event-type-photo{ aspect-ratio: 4/3; border-radius: var(--radius-m); margin-bottom: 16px; background: linear-gradient(150deg, var(--bronze-tint), var(--line)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.event-type-photo img, .event-type-photo video{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s var(--ease); }
.event-type-item:hover .event-type-photo img, .event-type-item:hover .event-type-photo video{ transform: scale(1.05); }
.event-type-item--featured .event-type-photo{ background: var(--espresso-raised); margin-bottom: 22px; }
.event-type-item--wide .event-type-photo{ flex: none; width: 112px; margin: 0; border-radius: var(--radius-s, 10px); }
@media (max-width: 960px){
  .event-types-grid{ grid-template-columns: 1fr 1fr; }
  .event-type-item--featured{ grid-row: auto; min-height: 340px; }
}
@media (max-width: 560px){
  .event-types-grid{ grid-template-columns: 1fr; gap: 12px; }
  .event-type-item--featured{ grid-column: auto; min-height: 320px; }
  .event-type-item{ min-height: 0; }
  .event-type-item--featured::before{ right: 82px; width: 96px; height: 96px; top: 24px; }
  .event-type-item--featured::after{ right: 24px; width: 96px; height: 96px; top: 24px; }
}

/* ==========================================================================
   ESTILS — índex sobre espresso
   ========================================================================== */
.styles-section{ background: var(--espresso); max-width: none; padding-left: 0; padding-right:0; color: var(--text-on-espresso); overflow: hidden; isolation: isolate; }
.styles-section > *:not(.grain){ position: relative; z-index: 1; }
.styles-section .styles-eyebrow, .styles-section .section-title, .styles-section .section-intro{ max-width: var(--max-w); margin-left:auto; margin-right:auto; padding: 0 var(--gutter); }
.styles-section .styles-eyebrow{ display:flex; }
.styles-section .section-title{ color: var(--text-on-espresso); }
.styles-section .section-intro--light{ color: #BBAE9B; }
.style-index{
  counter-reset: style; list-style:none; margin: 0 auto; padding: 0 var(--gutter);
  max-width: var(--max-w);
}
.style-index li:first-child{ border-top: 1px solid var(--line-on-espresso); }
.style-index li{
  counter-increment: style; position: relative;
  display:flex; align-items:center; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-on-espresso);
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.15;
  color: var(--text-on-espresso);
}
.style-index li span{ transition: transform .7s var(--ease), color .4s ease; }
.style-index li::after{
  content: counter(style, decimal-leading-zero); font-family: var(--font-ui); font-style: normal; font-size: .78rem; letter-spacing: .14em; color: var(--muted-on-espresso);
  transition: color .4s ease, transform .7s var(--ease);
}
.style-index li::before{ /* filet que es dibuixa a sota en hover */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background: var(--bronze-light);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
}
.style-index li:hover span{ transform: translateX(16px); color: var(--bronze-light); }
.style-index li:hover::after{ color: var(--bronze-light); transform: translateX(-6px); }
.style-index li:hover::before{ transform: scaleX(1); }

/* ==========================================================================
   EQUIPAMENT
   ========================================================================== */
.equipment-grid{ display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 96px); align-items: center; }
.equipment-copy .section-intro{ margin-bottom: 0; }
.equipment-copy .promise-list{ margin-top: 1.8em; }
.equipment-note{ margin-top: 1.8em; font-size: .95rem; }
@media (max-width: 860px){
  .equipment-grid{ grid-template-columns: 1fr; }
  .equipment-grid .media-frame--tall{ aspect-ratio: 16 / 11; }
}

/* ==========================================================================
   PER QUÈ NO UN DIRECTORI MÉS — targetes numerades
   ========================================================================== */
.why-grid{ display:grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 80px); align-items: start; }
.why-head .section-intro{ margin-bottom: 0; }
.promise-list--cards{ counter-reset: why; display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.promise-list--cards li{
  counter-increment: why; padding: 26px 24px 26px; min-height: 170px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px;
  display:flex; flex-direction:column; gap: 18px; font-size: 1rem;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s ease;
}
.promise-list--cards li:hover{ transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--line-strong); }
.promise-list--cards li::before{
  content: counter(why, decimal-leading-zero); position: static; width: auto; height: auto; border: 0; background: none; border-radius: 0;
  font-family: var(--font-display); font-style: italic; font-size: 1.9rem; line-height: 1; color: var(--bronze);
}
.promise-list--cards li:nth-child(2){ background: var(--espresso); border-color: var(--espresso); color: var(--text-on-espresso); }
.promise-list--cards li:nth-child(2)::before{ color: var(--bronze-light); }
@media (max-width: 860px){ .why-grid{ grid-template-columns: 1fr; } }
@media (max-width: 520px){ .promise-list--cards{ grid-template-columns: 1fr; } .promise-list--cards li{ min-height: 0; } }

/* ==========================================================================
   SEGUIU-NOS · PREU · CONTACTE
   ========================================================================== */
.follow-us{ padding-top: 0; }
.follow-card{
  display:flex; align-items:center; justify-content:space-between; gap: 28px 48px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper-raised);
  padding: clamp(28px, 4vw, 48px);
}
.follow-card .section-title{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.follow-card .section-intro{ margin-bottom: 0; }

.pricing-transparency, .meeting-section, .whatsapp-section{ text-align:center; max-width: var(--max-w); }
.pricing-transparency{ padding-top: 0; }
.pricing-card{
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-l);
  background: var(--bronze-tint); padding: clamp(40px, 7vw, 88px) clamp(24px, 6vw, 80px);
}
.pricing-card::before{ content:""; position:absolute; inset:-40%; z-index:-1; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.75), transparent 45%); }
.pricing-card .section-title{ max-width: 18ch; margin-left:auto; margin-right:auto; }
.pricing-card .section-intro{ margin: 0 auto; }
.pricing-actions{ margin-top: 30px; }
.pricing-badge{
  display:inline-flex; align-items:center; gap: 8px; margin: 0 0 22px; border: 1px solid rgba(138,99,57,.4); color: var(--bronze-deep); background: rgba(255,255,255,.6);
  border-radius: var(--radius-pill); padding: 7px 16px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.contact-methods{ text-align:center; padding-top: clamp(48px, 7vw, 96px); }
.contact-methods .section-intro{ margin-left:auto; margin-right:auto; }
.contact-methods-row{ display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; margin-top: 8px; }
.contact-methods-row a{
  display:inline-flex; align-items:center; gap: 10px; text-decoration:none; color: var(--ink); font-weight: 600; font-size: .95rem; cursor:pointer;
  border: 1px solid var(--line-strong); background: var(--paper-raised); border-radius: var(--radius-pill); padding: 12px 20px;
  transition: transform .45s var(--ease), border-color .25s ease, box-shadow .45s var(--ease), color .2s ease;
}
.contact-methods-row a .icon{ color: var(--bronze-deep); }
.contact-methods-row a:hover{ color: var(--bronze-deep); border-color: var(--bronze); transform: translateY(-3px); box-shadow: var(--shadow-m); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width: var(--max-w); padding-top: clamp(40px, 6vw, 80px); }
.faq-grid{ display:grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items:start; }
.faq-head{ position: sticky; top: 110px; }
.faq-list{ display:flex; flex-direction:column; border-top: 1px solid var(--line-strong); }
details{ border-bottom: 1px solid var(--line); padding: 0; }
summary{
  cursor:pointer; font-weight: 600; font-size: 1.02rem; color: var(--ink); list-style: none;
  display:flex; justify-content:space-between; align-items:center; gap: 20px; padding: 22px 0;
  transition: color .2s ease;
}
summary:hover{ color: var(--bronze-deep); }
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:""; flex-shrink:0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--bronze-deep), var(--bronze-deep)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--bronze-deep), var(--bronze-deep)) center / 1.5px 11px no-repeat;
  transition: transform .5s var(--ease), background-color .3s ease, border-color .3s ease;
}
details[open] summary::after{ transform: rotate(45deg); background-color: var(--bronze-tint); border-color: var(--bronze); }
details p{ margin: 0 0 24px; color: var(--graphite); max-width: 60ch; padding-right: 50px; }
details[open] p{ animation: faqIn .5s var(--ease) both; }
@keyframes faqIn{ from{ opacity: 0; transform: translateY(-6px); } to{ opacity: 1; transform: none; } }
.faq-search-wrap{ display:block; max-width: 420px; margin: 8px 0 20px; }
.faq-search-field{ position: relative; display:block; }
.faq-search-field .icon{ position:absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mist); pointer-events:none; }
.faq-search-wrap input{
  width:100%; font-family: var(--font-ui); font-size: 1rem; padding: 14px 18px 14px 46px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--paper-raised); color: var(--ink);
  transition: border-color .25s ease, box-shadow .3s ease;
}
.faq-search-wrap input:focus{ outline:none; border-color: var(--bronze); box-shadow: 0 0 0 4px rgba(176,134,84,.15); }
.faq-no-results{ color: var(--mist); font-size: .92rem; }
.faq-no-results a{ color: var(--bronze-deep); font-weight:600; }
@media (max-width: 860px){
  .faq-grid{ grid-template-columns: 1fr; }
  .faq-head{ position: static; }
}

/* ==========================================================================
   TANCAMENT (CTA final + peu sobre espresso)
   ========================================================================== */
.band--finale{ padding-top: 8px; }
.hero-field--finale{
  inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 55% at 50% 30%, rgba(176,134,84,.22), transparent 65%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(0,0,0,.4), transparent 70%);
}
.final-cta{ text-align:center; padding-top: clamp(80px, 11vw, 150px); padding-bottom: clamp(64px, 9vw, 120px); }
.final-cta .section-title{ font-size: clamp(2.3rem, 5.4vw, 4.2rem); max-width: 16ch; margin-left:auto; margin-right:auto; }
.final-cta .section-intro{ margin: 0 auto; font-size: 1.1rem; }
.final-cta-actions{ display:flex; gap: 14px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top: 36px; }
.final-cta-actions .btn{ margin: 0; }
@media (max-width: 520px){ .final-cta-actions .btn{ width: 100%; } }

/* ---------- footer ---------- */
.site-footer{
  position: relative; z-index: 1;
  padding: 56px var(--gutter) 64px; border-top: 1px solid var(--line-on-espresso);
  max-width: var(--max-w); margin: 0 auto;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; align-items:start;
  color: var(--muted-on-espresso);
}
.band--dark .site-footer{ border-top-color: var(--line-on-espresso); }
.logo-footer{ display:block; font-size: 2rem; color: var(--text-on-espresso); }
.footer-tagline{ color: var(--muted-on-espresso); font-size: .92rem; margin: 12px 0 0; max-width: 36ch; }
.footer-nav{ display:flex; flex-direction:column; gap: 10px; }
.footer-nav a{ text-decoration:none; color: var(--muted-on-espresso); font-size: .92rem; transition: color .2s ease, transform .4s var(--ease); width: fit-content; }
.footer-nav a:hover{ color: var(--bronze-light); transform: translateX(4px); }
.footer-contact{ display:flex; flex-direction:column; gap: 12px; align-items:flex-start; }
.footer-contact a{ display:inline-flex; align-items:center; gap: 10px; text-decoration:none; color: var(--text-on-espresso); font-size: .94rem; font-weight: 500; transition: color .2s ease; }
.footer-contact a .icon{ color: var(--bronze-light); width: 1.05em; height: 1.05em; }
.footer-contact a:hover{ color: var(--bronze-light); }
@media (max-width: 760px){
  .site-footer{ grid-template-columns: 1fr 1fr; }
  .footer-top{ grid-column: 1 / -1; }
}
@media (max-width: 460px){
  .site-footer{ grid-template-columns: 1fr; }
  .footer-nav{ flex-direction:row; flex-wrap:wrap; gap: 12px 18px; }
}

/* ==========================================================================
   BARRA MÒBIL FIXA — càpsula flotant que apareix un cop passat el hero
   ========================================================================== */
.mobile-bar{
  display:none; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 29;
  background: rgba(26,20,15,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-pill);
  padding: 7px; gap: 7px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.55);
  transition: transform .6s var(--ease), opacity .4s ease;
}
.mobile-bar .btn{ flex:1; text-align:center; padding: 13px 16px; }
.btn-whatsapp-bar{ background:#25D366; color:#06210F; text-decoration:none; font-weight:700; }
.btn-whatsapp-bar:hover{ background:#1EBE5A; }
.mobile-bar--auto:not(.is-visible){ transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
@media (max-width: 720px){
  .mobile-bar{ display:flex; }
  body{ padding-bottom: 84px; }
}

/* ==========================================================================
   APP SHELL — qüestionari / resum / confirmació
   ========================================================================== */
#screen-form, #screen-summary, #screen-confirmation{ background: var(--paper); min-height: 100vh; }
/* Mode focus: fora de la landing, s'amaguen top bar, capçalera i barra mòbil
   (els seus enllaços apunten a seccions de la landing). Queden el logo i el ✕. */
body:has(#screen-landing.hidden) .top-bar,
body:has(#screen-landing.hidden) .site-header,
body:has(#screen-landing.hidden) .mobile-bar{ display: none; }
body:has(#screen-landing.hidden){ padding-bottom: 0; }
.app-shell{ max-width: 640px; margin: 0 auto; padding: clamp(96px,10vw,120px) clamp(20px,5vw,28px) 96px; position: relative; }
.app-logo{ position: fixed; top: 26px; left: var(--gutter); z-index: 31; font-size: 1.25rem; pointer-events: none; }
.btn-close{
  position: fixed; top: 20px; right: var(--gutter); z-index: 31;
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 50%;
  width: 42px; height:42px; font-size: 1rem; cursor:pointer; color: var(--graphite);
  transition: transform .4s var(--ease), background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-close:hover{ color: var(--text-on-espresso); background: var(--espresso); border-color: var(--espresso); transform: rotate(90deg); }

.progress-track{ height: 4px; background: var(--line); border-radius: 999px; overflow:hidden; margin-bottom: 14px; }
.progress-fill{ display:block; height:100%; background: linear-gradient(90deg, var(--bronze-deep), var(--bronze), var(--bronze-light)); width: 8.3%; border-radius: inherit; transition: width .7s var(--ease); }
.progress-label{ color: var(--mist); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 44px; }

fieldset{ border:none; margin:0; padding:0; min-width: 0; }
.form-step legend{ font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.7rem, 4.6vw, 2.35rem); color: var(--ink); margin-bottom: 10px; padding:0; line-height: 1.15; letter-spacing: -.02em; }
.step-hint{ color: var(--mist); font-size: .92rem; margin-bottom: 20px; }

.field{ display:block; margin: 26px 0; }
input[type=text], input[type=date], input[type=number], input[type=email], input[type=tel]{
  width:100%; font-family: var(--font-ui); font-size: 1.15rem; padding: 14px 4px;
  border: none; border-bottom: 1px solid var(--line-strong); border-radius: 0; color: var(--ink);
  background: transparent linear-gradient(var(--bronze), var(--bronze)) left bottom / 0% 2px no-repeat;
  transition: background-size .5s var(--ease), border-color .3s ease;
}
input:focus{ outline: none; border-color: transparent; background-size: 100% 2px; }
input::placeholder, textarea::placeholder{ color: #A69A8B; }
.field-label{ display:block; font-size: .8rem; font-weight: 500; color: var(--mist); margin-bottom: 6px; }
textarea{
  width:100%; font-family: var(--font-ui); font-size: 1rem; padding: 14px 16px; line-height: 1.6;
  border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--paper-raised); color: var(--ink); resize: vertical;
  transition: border-color .25s ease, box-shadow .3s ease;
}
textarea:focus{ outline:none; border-color: var(--bronze); box-shadow: 0 0 0 4px rgba(176,134,84,.15); }

/* ---------- xips de selecció ---------- */
.chip-group{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 24px; }
.chip-group-wide .chip-option{ flex-basis: 100%; justify-content: space-between; padding: 17px 20px; }
.chip-option{
  position: relative; display:flex; align-items:center; gap: 10px;
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 13px 18px;
  font-size: .96rem; color: var(--ink); cursor:pointer; background: var(--paper-raised);
  transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .4s var(--ease), box-shadow .4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chip-option input{ position:absolute; opacity:0; width:1px; height:1px; }
/* indicador (cercle per a ràdio, quadrat per a casella) */
.chip-option::after{
  content:""; order: 2; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  background: transparent center / 12px no-repeat; transition: background-color .25s ease, border-color .25s ease, transform .4s var(--ease);
}
.chip-option:has(input[type=checkbox])::after{ border-radius: 5px; }
.chip-option > span{ order: 1; }
.chip-group:not(.chip-group-wide) .chip-option::after{ order: 0; }
.chip-option:hover{ border-color: var(--bronze); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.chip-option:active{ transform: scale(.98); }
.chip-option:has(input:checked){ border-color: var(--espresso); background: var(--espresso); color: var(--text-on-espresso); font-weight: 600; box-shadow: 0 12px 24px -16px rgba(36,28,22,.8); }
.chip-option:has(input:checked)::after{
  border-color: var(--bronze); transform: scale(1.05);
  background-color: var(--bronze);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23241C16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.chip-option:has(input:focus-visible){ outline: 2px solid var(--bronze); outline-offset: 2px; }

.form-error{ color: #9A4A2E; font-size: .9rem; font-weight: 500; min-height: 1.2em; margin-top: 18px; }
.form-error:not(:empty){ animation: nudge .45s var(--ease); }
@keyframes nudge{ 0%,100%{ transform: none; } 25%{ transform: translateX(-5px); } 60%{ transform: translateX(4px); } }
.form-nav{ display:flex; justify-content:space-between; gap: 12px; margin-top: 40px; }
.form-nav .btn{ flex:1; }
#btn-next::after{ content:"→"; display:inline-block; transition: transform .45s var(--ease); }
#btn-next:hover::after{ transform: translateX(4px); }
#btn-prev[disabled]{ visibility:hidden; }

/* ---------- resum ---------- */
#screen-summary .section-title{ font-size: clamp(2rem, 5vw, 2.8rem); }
.summary-block{ border-top: 1px solid var(--line); padding: 28px 0; }
.summary-block h3{ font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); font-family: var(--font-ui); font-weight: 700; margin-bottom: 18px; }
.summary-list{ margin:0; display:grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; column-gap: 12px; }
.summary-list dt, .summary-list dd{ padding: 12px 0; border-bottom: 1px solid var(--line); }
.summary-list dt{ color: var(--mist); font-size: .9rem; align-self:stretch; display:flex; align-items:center; }
.summary-list dd{ margin:0; display:flex; align-items:center; gap: 14px; justify-content:flex-end; text-align:right; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.edit-link{ background:none; border:none; color: var(--bronze-deep); font-size: .8rem; font-weight: 600; cursor:pointer; padding: 4px 0; text-decoration: underline; text-decoration-color: rgba(138,99,57,.4); text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.edit-link:hover{ text-decoration-color: currentColor; }
.budget-block{
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--espresso); color: var(--muted-on-espresso); border: none; border-radius: var(--radius-l);
  padding: clamp(28px, 5vw, 40px); margin: 12px 0 8px;
}
.budget-block::before{ content:""; position:absolute; inset: -30%; z-index: -1; background: radial-gradient(circle at 20% 0%, rgba(176,134,84,.28), transparent 50%); }
.budget-block h3{ color: var(--bronze-light); }
.budget-range{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.2rem,6vw,3rem); color: var(--text-on-espresso); margin: 4px 0 12px; line-height: 1.1; }
.budget-note{ color: var(--muted-on-espresso); font-size: .88rem; }
.budget-note-small{ margin-top: 12px; font-size: .8rem; }
.budget-breakdown{ list-style:none; padding:0; margin: 18px 0 0; border-top: 1px solid var(--line-on-espresso); }
.budget-breakdown li{ display:flex; justify-content:space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-on-espresso); font-size: .9rem; color: var(--muted-on-espresso); }
.budget-breakdown li span:last-child{ color: var(--text-on-espresso); font-weight: 600; }

.check-option.consent{ display:flex; align-items:flex-start; gap: 12px; font-size: .86rem; color: var(--mist); margin: 28px 0; cursor: pointer; }
.check-option.consent input{ width: 18px; height: 18px; margin-top: 2px; accent-color: var(--bronze-deep); flex-shrink: 0; }
.check-option.consent a{ color: var(--graphite); }

/* ---------- confirmació ---------- */
.confirmation{ text-align:left; }
.confirmation-kicker{ display:flex; align-items:center; gap: 12px; color: var(--bronze-deep); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.2em; }
.confirmation-kicker::before{
  content:""; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--bronze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23241C16' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 0 0 6px var(--bronze-tint);
}
.motion #screen-confirmation:not(.hidden) .confirmation-kicker::before{ animation: popIn .7s var(--ease) .15s both; }
@keyframes popIn{ from{ transform: scale(.4); opacity: 0; } to{ transform: none; opacity: 1; } }
.confirmation .section-title{ font-size: clamp(2rem, 5vw, 2.8rem); }
.confirmation-reference{ font-weight: 600; color: var(--ink); }
.confirmation-summary{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; font-size: .92rem; color: var(--graphite); white-space: pre-line; margin: 20px 0; }
.confirmation-note{ font-size: .84rem; color: var(--mist); margin: 4px 0 22px; }
#btn-email-backup{ margin-right: 12px; margin-bottom: 12px; }

.email-request-cta{ background: var(--bronze-tint); border-radius: var(--radius-l); padding: 26px 28px; margin: 24px 0; }
.email-request-cta h3{ font-size: 1.15rem; margin: 0 0 8px; color: var(--ink); }
.email-request-cta p{ margin: 0 0 18px; font-size: .92rem; color: var(--graphite); }
.email-request-cta .btn{ margin-bottom: 0; }
.email-request-status{ margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--graphite); line-height:1.5; }
.email-request-status strong{ color: var(--ok); }

.next-steps{ border-top: 1px solid var(--line); padding-top: 28px; margin: 32px 0; }
.next-steps h3{ font-size: 1.15rem; margin-bottom: 16px; }
.next-steps-list{ counter-reset: ns; margin:0; padding: 0; list-style: none; display:flex; flex-direction:column; gap: 10px; }
.next-steps-list li{ counter-increment: ns; display:flex; align-items:center; gap: 14px; font-size: .95rem; color: var(--ink); }
.next-steps-list li::before{ content: counter(ns); flex-shrink:0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bronze); color: var(--bronze-deep); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-style: italic; font-size: .9rem; }

/* ---------- modal de reunió ---------- */
.meeting-modal{ background: var(--paper-raised); border-radius: var(--radius-l); box-shadow: var(--shadow-l); max-width: 500px; width:100%; padding: clamp(28px,5vw,44px); position:relative; text-align:left; margin: auto 0; }
.meeting-modal h2{ margin-bottom: 6px; padding-right: 44px; }
.meeting-modal .btn{ margin-top: 6px; }
.meeting-confirmation{ background: var(--bronze-tint); border-radius: var(--radius-m); padding: 20px 22px; font-size: .92rem; color: var(--ink); }
.meeting-alt{ font-size: .85rem; color: var(--mist); margin-top: 18px; }
.meeting-alt a{ color: var(--bronze-deep); font-weight:600; }
.meeting-modal input[type=date]{ min-height: 48px; }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background: var(--bronze); color: var(--espresso); font-weight:700;
  padding: 10px 18px; border-radius: var(--radius-pill); z-index: 100;
}
.skip-link:focus{ left: 16px; top: 16px; }

/* ---------- llegat (seccions retirades, es conserven per si tornen amb dades reals) ---------- */
.hero-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.stories-grid, .testimonials-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 24px; margin-top: 36px; }
.story-card, .testimonial-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.story-meta{ font-size: .82rem; color: var(--mist); margin-bottom: 4px; }
.story-style{ font-size: .85rem; color: var(--bronze-deep); font-weight: 600; margin-bottom: 12px; }
.story-text{ font-size: .95rem; margin:0; }
.testimonial-score{ color: var(--bronze); letter-spacing: 2px; margin-bottom: 10px; }
.testimonial-quote{ font-style: italic; font-size: .98rem; }
.testimonial-name{ font-weight: 600; color: var(--ink); margin-bottom: 0; }
.testimonial-event{ font-size: .82rem; color: var(--mist); }

/* ==========================================================================
   MOVIMENT — només amb .motion (sense reduce-motion) i amb JS present
   ========================================================================== */

/* Entrada del hero: un sol moment orquestrat */
@keyframes rise{ from{ opacity: 0; transform: translate3d(0, 26px, 0); } to{ opacity: 1; transform: none; } }
@keyframes titleIn{
  from{ opacity: 0; transform: translate3d(0, 40px, 0); clip-path: inset(0 0 100% 0); }
  to{ opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); }
}
@keyframes archIn{ from{ opacity: 0; transform: translate3d(0, 50px, 0) scale(.96); } to{ opacity: 1; transform: none; } }
@keyframes kenburns{ from{ transform: scale(1.1); } to{ transform: scale(1); } }
@keyframes lineIn{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes scrollCue{ 0%{ transform: scaleY(0); transform-origin: top; } 45%{ transform: scaleY(1); transform-origin: top; } 55%{ transform: scaleY(1); transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }
@keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes drift{ from{ transform: translate3d(0,0,0) scale(1); } to{ transform: translate3d(2%, -3%, 0) scale(1.06); } }

@media (prefers-reduced-motion: no-preference){
  .hero-field:not(.hero-field--finale){ animation: drift 34s ease-in-out infinite alternate; }
  .motion .hero-eyebrow{ animation: rise .9s var(--ease) .1s both; }
  .motion .hero-eyebrow .eyebrow-line{ transform-origin: left; animation: lineIn 1.1s var(--ease) .2s both; }
  .motion .hero-title{ animation: titleIn 1.25s var(--ease) .22s both; }
  .motion .hero-sub{ animation: rise 1s var(--ease) .5s both; }
  .motion .hero-actions{ animation: rise 1s var(--ease) .64s both; }
  .motion .hero-trust{ animation: rise 1s var(--ease) .78s both; }
  .motion .hero-arch{ animation: archIn 1.5s var(--ease) .3s both; }
  .motion .hero-arch-img.is-active{ animation: kenburns 8s var(--ease) both; }
  .motion .hero-badge{ animation: rise .9s var(--ease) 1.15s both; }
  .motion .hero-scroll{ animation: rise 1s var(--ease) 1.5s both; }
  .motion .hero-scroll-line{ animation: scrollCue 2.6s var(--ease-in-out) 2.2s infinite; }

  /* Canvi de pas al qüestionari i canvi de pantalla */
  .motion .form-step:not(.hidden){ animation: rise .55s var(--ease) both; }
  /* només opacitat: un transform aquí trencaria el position:fixed del logo i del botó ✕ */
  .motion #screen-form:not(.hidden) .app-shell, .motion #screen-summary:not(.hidden) .app-shell, .motion #screen-confirmation:not(.hidden) .app-shell{ animation: fadeIn .6s ease both; }
}

/* Revelació en fer scroll (motion.js afegeix .is-in i, en acabar, treu l'atribut) */
.motion [data-reveal]{
  transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay: calc(min(var(--d, 0), 8) * 90ms);
}
.motion [data-reveal]:not(.is-in){ opacity: 0; transform: translate3d(0, 30px, 0); }
.motion [data-reveal="fade"]:not(.is-in){ transform: none; }
.motion [data-reveal="left"]:not(.is-in){ transform: translate3d(-36px, 0, 0); }
.motion [data-reveal="right"]:not(.is-in){ transform: translate3d(36px, 0, 0); }
.motion [data-reveal="clip"]:not(.is-in){ transform: translate3d(0, 40px, 0) scale(.96); }
.motion [data-reveal="clip"] video{ transition: transform 1.8s var(--ease); }
.motion [data-reveal="clip"]:not(.is-in) video{ transform: scale(1.18); }
@media (max-width: 680px){
  .motion [data-reveal="left"]:not(.is-in), .motion [data-reveal="right"]:not(.is-in){ transform: translate3d(0, 24px, 0); }
}
.motion .ornament[data-reveal]:not(.is-in){ transform: scaleX(.2); }

/* ---------- confirmació: el correu encara s'ha d'enviar ---------- */
.confirmation-warning{
  margin: 0 0 22px; padding: 16px 20px; max-width: none;
  background: var(--bronze-tint); border-left: 3px solid var(--bronze-deep);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  color: var(--ink); font-size: 1rem; line-height: 1.5;
}
.email-actions{ display:flex; flex-wrap:wrap; gap: 12px; margin: 4px 0 0; }
.email-actions .btn{ text-decoration:none; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
#btn-email-backup{ margin: 0; }
.confirmation-or{ margin: 26px 0 12px; font-size: .92rem; color: var(--graphite); }
@media (max-width: 560px){
  .email-actions .btn{ flex: 1 1 100%; }
}

/* Targeta de vídeo vertical: ocupa dues files a l'escriptori perquè no quedin buits */
@media (min-width: 900px){
  .videos-grid{ grid-auto-flow: dense; }
  .video-card--vertical{ grid-row: span 2; }
  .video-card--vertical .video-placeholder{ aspect-ratio: 9/14; }
}