/* ═══════════════════════════════════════════════════════════
   DAVIDvsGOLIAT — llum de matí
   paper · tinta · ambre — Fraunces / Space Grotesk / IBM Plex Mono
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:    #f5efe2;
  --paper-2:  #efe6d2;
  --paper-3:  #e7dbc1;
  --ink:      #241a0d;
  --ink-70:   rgba(36,26,13,.72);
  --ink-45:   rgba(36,26,13,.5);
  --ink-25:   rgba(36,26,13,.32);
  --gold:     #b06e20;
  --gold-deep:#8a5716;
  --gold-free:#c4833a;
  --gold-soft:#dfa958;
  --gold-dim: rgba(176,110,32,.35);
  --oxide:    #b8432a;
  --ash:      #97897a;
  --line:     rgba(36,26,13,.16);
  --night:    #17110a;   /* elements foscos puntuals: telèfon, footer */
  --night-2:  #211809;
  --bone:     #ece2cf;
  --bone-45:  rgba(236,226,207,.5);
  --brand: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Space Grotesk', 'Helvetica Neue', sans-serif;
  --mono:  'IBM Plex Mono', 'SF Mono', monospace;
  --ease-out: cubic-bezier(.19,1,.22,1);
  --pad: clamp(20px, 4vw, 56px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
[id]{ scroll-margin-top:84px; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:380;
  font-size:clamp(15px, 1.05vw, 17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--ink); color:var(--paper); }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, input{ font:inherit; }

.container{
  width:min(1240px, 100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.mono{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* gra de paper */
.grain{
  position:fixed; inset:-50%;
  width:200%; height:200%;
  pointer-events:none;
  z-index:60;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-2%,2%); }
  40%{ transform:translate(2%,-1%); }
  60%{ transform:translate(-1%,-2%); }
  80%{ transform:translate(1%,1%); }
}

/* ─────────────── NAV ─────────────── */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  transition:background .5s, backdrop-filter .5s, padding .5s, box-shadow .5s;
}
.nav.scrolled{
  background:rgba(245,239,226,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-block:12px;
  border-bottom:1px solid var(--line);
}
/* logotip de marca — Playfair Display, la tipografia oficial */
.nav-brand{
  font-family:var(--brand);
  font-weight:700;
  font-size:25px;
  line-height:1;
  letter-spacing:-.012em;
  white-space:nowrap;
  color:var(--ink);
}
.nav-brand i{ font-style:normal; color:var(--gold); }
/* a escriptori el contenidor no existeix: els fills són fills directes de .nav */
.nav-menu{ display:contents; }
.nav-links{
  display:flex; gap:clamp(16px, 3vw, 40px);
}
.nav-links a{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-70);
  transition:color .3s;
}
.nav-links a:hover{ color:var(--gold-deep); }

.nav-right{
  display:flex;
  align-items:center;
  gap:clamp(14px, 2vw, 24px);
}
.nav-pro{
  position:relative;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-70);
  white-space:nowrap;
  padding-left:clamp(15px, 2vw, 22px);
  transition:color .3s;
}
.nav-pro::before{           /* separador respecte dels enllaços de secció */
  content:'';
  position:absolute;
  left:0; top:50%;
  width:1px; height:1.15em;
  transform:translateY(-50%);
  background:var(--line);
}
.nav-pro:hover{ color:var(--gold-deep); }

/* botó compacte que només surt a la capçalera del mòbil
   (.nav abans de la classe per guanyar a .btn{display:inline-flex}) */
.nav .nav-cta-mobile{ display:none; }

.nav-burger{
  display:none;
  position:relative;
  width:44px; height:44px;
  margin-right:-11px;
  border:none;
  background:none;
  color:var(--ink);
  cursor:pointer;
}
.nav-burger span{
  position:absolute;
  left:11px; right:11px;
  height:1.5px;
  background:currentColor;
  transition:transform .45s var(--ease-out), opacity .3s;
}
.nav-burger span:nth-child(1){ top:18px; }
.nav-burger span:nth-child(2){ top:25px; }
.nav.open .nav-burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
.nav-burger:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; border-radius:6px; }

/* ─────────────── BOTONS ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6em;
  padding:1.05em 2.1em;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .45s var(--ease-out), background .3s, color .3s, border-color .3s, box-shadow .45s;
}
.btn:active{ transform:scale(.97); }
.btn:focus-visible, a:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:4px;
  border-radius:4px;
}
.btn:focus-visible{ border-radius:999px; }
.btn-gold{
  background:var(--ink);
  color:var(--paper);
}
.btn-gold:hover{
  background:var(--gold-deep);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 40px -12px rgba(138,87,22,.5);
}
.btn-ghost{
  border-color:var(--ink-25);
  color:var(--ink);
  background:transparent;
}
.btn-ghost:hover{
  border-color:var(--gold-deep);
  color:var(--gold-deep);
  transform:translateY(-2px);
}
.btn-s{ padding:.85em 1.6em; font-size:.68rem; }

/* ─────────────── HERO ─────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
}
#city{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 28% 42%, rgba(245,239,226,.92) 0%, rgba(245,239,226,.55) 45%, rgba(245,239,226,.1) 100%),
    linear-gradient(to bottom, rgba(245,239,226,.8), transparent 30%, transparent 70%, var(--paper) 100%);
}
.hero-inner{
  position:relative;
  padding-block:140px 120px;
}
.kicker{
  color:var(--gold-deep);
  margin-bottom:2.2rem;
}
.hero-title{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:450;
  font-size:clamp(3.4rem, 10.5vw, 9.4rem);
  line-height:.97;
  letter-spacing:-.015em;
  margin-bottom:2.4rem;
  max-width:12ch;
}
.hero-title em, .sec-title em, .vs-title em, .finale-title em{
  font-style:italic;
  font-weight:400;
  color:var(--gold);
}
.ht-line{ display:block; overflow:hidden; }
.ht-line > span{
  display:block;
  transform:translateY(110%);
  animation:rise 1.1s var(--ease-out) forwards;
}
.ht-line:nth-child(2) > span{ animation-delay:.12s; }
.ht-line:nth-child(3) > span{ animation-delay:.24s; }
@keyframes rise{ to{ transform:translateY(0); } }

.hero-sub{
  max-width:44ch;
  color:var(--ink-70);
  font-size:clamp(1rem, 1.3vw, 1.18rem);
  margin-bottom:3rem;
  opacity:0;
  animation:fade 1s ease .55s forwards;
}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:16px;
  opacity:0;
  animation:fade 1s ease .75s forwards;
}
.hero-micro{
  margin-top:1.1rem;
  color:var(--ink-45);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:none;
  opacity:0;
  animation:fade 1s ease .9s forwards;
}
@keyframes fade{ to{ opacity:1; } }

.hero-foot{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  color:var(--ink-45);
  font-size:.62rem;
  letter-spacing:.22em;
}
.hero-scroll{
  color:var(--gold-deep);
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(-3px); opacity:.5; }
  50%{ transform:translateY(3px); opacity:1; }
}

/* ─────────────── TICKER ─────────────── */
.ticker{
  border-block:1px solid var(--line);
  overflow:hidden;
  background:var(--ink);
}
.ticker-track{
  display:flex;
  width:max-content;
  padding-block:14px;
  color:var(--gold-soft);
  font-size:.7rem;
  animation:ticker 36s linear infinite;
}
.ticker-track span{ white-space:pre; }
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ─────────────── SECCIONS ─────────────── */
.section{
  padding-block:clamp(90px, 12vw, 170px);
  position:relative;
}
.sec-label{
  color:var(--gold-deep);
  margin-bottom:1.6rem;
  display:flex; align-items:center; gap:14px;
}
.sec-label span{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.2em; height:2.2em;
  border:1px solid var(--gold-dim);
  border-radius:50%;
  font-size:.9em;
}
.sec-title{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:450;
  font-size:clamp(2.4rem, 5.6vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.01em;
  margin-bottom:clamp(3rem, 6vw, 5.5rem);
  max-width:22ch;
  text-wrap:balance;
}
.sec-sub{
  color:var(--ink-70);
  max-width:52ch;
  margin-top:calc(-1 * clamp(2rem, 4vw, 3.5rem));
  margin-bottom:clamp(2.5rem, 5vw, 4.5rem);
}

/* reveals */
.reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s ease, transform 1.1s var(--ease-out);
}
.reveal.in{
  opacity:1;
  transform:none;
}

/* ─────────────── ACTES ─────────────── */
.acts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.5vw, 36px);
}
.act{
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(22px, 2.4vw, 34px);
  background:#faf5ea;
  box-shadow:0 20px 50px -30px rgba(36,26,13,.25);
  transition:border-color .4s, transform .6s var(--ease-out),
             opacity .9s ease, box-shadow .6s;
}
.act:hover{
  border-color:var(--gold-dim);
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(36,26,13,.35);
}
.act.reveal{ transform:translateY(34px); }
.act.reveal.in{ transform:none; }
.act.reveal.in:hover{ transform:translateY(-6px); }
.act:nth-child(2){ transition-delay:.1s; }
.act:nth-child(3){ transition-delay:.2s; }

.act-visual{
  aspect-ratio:320/220;
  margin-bottom:1.6rem;
  border-radius:12px;
  background:var(--paper-2);
  overflow:hidden;
}
.act-visual svg{ width:100%; height:100%; display:block; }
.act-title{
  font-family:var(--serif);
  font-weight:480;
  font-size:1.7rem;
  margin-bottom:.7rem;
  display:flex; align-items:baseline; gap:1em;
}
.act-n{
  color:var(--gold-deep);
  font-size:.65rem;
  letter-spacing:.18em;
}
.act p{
  color:var(--ink-70);
  font-size:.95rem;
  max-width:34ch;
}

/* svg comuns */
.mono-svg{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  fill:var(--ink-45);
}

/* acte 1 — vigila */
.w-line{
  stroke:var(--ink-25);
  stroke-width:1;
  stroke-dasharray:3 5;
  fill:none;
}
.w-dot{
  fill:var(--gold-deep);
  animation:wdot 2.8s linear infinite;
}
.w-dot.d2{ animation-delay:.9s; }
.w-dot.d3{ animation-delay:1.8s; }
@keyframes wdot{
  0%{ transform:translateX(0); opacity:0; }
  8%{ opacity:1; }
  86%{ opacity:1; }
  100%{ transform:translateX(226px); opacity:0; }
}
.w-eye{
  fill:none;
  stroke:var(--gold-deep);
  stroke-width:1.5;
}
.w-pupil{
  fill:var(--gold-deep);
  animation:pupil 4s ease-in-out infinite;
}
@keyframes pupil{
  0%,100%{ transform:translate(0,0); }
  30%{ transform:translate(-3px,2px); }
  65%{ transform:translate(3px,-2px); }
}

/* acte 2 — dial */
.dial-track{
  fill:none;
  stroke:var(--line);
  stroke-width:6;
  stroke-linecap:round;
}
.dial-fill{
  fill:none;
  stroke:var(--ash);
  stroke-width:6;
  stroke-linecap:round;
  transition:stroke .4s;
}
.dial-fill.hot{ stroke:var(--gold); }
.dial-70{
  stroke:var(--oxide);
  stroke-width:2;
}
.dial-num{
  font-size:52px;
  letter-spacing:0;
  fill:var(--ink);
}
.dial-num.hot{ fill:var(--gold-deep); }
.dial-verdict{
  font-size:10px;
  letter-spacing:.22em;
  fill:var(--ash);
}
.dial-verdict.hot{ fill:var(--gold-deep); }

/* acte 3 — avisa */
.ping{
  fill:none;
  stroke:var(--gold-deep);
  stroke-width:1.2;
  opacity:0;
  transform-origin:160px 104px;
  animation:ping 3s ease-out infinite;
}
.ping.p2{ animation-delay:1.5s; }
@keyframes ping{
  0%{ transform:scale(.4); opacity:.9; }
  80%{ transform:scale(2.4); opacity:0; }
  100%{ opacity:0; }
}
.plane path{
  fill:var(--gold-deep);
  transform-origin:160px 104px;
  animation:plane 3s ease-in-out infinite;
}
@keyframes plane{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  50%{ transform:translate(4px,-5px) rotate(4deg); }
}
.alert-tag{ fill:var(--gold-deep); font-size:10px; }

/* ─────────────── ALERTA ─────────────── */
.section-alerta{
  background:
    radial-gradient(60% 70% at 70% 40%, rgba(176,110,32,.07), transparent 70%),
    var(--paper-2);
  border-block:1px solid var(--line);
}
.alert-stage{
  display:grid;
  grid-template-columns:minmax(300px, 420px) 1fr;
  gap:clamp(40px, 6vw, 100px);
  align-items:center;
}
/* el telèfon manté la nit a dins: Telegram fosc sobre paper clar */
.phone-wrap{ position:relative; }
.phone-wrap::before{
  content:'';
  position:absolute; inset:-8% -12%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(176,110,32,.16), transparent 70%);
  animation:glow 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glow{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}
.phone{
  position:relative;
  border:1px solid rgba(36,26,13,.3);
  border-radius:28px;
  background:var(--night);
  color:var(--bone);
  box-shadow:
    0 40px 90px -30px rgba(36,26,13,.5),
    0 0 60px -20px rgba(176,110,32,.2);
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  animation:levitate 7s ease-in-out infinite;
}
@keyframes levitate{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -10px; }
}
.phone-head{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px;
  border-bottom:1px solid rgba(236,226,207,.14);
  background:rgba(236,226,207,.04);
}
.phone-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--gold-soft);
  color:var(--night);
  display:flex; align-items:center; justify-content:center;
  font-weight:500;
}
.phone-id strong{
  display:block;
  font-weight:500;
  font-size:.95rem;
  letter-spacing:.01em;
}
.phone-id .mono{
  color:var(--bone-45);
  font-size:.6rem;
}
.phone-body{ padding:22px; }
.msg{
  background:var(--night-2);
  border:1px solid rgba(223,169,88,.25);
  border-radius:6px 18px 18px 18px;
  padding:18px 20px;
  display:grid;
  gap:10px;
}
.msg-flag{
  color:var(--gold-soft);
  font-size:.62rem;
}
.msg-place{
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:460;
  line-height:1.1;
}
.msg-data{
  color:rgba(236,226,207,.75);
  font-size:.68rem;
  text-transform:none;
  letter-spacing:.06em;
}
.msg-data.dim{ color:var(--bone-45); }
.msg-score{
  display:grid;
  gap:8px;
  padding-block:4px;
}
.msg-score .mono{
  color:var(--gold-soft);
  font-size:.62rem;
}
.msg-score-bar{
  position:relative;
  height:6px;
  border-radius:3px;
  background:rgba(236,226,207,.12);
  overflow:visible;
}
.msg-score-bar i{
  position:absolute; inset:0;
  width:var(--w);
  border-radius:3px;
  background:linear-gradient(90deg, #c98f3e, #ffc372);
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1.4s var(--ease-out) .4s;
}
.in .msg-score-bar i{ transform:scaleX(1); }
.msg-score-70{
  position:absolute;
  left:70%; top:-4px; bottom:-4px;
  width:2px;
  background:var(--oxide);
}
.msg-link{
  color:var(--gold-soft);
  font-size:.85rem;
  border-top:1px solid rgba(236,226,207,.14);
  padding-top:12px;
}

.alert-notes{
  list-style:none;
  display:grid;
  gap:clamp(24px, 3vw, 40px);
}
.alert-notes li{
  display:flex;
  gap:20px;
  align-items:baseline;
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight:420;
  line-height:1.35;
  max-width:26ch;
}
.alert-notes li:nth-child(2){ transition-delay:.12s; }
.alert-notes li:nth-child(3){ transition-delay:.24s; }
.note-n{
  flex:none;
  width:2em; height:2em;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-dim);
  border-radius:50%;
  color:var(--gold-deep);
  font-size:.7rem;
}

/* ─────────────── LA BATALLA ─────────────── */
.vs{
  background:var(--paper);
}
.vs .sec-label{ color:var(--oxide); }
.vs .sec-label span{ border-color:rgba(184,67,42,.4); }
.vs-grid{
  display:grid;
  grid-template-columns:1fr minmax(260px, 380px) 1fr;
  gap:clamp(24px, 4vw, 60px);
  align-items:center;
  margin-block:clamp(30px, 4vw, 60px);
}
.vs-art img{
  width:100%;
  mix-blend-mode:multiply;
  filter:contrast(1.05);
}
.vs-col h3{
  font-size:.72rem;
  letter-spacing:.3em;
  margin-bottom:1.4rem;
  color:var(--oxide);
}
.vs-david{ text-align:right; }
.vs-col ul{
  list-style:none;
  display:grid; gap:.9rem;
  font-family:var(--serif);
  font-size:clamp(1.05rem, 1.6vw, 1.4rem);
  line-height:1.3;
}
.vs-goliat ul{ color:var(--ink-45); }
.vs-david ul{ color:var(--ink); font-weight:480; }
.vs-title{
  font-family:var(--serif);
  font-weight:450;
  font-size:clamp(2.2rem, 5vw, 4.2rem);
  line-height:1.08;
  text-align:center;
  margin-block:clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem);
  text-wrap:balance;
}
.vs-title em{ color:var(--oxide); }
.vs-quote{
  max-width:52ch;
  margin-inline:auto;
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:2.5rem;
}
.vs-quote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.1rem, 1.7vw, 1.45rem);
  color:var(--ink-70);
  margin-bottom:1rem;
}
.vs-quote cite{
  font-style:normal;
  color:var(--ink-45);
  font-size:.62rem;
}

/* ─────────────── STATS ─────────────── */
.stats{
  border-block:1px solid var(--line);
  background:var(--ink);
  color:var(--bone);
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  text-align:center;
}
.stat{
  padding:clamp(28px, 3vw, 44px) 12px;
  border-left:1px solid rgba(236,226,207,.14);
}
.stat:first-child{ border-left:none; }
.stat b{
  display:block;
  font-family:var(--serif);
  font-weight:430;
  font-size:clamp(2rem, 4vw, 3.4rem);
  color:var(--gold-soft);
  line-height:1;
  margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
}
.stat span{
  color:var(--bone-45);
  font-size:.62rem;
}

/* ─────────────── PLANS ─────────────── */
.budget{
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(26px, 3.5vw, 48px);
  background:#faf5ea;
  box-shadow:0 20px 50px -30px rgba(36,26,13,.25);
  margin-bottom:clamp(40px, 5vw, 64px);
  display:grid;
  gap:18px;
}
.budget label{ color:var(--ink-45); }
.budget-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.budget-result{
  color:var(--ink-45);
  font-size:.68rem;
}
.budget-result b{
  color:var(--gold-deep);
  font-size:1.15em;
}
.budget-out{
  font-family:var(--serif);
  font-weight:450;
  font-size:clamp(2.6rem, 5vw, 4rem);
  color:var(--gold-deep);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
#budgetRange{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:4px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--gold) var(--fill,50%), rgba(36,26,13,.15) var(--fill,50%));
  outline:none;
  cursor:pointer;
}
#budgetRange::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--gold-deep);
  border:5px solid #faf5ea;
  box-shadow:0 0 0 1px var(--gold-deep), 0 6px 18px rgba(36,26,13,.3);
  transition:transform .2s;
}
#budgetRange::-webkit-slider-thumb:hover{ transform:scale(1.15); }
#budgetRange::-moz-range-thumb{
  width:16px; height:16px;
  border-radius:50%;
  background:var(--gold-deep);
  border:none;
  box-shadow:0 0 0 1px var(--gold-deep);
}
#budgetRange:focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:8px;
}
.spectrum{
  display:grid;
  grid-template-columns:250fr 150fr 150fr; /* domini del slider: 50k–600k */
  gap:6px;
  font-size:.58rem;
}
.spec-seg{
  display:grid;
  gap:8px;
  color:var(--ink-45);
  transition:color .3s;
}
.spec-seg i{
  height:3px;
  border-radius:2px;
  background:rgba(36,26,13,.15);
  transition:background .3s;
}
.spec-seg.on{ color:var(--gold-deep); }
.spec-seg.on i{ background:var(--gold); }

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.5vw, 32px);
  align-items:stretch;
}
.plan{
  position:relative;
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(26px, 3vw, 40px);
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  background:#faf5ea;
  box-shadow:0 20px 50px -30px rgba(36,26,13,.25);
  transition:border-color .4s, transform .6s var(--ease-out), opacity .9s ease;
}
.plan:hover{ border-color:var(--gold-dim); }
.plan:nth-child(2){ transition-delay:.08s; }
.plan:nth-child(3){ transition-delay:.16s; }
.plan h3{
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--ink-70);
}
.plan-price b{
  font-family:var(--serif);
  font-weight:450;
  font-size:clamp(2.4rem, 3.5vw, 3.2rem);
  color:var(--ink);
}
.plan-price span{
  color:var(--ink-45);
  font-family:var(--mono);
  font-size:.72rem;
  margin-left:.4em;
}
.budget-out .eur{
  font-family:var(--mono);
  font-size:.38em;
  letter-spacing:.06em;
  color:var(--ink-45);
  margin-left:.3em;
}
.plan ul{
  list-style:none;
  display:grid;
  gap:.75rem;
  color:var(--ink-70);
  font-size:.92rem;
  flex:1;
}
.plan ul li{
  padding-left:1.4em;
  position:relative;
}
.plan ul li::before{
  content:'◆';
  position:absolute; left:0;
  color:var(--gold);
  font-size:.6em;
  top:.55em;
}
.plan .btn{ align-self:flex-start; }
.plan-best{
  border-color:var(--gold-dim);
  background:linear-gradient(160deg, rgba(176,110,32,.1), #faf5ea 55%);
}
.plan-tag{
  position:absolute;
  top:-11px; left:50%;
  transform:translateX(-50%);
  background:var(--gold-deep);
  color:var(--paper);
  padding:4px 14px;
  border-radius:999px;
  font-size:.58rem;
  letter-spacing:.18em;
  white-space:nowrap;
}
.plan-fine{
  color:var(--ink-45);
  font-size:.58rem;
  letter-spacing:.12em;
  margin-top:-.9rem;
}
.plans-fine{
  text-align:center;
  color:var(--ink-45);
  margin-top:clamp(30px, 4vw, 48px);
  font-size:.62rem;
}

/* ─────────────── FAQ ─────────────── */
.section-faq{
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.faq-list{
  max-width:760px;
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:clamp(18px, 2.4vw, 26px) 4px;
  font-family:var(--serif);
  font-size:clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight:480;
  transition:color .3s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--gold-deep); }
.faq-x{
  font-family:var(--mono);
  color:var(--gold-deep);
  font-size:1.1rem;
  transition:transform .4s var(--ease-out);
  flex:none;
}
.faq-item[open] .faq-x{ transform:rotate(45deg); }
.faq-item p{
  padding:0 4px clamp(20px, 2.4vw, 28px);
  color:var(--ink-70);
  max-width:58ch;
}
.faq-item p a{
  color:var(--gold-deep);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ─────────────── FINALE ─────────────── */
.finale{
  position:relative;
  padding-block:clamp(120px, 16vw, 220px);
  overflow:hidden;
}
.finale-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to bottom, var(--paper-2) 0%, rgba(245,239,226,.82) 30%, rgba(245,239,226,.82) 70%, var(--paper) 100%),
    url('../assets/eixample-grid.jpg');
  background-size:cover;
  background-position:center;
  filter:sepia(.25) saturate(.8);
}
.finale-inner{
  position:relative;
  text-align:center;
  display:grid;
  justify-items:center;
  gap:3rem;
}
.finale-title{
  font-family:var(--serif);
  font-weight:450;
  font-size:clamp(2.4rem, 6vw, 5.4rem);
  line-height:1.06;
  letter-spacing:-.01em;
}

/* ─────────────── FOOTER ─────────────── */
.footer{
  border-top:1px solid var(--line);
  background:var(--ink);
  color:var(--bone);
  padding-block:clamp(50px, 6vw, 80px) 30px;
}
.footer .nav-brand-vs{ color:var(--gold-soft); }
.footer-tag{
  font-family:var(--serif);
  font-style:italic;
  color:var(--bone-45);
  margin-top:1rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(30px, 4vw, 60px);
  margin-bottom:clamp(40px, 5vw, 70px);
}
.footer-col{
  display:grid;
  gap:.9rem;
  align-content:start;
  font-size:.64rem;
}
.footer-col a{
  color:var(--bone-45);
  transition:color .3s;
}
.footer-col a:hover{ color:var(--gold-soft); }
.footer-base{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid rgba(236,226,207,.14);
  padding-top:24px;
  color:rgba(236,226,207,.35);
  font-size:.58rem;
  letter-spacing:.08em;
  text-transform:none;
}

/* ─────────────── BARRA FIXA (només mòbil) ─────────────── */
.stickybar{
  display:none;                    /* s'activa al media query de mòbil */
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;                      /* per sota del menú (.nav, z-index 50) */
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(23,17,10,.82);   /* --night amb transparència */
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(236,226,207,.16);
}
.stickybar .btn{
  width:100%;
  min-height:52px;
  background:var(--gold-soft);
  color:var(--night);
}
.stickybar .btn:hover{ background:var(--gold-soft); color:var(--night); }
.stickybar .btn:focus-visible{ outline-color:var(--gold-soft); }
/* amaga la barra mentre el menú està obert */
.nav.open ~ .stickybar{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: no-preference){
  .stickybar{ transition:opacity .3s ease; }
}

/* ─────────────── SCROLL-DRIVEN (progressive) ─────────────── */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-inner{
      animation:heroDrift linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    .vs-art img{
      animation:artFloat linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    .finale-title{
      animation:finaleRise linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 45%;
    }
    /* el scroll mana; desactiva el reveal genèric per evitar doble efecte */
    .finale-title.reveal{ opacity:1; transform:none; transition:none; }
  }
}
@keyframes heroDrift{
  to{ transform:translateY(-90px); opacity:.25; }
}
@keyframes artFloat{
  from{ transform:translateY(6%); }
  to{ transform:translateY(-6%); }
}
@keyframes finaleRise{
  from{ transform:translateY(60px) scale(.97); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 1020px){
  /* la navegació passa a menú desplegable sota la capçalera */
  .nav-burger{ display:block; }
  .nav-brand{ font-size:21px; }
  .nav .nav-cta-mobile{ display:inline-flex; margin-left:auto; margin-right:18px; }
  .nav.open{ background:var(--paper); }
  .nav-menu{
    display:flex;
    flex-direction:column;
    gap:20px;
    position:absolute;
    top:100%; left:0; right:0;
    padding:4px var(--pad) 26px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(36,26,13,.45);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .35s ease, transform .45s var(--ease-out), visibility .35s;
  }
  .nav.open .nav-menu{ opacity:1; visibility:visible; transform:none; }
  .nav-links{ flex-direction:column; gap:18px; }
  .nav-links a{ font-size:.72rem; }
  .nav-right{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    padding-top:20px;
    border-top:1px solid var(--line);
  }
  .nav-free{
    padding-left:0;
    font-size:.72rem;
  }
  .nav-free::before{ display:none; }

  .acts{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
  .alert-stage{ grid-template-columns:1fr; }
  .phone{ max-width:420px; margin-inline:auto; }
  .plans-grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .vs-grid{
    grid-template-columns:1fr 1fr;
  }
  .vs-art{
    grid-column:1 / -1;
    order:-1;
    max-width:320px;
    margin-inline:auto;
  }
}
@media (max-width: 767px){
  /* barra fixa d'accés al canal gratuït */
  .stickybar{ display:block; }
  body{ padding-bottom:88px; }     /* deixa lloc perquè no tapi el footer */
  .nav-brand{ font-size:19px; }
  .nav-cta-mobile{ margin-right:14px; padding:.7em 1.15em; font-size:.62rem; }
}

@media (max-width: 720px){
  .stats-row{ grid-template-columns:1fr 1fr; }
  .stat:nth-child(3){ border-left:none; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom:1px solid rgba(236,226,207,.14); }
  .footer-grid{ grid-template-columns:1fr; }
  .vs-grid{ grid-template-columns:1fr; }
  .vs-david{ text-align:left; }
  .hero-foot span:first-child{ display:none; }
  .alert-notes li{ max-width:none; }
  .spectrum span{ font-size:.52rem; letter-spacing:.08em; }
  .budget-row{ flex-direction:column; align-items:flex-start; }
}

/* ─────────────── REDUCED MOTION ─────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ht-line > span{ transform:none; animation:none; }
  .hero-sub, .hero-cta{ opacity:1; animation:none; }
  .reveal{ opacity:1; transform:none; }
  .grain{ animation:none; }
  .ticker-track{ animation:none; }
  .msg-score-bar i{ transform:scaleX(1); }
}