/* ==========================================================================
   ELVORA — Full d'estils principal
   Estètica: PREMIUM i càlida. Taronja de marca usat amb mesura sobre fons
   neutres, tipografia cuidada, molt d'aire i microinteraccions subtils.
   Mobile-first · sense frameworks · variables CSS · animacions GPU.
   Objectiu: sensació d'agència top sense penalitzar Core Web Vitals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES GLOBALS
   -------------------------------------------------------------------------- */
:root{
  /* Colors de marca (taronja del logo, usat amb mesura) */
  --color-primary: #F26419;
  --color-primary-dark: #C9490D;
  --color-primary-light: #FF8A45;
  --color-ember: #B83A0A;        /* taronja profund per a profunditat */

  /* Accents càlids (suavitzats, sense neó) */
  --color-amber: #F4A22B;        /* daurat càlid */
  --color-coral: #F2674A;        /* terracota suau (ús puntual) */
  --color-violet: #8B5E83;       /* malva apagat, només per a profunditat del hero */

  /* Degradats — dominància taronja, refinats */
  --gradient-primary: linear-gradient(135deg,#FF8A45 0%,#F26419 55%,#C9490D 100%);
  --gradient-vibrant: linear-gradient(120deg,#F4A22B 0%,#F26419 55%,#D24E10 100%);
  --gradient-warm: linear-gradient(135deg,#F4A22B 0%,#F26419 60%,#E0531A 100%);
  --gradient-text: linear-gradient(100deg,#F4A22B 0%,#F26419 55%,#E0531A 100%);

  /* Neutres càlids i sofisticats */
  --color-dark: #1A1410;          /* gairebé negre, càlid */
  --color-dark-soft: #2A211B;
  --color-bg: #FFFCFA;            /* blanc amb tint càlid molt subtil */
  --color-bg-tint: #FBF3EC;       /* secció tintada (préssec suau) */
  --color-white: #FFFFFF;
  --color-ink: #3A332D;           /* text secundari fort */
  --color-gray: #6A6258;          /* text secundari */
  --color-gray-light: #EAE1D8;    /* línies i vores fines */
  --color-line: #ECE4DC;
  --color-success: #15803D;
  --color-error: #DC2626;

  /* Tipografia */
  --font-base: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espaiat fluid (una mica més generós) */
  --space-xs: clamp(.5rem, .42rem + .3vw, .75rem);
  --space-sm: clamp(.8rem, .65rem + .55vw, 1.3rem);
  --space-md: clamp(1.6rem, 1.25rem + 1.1vw, 2.6rem);
  --space-lg: clamp(2.75rem, 2.1rem + 2.2vw, 5rem);
  --space-xl: clamp(4.5rem, 3.3rem + 4.4vw, 8.5rem);

  /* Mides de tipus fluides (hero una mica més contingut = més elegant) */
  --fs-hero: clamp(2.5rem, 1.55rem + 4.4vw, 4.6rem);
  --fs-h1: clamp(2.1rem, 1.45rem + 2.8vw, 3.7rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.8rem);
  --fs-h3: clamp(1.2rem, 1.06rem + .55vw, 1.45rem);
  --fs-body: clamp(1rem, .96rem + .18vw, 1.13rem);
  --fs-lead: clamp(1.1rem, 1rem + .55vw, 1.35rem);
  --fs-small: .9rem;

  /* Altres */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --shadow-sm: 0 2px 10px rgba(26,20,16,.05), 0 8px 22px rgba(26,20,16,.045);
  --shadow-md: 0 10px 30px rgba(26,20,16,.08), 0 24px 60px rgba(26,20,16,.06);
  --shadow-lg: 0 18px 48px rgba(26,20,16,.12), 0 40px 90px rgba(26,20,16,.08);
  --shadow-glow: 0 14px 36px rgba(242,100,25,.18);
  --shadow-glow-coral: 0 14px 36px rgba(242,103,74,.20);
  --transition-fast: .2s ease;
  --transition-base: .45s cubic-bezier(.22,.61,.36,1);
  --header-h: 80px;
  --container-w: 1180px;
}

/* --------------------------------------------------------------------------
   2. RESET I BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ overflow-x:clip; }
body{
  font-family:var(--font-base);
  font-size:var(--fs-body);
  font-weight:400;
  color:var(--color-dark);
  background:var(--color-bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
h1,h2,h3,h4{ line-height:1.12; font-weight:800; letter-spacing:-.02em; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:700; letter-spacing:-.01em; }
strong{ font-weight:700; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
::selection{ background:var(--color-primary); color:#fff; }
:focus-visible{ outline:3px solid var(--color-primary); outline-offset:3px; border-radius:4px; }
/* Skip link (accessibilitat WCAG 2.4.1): ocult fora de pantalla fins a rebre focus amb teclat */
.skip-link{ position:fixed; left:8px; top:-60px; z-index:10000; padding:.7rem 1.15rem; background:var(--color-primary-dark); color:#fff; font-weight:700; text-decoration:none; border-radius:0 0 8px 8px; box-shadow:0 6px 22px rgba(0,0,0,.18); transition:top .18s ease; }
.skip-link:focus{ top:0; }

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

/* --------------------------------------------------------------------------
   3. LAYOUT / UTILITATS
   -------------------------------------------------------------------------- */
.container{
  width:100%; max-width:var(--container-w);
  margin-inline:auto; padding-inline:var(--space-md);
}
.container--narrow{ max-width:840px; }
.section{ padding-block:var(--space-xl); position:relative; }
.section--tint{ background:var(--color-bg-tint); }
.section--white{ background:var(--color-white); }
.section--dark{ background:var(--color-dark); color:rgba(255,255,255,.80); }
.section--dark h2,.section--dark h3{ color:#fff; }
.section--gradient{ background:var(--color-dark); color:rgba(255,255,255,.82); position:relative; overflow:hidden; }
.section--gradient h2,.section--gradient .section__eyebrow{ color:#fff; }

/* Separadors subtils entre seccions del mateix to */
.section--white + .section--white{ border-top:1px solid var(--color-line); }

/* Capçalera de secció */
.section__head{ max-width:720px; margin-bottom:var(--space-lg); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--color-primary); margin-bottom:var(--space-sm);
}
.section__eyebrow::before{
  content:''; width:24px; height:2px; border-radius:2px; background:var(--gradient-warm);
}
.section__head--center .section__eyebrow{ justify-content:center; }
.section__title{ color:var(--color-dark); margin-bottom:var(--space-sm); }
.section--dark .section__title,.section--gradient .section__title{ color:#fff; }
.section__desc{ color:var(--color-gray); font-size:var(--fs-lead); line-height:1.6; }
.section--dark .section__desc{ color:rgba(255,255,255,.70); }
.text-center{ text-align:center; }
.text-gradient{
  background:var(--gradient-text); -webkit-background-clip:text; background-clip:text;
  color:transparent; padding-right:.05em;
}

/* Utilitats d'espaiat (substitueixen els antics style= en línia) */
.mt-xs{ margin-top:var(--space-xs); }
.mt-sm{ margin-top:var(--space-sm); }
.mt-md{ margin-top:var(--space-md); }
.mt-lg{ margin-top:var(--space-lg); }
.fs-h3{ font-size:var(--fs-h3); }

/* Cinta divisòria de color */
.divider-glow{ height:4px; background:var(--gradient-vibrant); }

/* Botons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.9rem; border-radius:999px;
  font-weight:700; font-size:.96rem; letter-spacing:.01em;
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space:nowrap;
}
.btn--primary{ background:var(--gradient-vibrant); color:#fff; box-shadow:var(--shadow-glow); }
.btn--primary::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(120deg,#F26419,#C9490D);
  transition:opacity var(--transition-base);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(242,100,25,.30); }
.btn--primary:hover::after{ opacity:1; }
.btn--ghost{ background:transparent; color:var(--color-dark); border:1.5px solid var(--color-gray-light); }
.btn--ghost:hover{ border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); }
/* Variant "ghost" per a fons foscos (substitueix els style= en línia sobre el hero/CTA) */
.btn--ghost-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.12); color:#fff; transform:translateY(-2px); }
.btn--light{ background:#fff; color:var(--color-primary-dark); box-shadow:var(--shadow-md); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--whatsapp{ background:#25D366; color:#fff; box-shadow:0 12px 30px rgba(37,211,102,.28); }
.btn--whatsapp:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(37,211,102,.38); }
.btn--lg{ padding:1.1rem 2.3rem; font-size:1.04rem; }
.btn--block{ width:100%; }
.btn:active{ transform:translateY(0) scale(.99); }
.cta-group{ display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.cta-group--center{ justify-content:center; }

/* --------------------------------------------------------------------------
   4. HEADER / NAVEGACIÓ
   -------------------------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(255,252,250,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background var(--transition-base), height var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.header.is-scrolled{
  height:66px; background:rgba(255,252,250,.94);
  box-shadow:var(--shadow-sm); border-bottom-color:var(--color-line);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:var(--space-md); }
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:38px; width:auto; transition:height var(--transition-base); }
.header.is-scrolled .brand img{ height:32px; }
.nav{ display:flex; align-items:center; gap:clamp(1.25rem, 1rem + 1.2vw, 2.25rem); }
.nav__list{ display:flex; gap:clamp(1rem, .85rem + .7vw, 1.5rem); flex-shrink:0; }
.nav__list li{ flex-shrink:0; }
.nav__link{
  font-size:.94rem; font-weight:600; color:var(--color-ink);
  position:relative; padding-block:.35rem; transition:color var(--transition-fast);
  white-space:nowrap;
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--gradient-warm); border-radius:2px; transition:width var(--transition-base);
}
.nav__link:hover, .nav__link[aria-current="page"]{ color:var(--color-primary); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after{ width:100%; }
.nav__extra{ display:flex; align-items:center; gap:var(--space-sm); }
.nav__link--blog{ font-size:.94rem; font-weight:600; color:var(--color-ink); padding-block:.35rem; position:relative; white-space:nowrap; transition:color var(--transition-fast); }
.nav__link--blog::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--gradient-warm); border-radius:2px; transition:width var(--transition-base); }
.nav__link--blog:hover, .nav__link--blog[aria-current="page"]{ color:var(--color-primary); }
.nav__link--blog:hover::after, .nav__link--blog[aria-current="page"]::after{ width:100%; }
.lang-switch{ display:flex; gap:.3rem; font-size:.78rem; font-weight:700; border:1px solid var(--color-gray-light); border-radius:999px; padding:.2rem; }
.lang-switch a{ padding:.28rem .6rem; border-radius:999px; color:var(--color-gray); transition:all var(--transition-fast); }
.lang-switch a:hover{ color:var(--color-primary); }
.lang-switch a[aria-current="true"]{ color:#fff; background:var(--gradient-warm); }
.nav__toggle{ display:none; flex-direction:column; gap:5px; padding:.5rem; z-index:1001; }
.nav__toggle span{ width:26px; height:2.5px; border-radius:2px; background:var(--color-dark); transition:transform var(--transition-fast), opacity var(--transition-fast); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1100px){
  .nav__toggle{ display:flex; }
  .nav{
    position:fixed; inset:var(--header-h) 0 0 0; height:calc(100dvh - var(--header-h));
    background:var(--color-bg); flex-direction:column; justify-content:flex-start;
    padding:var(--space-lg) var(--space-md); gap:var(--space-lg);
    transform:translateX(100%); transition:transform var(--transition-base); overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav__list{ flex-direction:column; gap:var(--space-md); font-size:1.2rem; }
  .nav__link{ font-weight:700; }
  .nav__extra{ flex-direction:column; align-items:flex-start; gap:var(--space-md); width:100%; }
  .nav__extra .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   5. PRELOADER (breu, no bloqueja LCP — s'amaga a DOMContentLoaded)
   -------------------------------------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; background:var(--color-bg);
  transition:opacity .45s ease, visibility .45s ease;
}
.preloader img{ width:58px; height:58px; animation:pulse 1.1s ease-in-out infinite; }
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.12); opacity:.6; } }

/* --------------------------------------------------------------------------
   6. HERO — mesh de degradats càlids, calmat i elegant
   -------------------------------------------------------------------------- */
.hero{
  position:relative; min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; padding-top:var(--header-h);
  overflow:hidden; background:var(--color-dark); color:#fff;
}
.hero__mesh{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__mesh span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform;
}
.hero__mesh span:nth-child(1){ width:46vw; height:46vw; top:-12%; left:-10%; background:radial-gradient(circle,#F26419,transparent 70%); animation:floatA 18s ease-in-out infinite; }
.hero__mesh span:nth-child(2){ width:44vw; height:44vw; top:2%; right:-16%; background:radial-gradient(circle,#F4A22B,transparent 70%); animation:floatB 22s ease-in-out infinite; opacity:.52; }
.hero__mesh span:nth-child(3){ width:40vw; height:40vw; bottom:-20%; left:14%; background:radial-gradient(circle,#B83A0A,transparent 70%); animation:floatC 24s ease-in-out infinite; opacity:.46; }
.hero__mesh span:nth-child(4){ width:28vw; height:28vw; top:26%; right:16%; background:radial-gradient(circle,#8B5E83,transparent 70%); animation:floatA 20s ease-in-out infinite reverse; opacity:.30; }
@keyframes floatA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(5%,7%) scale(1.1); } }
@keyframes floatB{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-6%,5%) scale(1.14); } }
@keyframes floatC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4%,-6%) scale(1.08); } }
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 85% 75% at 74% 32%, rgba(242,100,25,.12), transparent 56%),
    linear-gradient(180deg, rgba(21,17,14,.50) 0%, rgba(21,17,14,.60) 55%, rgba(21,17,14,.85) 100%);
}
.hero__grid-lines{
  position:absolute; inset:0; z-index:1; opacity:.10; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%);
}

/* Composició a dues columnes (text + visual) */
.hero__inner{
  position:relative; z-index:2; max-width:1300px;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center; gap:clamp(2rem,4.5vw,5rem);
  padding-block:clamp(2rem,6vh,4.5rem);
}

/* ---- Columna de text ---- */
.hero__text{ position:relative; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.92); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  padding:.5rem 1.05rem; border-radius:999px; margin-bottom:var(--space-md);
  backdrop-filter:blur(6px);
}
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--color-amber); box-shadow:0 0 0 4px rgba(244,162,43,.25); animation:blink 2.4s ease-in-out infinite; }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.hero h1{
  font-size:var(--fs-hero); font-weight:800; line-height:1.04; color:#fff;
  margin-bottom:var(--space-md); letter-spacing:-.025em;
}
.hero h1 .text-gradient{ background:linear-gradient(100deg,#F4A22B,#FF8A45 45%,#F26419); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lead{ font-size:var(--fs-lead); color:rgba(255,255,255,.84); max-width:36em; margin-bottom:var(--space-lg); line-height:1.6; }
.hero__lead strong{ color:#fff; font-weight:700; }
.hero .cta-group{ margin-bottom:var(--space-sm); }
.hero__cta-primary{ box-shadow:0 16px 40px rgba(242,100,25,.42); animation:ctaPulse 3.2s ease-in-out infinite; }
.hero__cta-primary svg{ width:18px; height:18px; transition:transform var(--transition-fast); }
.hero__cta-primary:hover svg{ transform:translateX(4px); }
.hero__cta-secondary{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero__cta-secondary svg{ width:14px; height:14px; }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 16px 40px rgba(242,100,25,.42); } 50%{ box-shadow:0 18px 52px rgba(242,100,25,.62); } }
.hero__microcopy{ display:flex; align-items:center; gap:.5rem; margin:0 0 var(--space-lg); font-size:.86rem; font-weight:500; color:rgba(255,255,255,.74); }
.hero__microcopy svg{ width:17px; height:17px; color:#34D058; flex-shrink:0; }

/* Proves de confiança (estadístiques) */
.hero__proof{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1rem,3vw,2.4rem);
  padding-top:var(--space-md); border-top:1px solid rgba(255,255,255,.13);
}
.hero__stat{ display:flex; flex-direction:column; gap:.12rem; }
.hero__stat-num{
  display:inline-flex; align-items:baseline; gap:.04em; line-height:1;
  font-size:clamp(1.55rem,1.15rem + 1.2vw,2.15rem); font-weight:800; color:#fff; letter-spacing:-.02em;
}
.hero__stat-num .pre,.hero__stat-num .unit,.hero__stat-star{ color:var(--color-amber); }
.hero__stat-num .unit{ font-size:.52em; font-weight:700; }
.hero__stat-num .pre{ font-size:.5em; font-weight:700; letter-spacing:0; align-self:center; }
.hero__stat-star{ font-size:.68em; margin-left:.06em; }
.hero__stat-label{ font-size:.78rem; color:rgba(255,255,255,.6); font-weight:500; }

/* ---- Columna visual ---- */
.hero__visual{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:clamp(340px,42vw,490px); perspective:1700px;
}
.hero__glow{
  position:absolute; z-index:0; width:82%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(242,100,25,.5), rgba(244,162,43,.18) 45%, transparent 68%);
  filter:blur(28px);
}

/* Mockup de navegador (desktop) */
.hero__browser{
  position:relative; z-index:2; width:min(100%,580px); margin:0;
  border-radius:14px; overflow:hidden; background:#15110E;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 14px 32px rgba(0,0,0,.42);
  transform:rotateY(-10deg) rotateX(5deg); transform-style:preserve-3d;
  animation:heroFloatBrowser 7s ease-in-out infinite;
}
.hero__browser-bar{ display:flex; align-items:center; gap:.75rem; padding:.6rem .85rem; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); }
.hero__dots{ display:inline-flex; gap:.4rem; flex-shrink:0; }
.hero__dots i{ width:11px; height:11px; border-radius:50%; }
.hero__dots i:nth-child(1){ background:#FF5F57; }
.hero__dots i:nth-child(2){ background:#FEBC2E; }
.hero__dots i:nth-child(3){ background:#28C840; }
.hero__addr{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-size:.72rem; color:rgba(255,255,255,.62); background:rgba(255,255,255,.06); border-radius:999px; padding:.28rem .9rem; }
.hero__addr svg{ width:11px; height:11px; color:#34D058; }
.hero__browser-screen{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--color-dark-soft); }
.hero__browser-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* Mockup mòbil (responsive) superposat */
.hero__phone{
  position:absolute; z-index:3; left:-3%; bottom:-7%; margin:0;
  width:clamp(92px,13vw,142px); aspect-ratio:9/19; padding:6px;
  background:#15110E; border:1px solid rgba(255,255,255,.18); border-radius:24px;
  box-shadow:0 26px 56px rgba(0,0,0,.55); transform:rotate(-5deg);
  animation:heroFloatPhone 8s ease-in-out infinite;
}
.hero__phone::before{ content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:32%; height:5px; border-radius:3px; background:rgba(255,255,255,.28); z-index:2; }
.hero__phone-screen{ width:100%; height:100%; border-radius:18px; overflow:hidden; }
.hero__phone-screen img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* Targetes flotants de confiança (glassmorphism) */
.hero__card{
  position:absolute; z-index:4; color:#fff;
  background:rgba(30,23,18,.62); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.18); border-radius:15px; padding:.7rem .95rem;
  box-shadow:0 22px 46px rgba(0,0,0,.42);
}
.hero__card--review{ top:5%; right:-5%; animation:heroFloatCard 6.5s ease-in-out infinite; }
.hero__card--metric{ bottom:6%; right:-7%; animation:heroFloatCard 7.8s ease-in-out infinite .6s; }
.hero__card-stars{ color:var(--color-amber); font-size:.8rem; letter-spacing:.12em; }
.hero__card-title{ font-weight:700; font-size:.84rem; color:#fff; margin-top:.15rem; }
.hero__card-sub{ font-size:.68rem; color:rgba(255,255,255,.6); margin-top:.05rem; }
.hero__card-row{ display:flex; align-items:center; gap:.55rem; }
.hero__card-spark{ color:#34D058; display:inline-flex; }
.hero__card-spark svg{ width:34px; height:20px; display:block; }
.hero__card-metric{ display:flex; align-items:center; gap:.22rem; font-weight:800; font-size:1.18rem; color:#fff; line-height:1; }
.hero__card-metric .up{ color:#34D058; font-size:.6em; }

/* Animacions de flotació */
@keyframes heroFloatBrowser{ 0%,100%{ transform:rotateY(-10deg) rotateX(5deg) translateY(0); } 50%{ transform:rotateY(-10deg) rotateX(5deg) translateY(-14px); } }
@keyframes heroFloatPhone{ 0%,100%{ transform:rotate(-5deg) translateY(0); } 50%{ transform:rotate(-5deg) translateY(-12px); } }
@keyframes heroFloatCard{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* Entrada escalonada */
.hero__text > *{ animation:heroIn .75s cubic-bezier(.22,.61,.36,1) both; }
.hero__eyebrow{ animation-delay:.05s; }
.hero h1{ animation-delay:.13s; }
.hero__lead{ animation-delay:.22s; }
.hero .cta-group{ animation-delay:.31s; }
.hero__microcopy{ animation-delay:.40s; }
.hero__proof{ animation-delay:.49s; }
.hero__visual{ animation:heroInVisual 1s cubic-bezier(.22,.61,.36,1) .18s both; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes heroInVisual{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }

.hero__scroll{
  position:absolute; bottom:var(--space-md); left:50%; transform:translateX(-50%); z-index:2;
  width:23px; height:36px; border:2px solid rgba(255,255,255,.4); border-radius:14px;
}
.hero__scroll::before{
  content:''; position:absolute; top:7px; left:50%; width:3px; height:7px; margin-left:-1.5px;
  background:#fff; border-radius:2px; animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:1; } 70%{ opacity:0; } 100%{ transform:translateY(13px); opacity:0; } }

/* Responsiu del hero */
@media (max-width:980px){
  .hero{ min-height:auto; padding-block:calc(var(--header-h) + var(--space-md)) var(--space-xl); }
  .hero__inner{ grid-template-columns:1fr; gap:var(--space-lg); }
  .hero__text{ max-width:680px; }
  .hero__visual{ order:2; min-height:clamp(320px,72vw,460px); }
  .hero__scroll{ display:none; }
}
@media (max-width:600px){
  .hero__mesh span{ filter:blur(60px); animation:none !important; }
  .hero__browser{ width:min(100%,440px); transform:rotateY(-6deg) rotateX(3deg); animation:none; }
  .hero__card--review{ top:1%; right:0; }
  .hero__card--metric{ bottom:1%; right:0; }
  .hero__phone{ width:clamp(76px,26vw,108px); left:-1%; bottom:-5%; }
}
@media (max-width:430px){
  .hero__card--metric{ display:none; }
  .hero__proof{ gap:1rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce){
  .hero__text > *,.hero__visual{ opacity:1 !important; transform:none !important; }
  .hero__browser,.hero__phone,.hero__card,.hero__cta-primary,.hero__eyebrow .dot{ animation:none !important; }
}

/* --------------------------------------------------------------------------
   7. CINTA DE CONFIANÇA / TICKER (refinat, sobri)
   -------------------------------------------------------------------------- */
.marquee{ background:var(--color-dark); color:#fff; overflow:hidden; padding-block:1rem; border-block:1px solid rgba(255,255,255,.07); }
.marquee__track{ display:flex; gap:3rem; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:.9rem; font-weight:600; font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.marquee__item::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--color-primary); opacity:.7; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Banda de confiança estàtica (sectors / on treballem) */
.trust-bar{ background:var(--color-bg-tint); border-block:1px solid var(--color-line); }
.trust-bar__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem 1.4rem; padding-block:var(--space-md); }
.trust-bar__label{ font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--color-gray); width:100%; text-align:center; margin-bottom:.2rem; }
.trust-bar__item{ display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:600; color:var(--color-ink); }
.trust-bar__item svg{ width:18px; height:18px; color:var(--color-primary); }

/* --------------------------------------------------------------------------
   8. TARGETES (serveis) — elegants, hover subtil
   -------------------------------------------------------------------------- */
.cards-grid{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }
.card-3d{
  position:relative; background:var(--color-white); border-radius:var(--radius-md);
  padding:var(--space-md); box-shadow:var(--shadow-sm);
  border:1px solid var(--color-line);
  transition:transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  transform-style:preserve-3d; will-change:transform;
  overflow:hidden;
}
.card-3d::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--gradient-vibrant);
  transform:scaleX(0); transform-origin:left; transition:transform var(--transition-base);
}
.card-3d:hover{ box-shadow:var(--shadow-md); border-color:var(--color-gray-light); }
.card-3d:hover::before{ transform:scaleX(1); }
.card-3d__icon{
  width:56px; height:56px; border-radius:15px; background:var(--color-bg-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-sm);
  color:var(--color-primary); border:1px solid var(--color-line);
  transform:translateZ(36px);
}
.card-3d h3{ margin-bottom:.5rem; transform:translateZ(26px); }
.card-3d p{ color:var(--color-gray); font-size:.97rem; line-height:1.6; transform:translateZ(16px); }
.card-3d__link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:var(--space-sm);
  font-weight:700; color:var(--color-primary); font-size:.92rem; transform:translateZ(26px);
}
.card-3d__link::after{ content:'→'; transition:transform var(--transition-fast); }
.card-3d:hover .card-3d__link::after{ transform:translateX(5px); }

/* Variant CTA destacada (substitueix els antics style= en línia) */
.card-3d--cta{
  display:flex; flex-direction:column; justify-content:center;
  background:var(--gradient-vibrant); color:#fff; border:none;
}
.card-3d--cta::before{ display:none; }
.card-3d--cta h3{ color:#fff; }
.card-3d--cta p{ color:rgba(255,255,255,.92); }
.card-3d--cta .card-3d__link{ color:#fff; }
.card-3d--cta:hover{ box-shadow:var(--shadow-glow); }

/* Targetes de projecte */
.project-card{ overflow:hidden; padding:0; display:flex; flex-direction:column; }
.project-card::before{ z-index:3; height:3px; }
.project-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--color-dark); }
.project-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.project-card:hover .project-card__media img{ transform:scale(1.05); }
.project-card__media::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity var(--transition-base);
  background:linear-gradient(180deg, transparent 45%, rgba(21,17,14,.45));
}
.project-card:hover .project-card__media::after{ opacity:1; }
.project-card__tag{
  position:absolute; top:var(--space-sm); left:var(--space-sm); z-index:2;
  background:rgba(21,17,14,.72); backdrop-filter:blur(6px); color:#fff;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.38rem .78rem; border-radius:999px; border:1px solid rgba(255,255,255,.16);
}
.project-card__body{ padding:var(--space-md); display:flex; flex-direction:column; gap:.55rem; flex:1; }
.project-card__body p{ color:var(--color-gray); font-size:.94rem; flex:1; line-height:1.6; }
.project-card__link{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--color-primary);
  font-size:.92rem; margin-top:.4rem;
}
.project-card__link svg{ width:16px; height:16px; transition:transform var(--transition-fast); }
.project-card:hover .project-card__link svg{ transform:translate(3px,-3px); }

/* --------------------------------------------------------------------------
   9. PROCÉS DE TREBALL
   -------------------------------------------------------------------------- */
.process-steps{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.process-step{ position:relative; padding:var(--space-md); background:var(--color-white); border-radius:var(--radius-md); border:1px solid var(--color-line); box-shadow:var(--shadow-sm); transition:transform var(--transition-base), box-shadow var(--transition-base); }
.process-step:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.process-step__num{
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px;
  background:var(--gradient-vibrant); color:#fff; font-weight:800; font-size:1.2rem;
  margin-bottom:var(--space-sm); box-shadow:0 8px 20px rgba(242,100,25,.22);
}
.process-step h3{ margin-bottom:.4rem; }
.process-step p{ color:var(--color-gray); font-size:.94rem; line-height:1.6; }
.section--dark .process-step{ background:var(--color-dark-soft); border-color:rgba(255,255,255,.08); }
.section--dark .process-step p{ color:rgba(255,255,255,.68); }

/* Variant detallada (timeline vertical) */
.process-steps--detailed{ grid-template-columns:1fr; max-width:820px; margin-inline:auto; gap:0; }
.process-steps--detailed .process-step{
  display:grid; grid-template-columns:54px 1fr; gap:var(--space-md); align-items:flex-start;
  background:transparent; border:none; box-shadow:none; padding:0 0 var(--space-lg) var(--space-md);
  margin-left:27px; border-left:2px dashed var(--color-gray-light);
}
.process-steps--detailed .process-step:hover{ transform:none; box-shadow:none; }
.process-steps--detailed .process-step:last-child{ border-left-color:transparent; padding-bottom:0; }
.process-steps--detailed .process-step__num{ margin-left:-54px; flex-shrink:0; }

/* --------------------------------------------------------------------------
   9b. PROCÉS — TIMELINE EDITORIAL (pàgina proces.html / proceso.html)
   Numerals gegants + línia de progrés que s'omple amb el scroll. Vanilla.
   -------------------------------------------------------------------------- */
.proc-intro__meta{ display:flex; flex-wrap:wrap; gap:.6rem .7rem; margin-top:var(--space-md); }
.proc-chip{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:700; color:var(--color-ink); background:var(--color-white); border:1px solid var(--color-line); border-radius:999px; padding:.45rem .9rem; box-shadow:var(--shadow-sm); }
.proc-chip svg{ width:16px; height:16px; color:var(--color-primary); flex-shrink:0; }
.proc-note{ color:var(--color-gray); font-size:.84rem; font-style:italic; }

.proc-timeline{ position:relative; max-width:940px; margin-inline:auto; }
.proc-timeline__line{ position:absolute; left:clamp(19px,4.4vw,37px); top:12px; bottom:12px; width:4px; background:var(--color-line); border-radius:4px; overflow:hidden; }
.proc-timeline__fill{ position:absolute; inset:0; background:var(--gradient-vibrant); transform:scaleY(var(--proc-fill,0)); transform-origin:top center; will-change:transform; transition:transform .25s linear; }

.proc-step{ position:relative; padding-left:clamp(62px,11vw,108px); padding-bottom:clamp(2.6rem,6vw,5.5rem); }
.proc-step:last-child{ padding-bottom:0; }
.proc-step__node{
  position:absolute; left:calc(clamp(19px,4.4vw,37px) + 2px); top:4px; transform:translateX(-50%);
  width:clamp(34px,5vw,44px); height:clamp(34px,5vw,44px); border-radius:50%;
  background:var(--color-white); border:3px solid var(--color-gray-light);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}
.proc-step__node span{ width:9px; height:9px; border-radius:50%; background:var(--color-gray-light); transition:background var(--transition-base), transform var(--transition-base); }
.proc-step.is-active .proc-step__node{ border-color:transparent; background:var(--gradient-vibrant); box-shadow:0 10px 24px rgba(242,100,25,.28); }
.proc-step.is-active .proc-step__node span{ background:#fff; transform:scale(1.3); }

.proc-step__kicker{ display:flex; align-items:center; gap:clamp(.7rem,2vw,1.3rem); margin-bottom:.4rem; flex-wrap:wrap; }
.proc-step__num{
  font-size:clamp(2.7rem,7vw,4.8rem); font-weight:800; line-height:.82; letter-spacing:-.04em;
  background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.proc-step__dur{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:var(--color-primary-dark); background:rgba(242,100,25,.09); border:1px solid rgba(242,100,25,.18); border-radius:999px; padding:.34rem .8rem; }
.proc-step__dur svg{ width:14px; height:14px; }
.proc-step__title{ font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); margin-bottom:.55rem; }
.proc-step__desc{ color:var(--color-gray); font-size:var(--fs-body); line-height:1.65; max-width:60ch; }
.proc-step__deliverables{ display:grid; gap:.55rem; margin-top:var(--space-sm); }
.proc-step__deliverables li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.95rem; color:var(--color-ink); line-height:1.5; }
.proc-step__deliverables svg{ width:19px; height:19px; color:var(--color-primary); flex-shrink:0; margin-top:2px; }

/* Comparativa amb / sense procés (sobre banda fosca) */
.proc-compare{ display:grid; gap:var(--space-md); grid-template-columns:1fr 1fr; }
.proc-compare__col{ border-radius:var(--radius-lg); padding:var(--space-md); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
.proc-compare__col--good{ border-color:rgba(242,100,25,.42); background:linear-gradient(160deg,rgba(242,100,25,.15),rgba(242,100,25,.02)); }
.proc-compare__tag{ display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--space-sm); }
.proc-compare__tag svg{ width:17px; height:17px; }
.proc-compare__col--bad .proc-compare__tag{ color:rgba(255,255,255,.62); }
.proc-compare__col--good .proc-compare__tag{ color:var(--color-amber); }
.proc-compare__list{ display:grid; gap:.7rem; }
.proc-compare__list li{ display:flex; align-items:flex-start; gap:.6rem; font-size:.96rem; line-height:1.5; color:rgba(255,255,255,.84); }
.proc-compare__list svg{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.proc-compare__col--bad .proc-compare__list svg{ color:rgba(255,255,255,.38); }
.proc-compare__col--good .proc-compare__list svg{ color:#34D058; }

/* Variant clara: quan la comparativa va sobre fons clar (section--white / section--tint) */
.section--white .proc-compare__col,
.section--tint .proc-compare__col{
  border:1px solid rgba(20,18,18,.10);
  background:rgba(20,18,18,.02);
}
.section--white .proc-compare__col--good,
.section--tint .proc-compare__col--good{
  border-color:rgba(242,100,25,.42);
  background:linear-gradient(160deg,rgba(242,100,25,.10),rgba(242,100,25,.02));
}
.section--white .proc-compare__col--bad .proc-compare__tag,
.section--tint .proc-compare__col--bad .proc-compare__tag{ color:var(--color-gray); }
.section--white .proc-compare__list li,
.section--tint .proc-compare__list li{ color:var(--color-ink); }
.section--white .proc-compare__col--bad .proc-compare__list svg,
.section--tint .proc-compare__col--bad .proc-compare__list svg{ color:var(--color-gray-light); }

@media (max-width:760px){ .proc-compare{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion: reduce){
  .proc-timeline__fill{ transition:none; }
}

/* --------------------------------------------------------------------------
   10. PER QUÈ ELVORA / COMPROMISOS / COMPTADORS
   -------------------------------------------------------------------------- */
.why-grid{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.why-item{ padding:var(--space-md); border-radius:var(--radius-md); background:var(--color-white); border:1px solid var(--color-line); transition:transform var(--transition-base), box-shadow var(--transition-base); }
.why-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.why-item__icon{
  width:58px; height:58px; margin-bottom:var(--space-sm);
  display:flex; align-items:center; justify-content:center; border-radius:15px;
  background:rgba(242,100,25,.08); color:var(--color-primary);
}
.why-item h3{ margin-bottom:.4rem; }
.why-item p{ color:var(--color-gray); font-size:.94rem; line-height:1.6; }

/* Banda de compromisos (substitueix els contadors poc creïbles a la home) */
.commitments{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.commitment{ display:flex; gap:var(--space-sm); align-items:flex-start; padding:var(--space-md); border-radius:var(--radius-md); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.commitment__icon{ width:46px; height:46px; flex-shrink:0; border-radius:12px; background:var(--gradient-vibrant); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(242,100,25,.22); }
.commitment__icon svg{ width:22px; height:22px; }
.commitment h3{ font-size:1.02rem; color:#fff; margin-bottom:.2rem; }
.commitment p{ font-size:.9rem; color:rgba(255,255,255,.68); line-height:1.55; }

/* Comptadors (es conserva per a possibles usos en pàgines interiors) */
.counters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-md); text-align:center; }
.counter{ padding:var(--space-md); border-radius:var(--radius-md); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }
.section--white .counter,.section--tint .counter{ background:var(--color-white); border-color:var(--color-line); box-shadow:var(--shadow-sm); }
.counter__num{ font-size:clamp(2.2rem,1.7rem + 2vw,3.2rem); font-weight:800; line-height:1; display:block; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.counter__num .suffix{ -webkit-text-fill-color:currentColor; }
.counter__label{ color:var(--color-gray); font-size:.9rem; margin-top:.4rem; display:block; }
.section--dark .counter__label,.section--gradient .counter__label{ color:rgba(255,255,255,.72); }
.section--gradient .counter{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.section--gradient .counter__num{ background:none; -webkit-text-fill-color:#fff; color:#fff; }

/* --------------------------------------------------------------------------
   11. FAQ ACORDIÓ
   -------------------------------------------------------------------------- */
.faq{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:.8rem; }
.faq-item{ background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--transition-fast), box-shadow var(--transition-fast); }
.faq-item[data-open="true"]{ border-color:var(--color-primary); box-shadow:var(--shadow-sm); }
.faq-question{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md); text-align:left; font-weight:700; font-size:1.02rem; color:var(--color-dark);
}
.faq-question__icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--color-bg-tint);
  display:flex; align-items:center; justify-content:center; position:relative; transition:transform var(--transition-base), background var(--transition-fast);
}
.faq-question__icon::before,.faq-question__icon::after{ content:''; position:absolute; background:var(--color-primary); border-radius:2px; transition:opacity var(--transition-fast); }
.faq-question__icon::before{ width:11px; height:2.5px; }
.faq-question__icon::after{ width:2.5px; height:11px; }
.faq-item[data-open="true"] .faq-question__icon{ background:var(--gradient-warm); transform:rotate(180deg); }
.faq-item[data-open="true"] .faq-question__icon::before,.faq-item[data-open="true"] .faq-question__icon::after{ background:#fff; }
.faq-item[data-open="true"] .faq-question__icon::after{ opacity:0; }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height var(--transition-base); }
.faq-answer__inner{ padding:0 var(--space-md) var(--space-md); color:var(--color-gray); font-size:1rem; line-height:1.65; }

/* --------------------------------------------------------------------------
   12. TESTIMONIS (estructura maquetada)
   -------------------------------------------------------------------------- */
.testimonials{ display:grid; gap:var(--space-md); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.testimonial-card{ padding:var(--space-md); }
.testimonial-card__stars{ color:var(--color-amber); margin-bottom:var(--space-xs); letter-spacing:.15em; font-size:1.05rem; }
.testimonial-card__author{ display:flex; align-items:center; gap:.7rem; margin-top:var(--space-sm); }
.testimonial-card__author img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.testimonial-card__author strong{ display:block; font-size:.92rem; }
.testimonial-card__author span{ font-size:.8rem; color:var(--color-gray); }

/* --------------------------------------------------------------------------
   13. CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final{
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:var(--gradient-vibrant); color:#fff; text-align:center;
  padding:var(--space-xl) var(--space-md); box-shadow:var(--shadow-glow);
}
.cta-final::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(circle at 18% 18%, rgba(255,255,255,.35), transparent 45%),
             radial-gradient(circle at 85% 85%, rgba(184,58,10,.5), transparent 52%);
}
.cta-final > *{ position:relative; z-index:1; }
.cta-final h2{ color:#fff; margin-bottom:var(--space-sm); max-width:760px; margin-inline:auto; }
.cta-final p{ color:rgba(255,255,255,.94); max-width:600px; margin-inline:auto; margin-bottom:var(--space-md); font-size:var(--fs-lead); }
.cta-final .cta-group{ justify-content:center; }
.cta-final .btn--ghost{ border-color:rgba(255,255,255,.7); color:#fff; }
.cta-final .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.14); color:#fff; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer{ background:var(--color-dark); color:rgba(255,255,255,.70); padding-block:var(--space-xl) var(--space-lg); }
.footer__grid{ display:grid; gap:var(--space-lg); grid-template-columns:1.5fr 1fr 1fr 1.2fr; margin-bottom:var(--space-lg); }
.footer__brand img{ height:38px; margin-bottom:var(--space-sm); }
.footer__brand p{ font-size:.92rem; max-width:300px; line-height:1.6; }
.footer__social{ display:flex; gap:.6rem; margin-top:var(--space-md); }
.footer__social a{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.8); transition:background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast); }
.footer__social a:hover{ background:var(--gradient-warm); color:#fff; transform:translateY(-3px); }
.footer__social svg{ width:18px; height:18px; }
.footer h4{ color:#fff; font-size:.8rem; margin-bottom:var(--space-sm); letter-spacing:.12em; text-transform:uppercase; }
.footer ul li{ margin-bottom:.6rem; font-size:.92rem; }
.footer a:hover{ color:var(--color-primary-light); }
.footer__nap{ font-weight:700; color:#fff; margin-top:.6rem; display:inline-flex; align-items:center; gap:.4rem; }
.footer__nap svg{ width:16px; height:16px; color:var(--color-primary); }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-top:var(--space-md);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-sm);
  font-size:.82rem; color:rgba(255,255,255,.5);
}
.footer__bottom-links{ display:flex; gap:var(--space-md); flex-wrap:wrap; }
.footer__bottom-links a:hover{ color:var(--color-primary-light); }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } .footer__bottom{ flex-direction:column; text-align:center; } }

/* Enllaç d'email ofuscat: el JS (initEmailLinks) escriu l'adreça i el mailto.
   Sense JS es mostra el text de reserva de l'HTML ("info.elvoraweb [at] gmail.com").
   IMPORTANT: no fem servir ::after amb content:attr(...) perquè duplicava el correu
   (el JS ja omple el text → sortia "correu@dominicorreu@domini"). */
.email-link{ cursor:pointer; }

/* --------------------------------------------------------------------------
   15. WHATSAPP FLOTANT
   -------------------------------------------------------------------------- */
.whatsapp-float{
  position:fixed; bottom:var(--space-md); right:var(--space-md); z-index:900;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.4); transition:transform var(--transition-fast);
}
.whatsapp-float::before{ content:''; position:absolute; inset:0; border-radius:50%; background:#25D366; z-index:-1; animation:ripple 2.6s ease-out infinite; }
@keyframes ripple{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.7); opacity:0; } }
.whatsapp-float:hover{ transform:scale(1.07); }
.whatsapp-float svg{ width:30px; height:30px; }

/* --------------------------------------------------------------------------
   16. BREADCRUMBS + HERO INTERIOR
   -------------------------------------------------------------------------- */
.breadcrumbs{ padding-top:calc(var(--header-h) + var(--space-md)); padding-bottom:0; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:.84rem; color:var(--color-gray); }
.breadcrumbs li:not(:last-child)::after{ content:'/'; margin-left:.4rem; color:var(--color-gray-light); }
.breadcrumbs a:hover{ color:var(--color-primary); }
.breadcrumbs [aria-current="page"]{ color:var(--color-dark); font-weight:600; }

.page-hero{ padding-block:var(--space-md) var(--space-lg); position:relative; }
.page-hero h1{ max-width:880px; }
.page-hero h1 .text-gradient{ background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero p{ color:var(--color-gray); max-width:680px; margin-top:var(--space-sm); font-size:var(--fs-lead); line-height:1.6; }

/* --------------------------------------------------------------------------
   17. FILES DE CARACTERÍSTIQUES (text + imatge alternats)
   -------------------------------------------------------------------------- */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); align-items:center; }
.feature-row + .feature-row{ margin-top:var(--space-xl); }
.feature-row__media{ position:relative; }
.feature-row__media img{ border-radius:var(--radius-md); box-shadow:var(--shadow-md); width:100%; }
.feature-row__media::before{
  content:''; position:absolute; inset:auto -14px -14px auto; width:55%; height:55%; z-index:-1;
  background:var(--gradient-vibrant); border-radius:var(--radius-md); opacity:.18; filter:blur(30px);
}
.feature-row--reverse .feature-row__media{ order:-1; }
.feature-row__list{ margin-top:var(--space-sm); display:flex; flex-direction:column; gap:.7rem; }
.feature-row__list li{ display:flex; align-items:flex-start; gap:.6rem; color:var(--color-gray); }
.feature-row__list svg{ width:22px; height:22px; color:var(--color-primary); flex-shrink:0; margin-top:1px; }
.tag-pill{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); background:rgba(242,100,25,.09); padding:.35rem .8rem; border-radius:999px; margin-bottom:var(--space-sm); }
@media (max-width:860px){
  .feature-row{ grid-template-columns:1fr; gap:var(--space-md); }
  .feature-row--reverse .feature-row__media{ order:0; }
}

/* --------------------------------------------------------------------------
   18. FORMULARI DE CONTACTE + MAPA
   -------------------------------------------------------------------------- */
.contact-grid{ display:grid; gap:var(--space-lg); grid-template-columns:1fr 1fr; align-items:start; }
.contact-card{ background:var(--color-white); border:1px solid var(--color-line); border-radius:var(--radius-lg); padding:var(--space-md); box-shadow:var(--shadow-sm); }
.form{ display:flex; flex-direction:column; gap:var(--space-sm); }
.form__row{ display:grid; gap:var(--space-sm); grid-template-columns:1fr 1fr; }
.form__group{ display:flex; flex-direction:column; gap:.4rem; }
.form__group label{ font-size:.84rem; font-weight:700; color:var(--color-ink); }
.form input,.form textarea{
  padding:.9rem 1.05rem; border:1.5px solid var(--color-gray-light); border-radius:var(--radius-sm);
  background:var(--color-bg); transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 4px rgba(242,100,25,.13); background:#fff; }
.form textarea{ min-height:150px; resize:vertical; }
.form__honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__feedback{ font-size:.92rem; font-weight:600; padding:.9rem 1.05rem; border-radius:var(--radius-sm); display:none; }
.form__feedback.is-visible{ display:block; }
.form__feedback--success{ background:rgba(21,128,61,.1); color:var(--color-success); }
.form__feedback--error{ background:rgba(220,38,38,.1); color:var(--color-error); }
.form__note{ font-size:.82rem; color:var(--color-gray); }
.contact-info{ display:flex; flex-direction:column; gap:var(--space-sm); }
.contact-info__item{ display:flex; gap:var(--space-sm); align-items:flex-start; padding:var(--space-sm); border-radius:var(--radius-md); transition:background var(--transition-fast); }
.contact-info__item:hover{ background:var(--color-bg-tint); }
.contact-info__icon{
  width:50px; height:50px; flex-shrink:0; border-radius:14px;
  background:var(--gradient-vibrant); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(242,100,25,.24);
}
.contact-info__item h3{ font-size:1rem; margin-bottom:.15rem; }
.contact-info__item a,.contact-info__item p{ color:var(--color-gray); font-size:.95rem; }
.contact-info__item a:hover{ color:var(--color-primary); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } .form__row{ grid-template-columns:1fr; } }

.map-consent{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; margin-top:var(--space-md);
  background:linear-gradient(135deg,#2A211B,#1A1410); display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
}
.map-consent__btn{ position:relative; z-index:1; }
.map-consent iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:none; }
.map-consent.is-loaded iframe{ display:block; }
.map-consent.is-loaded .map-consent__inner{ display:none; }
.map-consent__inner{ padding:var(--space-md); display:flex; flex-direction:column; align-items:center; gap:var(--space-sm); }
.map-consent__inner p{ color:rgba(255,255,255,.75); font-size:.9rem; max-width:340px; }

/* --------------------------------------------------------------------------
   19. PÀGINA 404
   -------------------------------------------------------------------------- */
.error-page{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--space-xl) var(--space-md); position:relative; overflow:hidden; background:var(--color-dark); color:#fff; }
.error-page .hero__mesh{ opacity:.6; }
.error-page__inner{ position:relative; z-index:2; max-width:560px; }
.error-page__code{ font-size:clamp(6rem,4rem + 10vw,11rem); font-weight:800; line-height:1; background:linear-gradient(100deg,#F4A22B,#FF8A45,#F26419); -webkit-background-clip:text; background-clip:text; color:transparent; }
.error-page h1{ color:#fff; margin:var(--space-sm) 0; }
.error-page p{ color:rgba(255,255,255,.8); margin-bottom:var(--space-md); }

/* --------------------------------------------------------------------------
   20. ANIMACIONS — REVEALS (IntersectionObserver)
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal--scale{ transform:scale(.92); }
.reveal--scale.is-visible{ transform:none; }
.reveal--left{ transform:translateX(-34px); }
.reveal--left.is-visible{ transform:none; }
.reveal--right{ transform:translateX(34px); }
.reveal--right.is-visible{ transform:none; }
[data-stagger] > *{ transition-delay:calc(var(--stagger-i, 0) * 80ms); }
[data-parallax]{ will-change:transform; }

/* --------------------------------------------------------------------------
   21. RESPONSIVE — AJUSTOS GENERALS
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .section{ padding-block:var(--space-lg); }
  .btn{ width:100%; }
  .hero .cta-group .btn,.cta-final .cta-group .btn{ width:auto; }
  .cta-group{ width:100%; }
}
@media (min-width:641px){
  .cta-group .btn{ width:auto; }
}

/* --------------------------------------------------------------------------
   22. PLANS DE PREU — taula de preus premium (preus.html / precios.html)
   Targetes amb pla destacat ("més popular"), preus grans amb degradat i
   llistes de característiques. Reutilitza els tokens de marca existents.
   -------------------------------------------------------------------------- */
.pricing-plans{
  display:grid; gap:var(--space-md);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  align-items:stretch; margin-top:var(--space-md);
}
@media (min-width:1080px){ .pricing-plans{ grid-template-columns:repeat(4,1fr); gap:var(--space-sm); } }

.pricing-plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--color-white); border:1px solid var(--color-line);
  border-radius:var(--radius-lg); padding:var(--space-md);
  box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.pricing-plan::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--gradient-vibrant); transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition-base);
}
.pricing-plan:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--color-gray-light); }
.pricing-plan:hover::before{ transform:scaleX(1); }
.pricing-plan__icon{
  width:52px; height:52px; border-radius:14px; background:var(--color-bg-tint);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-sm);
  color:var(--color-primary); border:1px solid var(--color-line);
}
.pricing-plan__name{ font-size:1.16rem; font-weight:800; letter-spacing:-.01em; margin-bottom:.3rem; }
.pricing-plan__tagline{ font-size:.86rem; color:var(--color-gray); line-height:1.5; margin-bottom:var(--space-sm); }
.pricing-plan__price{ display:flex; align-items:baseline; gap:.35rem; flex-wrap:wrap; }
.pricing-plan__from{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-gray); }
.pricing-plan__amount{
  font-size:clamp(2.05rem,1.55rem + 1.7vw,2.7rem); font-weight:800; line-height:1; letter-spacing:-.03em;
  background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pricing-plan__range{ font-size:.8rem; color:var(--color-gray); margin-top:.35rem; }
.pricing-plan__divider{ height:1px; background:var(--color-line); margin:var(--space-sm) 0; }
.pricing-plan__features{ display:grid; gap:.62rem; margin-bottom:var(--space-md); }
.pricing-plan__features li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.9rem; color:var(--color-ink); line-height:1.45; }
.pricing-plan__features svg{ width:18px; height:18px; color:var(--color-primary); flex-shrink:0; margin-top:1px; }
.pricing-plan__cta{ margin-top:auto; }

/* Pla destacat ("més popular") — vora amb degradat + glow càlid */
.pricing-plan--featured{
  border:2px solid transparent; box-shadow:var(--shadow-glow);
  background:
    linear-gradient(var(--color-white),var(--color-white)) padding-box,
    var(--gradient-vibrant) border-box;
}
.pricing-plan--featured::before{ display:none; }
.pricing-plan--featured .pricing-plan__icon{ background:var(--gradient-vibrant); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(242,100,25,.26); }
@media (min-width:1080px){
  .pricing-plan--featured{ transform:scale(1.045); }
  .pricing-plan--featured:hover{ transform:translateY(-8px) scale(1.045); }
}
.pricing-plan__badge{
  position:absolute; top:var(--space-sm); right:var(--space-sm); z-index:2;
  display:inline-flex; align-items:center; gap:.34rem;
  font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:var(--gradient-vibrant); padding:.36rem .72rem; border-radius:999px;
  box-shadow:0 8px 18px rgba(242,100,25,.32);
}
.pricing-plan__badge svg{ width:13px; height:13px; }

/* Banda CTA destacada sota els plans */
.pricing-band{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-md);
  margin-top:var(--space-md); padding:var(--space-md) clamp(1.4rem,3vw,2.4rem);
  border-radius:var(--radius-lg); border:1px solid var(--color-line);
  background:
    radial-gradient(circle at 10% 18%, rgba(242,100,25,.10), transparent 42%),
    radial-gradient(circle at 90% 92%, rgba(244,162,43,.12), transparent 46%),
    var(--color-bg-tint);
}
.pricing-band__text h3{ font-size:1.32rem; margin-bottom:.25rem; }
.pricing-band__text p{ color:var(--color-gray); font-size:.96rem; max-width:54ch; }
@media (max-width:560px){ .pricing-band{ flex-direction:column; align-items:flex-start; } .pricing-band .btn{ width:100%; } }

/* ==========================================================================
   REDISSENY v2 — components editorials i comparativa de preus
   (afegits sense alterar els components anteriors)
   ========================================================================== */

/* --- Enllaç amb fletxa (utilitat reutilitzable) --- */
.arrow-link{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.95rem; color:var(--color-primary); transition:color var(--transition-fast); }
.arrow-link svg{ width:18px; height:18px; transition:transform var(--transition-fast); }
.arrow-link:hover{ color:var(--color-primary-dark); }
.arrow-link:hover svg{ transform:translateX(4px); }
.section--dark .arrow-link,.section--gradient .arrow-link{ color:var(--color-amber); }

/* --- Llista editorial numerada (substitueix targetes d'icona repetides) --- */
.edito{ margin-top:var(--space-md); }
.edito__item{
  display:grid; grid-template-columns:auto 1fr; gap:.3rem var(--space-md);
  padding:clamp(1.3rem,2.4vw,2rem) 0; border-top:1px solid var(--color-line);
}
.edito__item:last-child{ border-bottom:1px solid var(--color-line); }
.edito__num{
  font-size:clamp(1.3rem,1rem + 1vw,1.7rem); font-weight:800; line-height:1;
  color:var(--color-primary); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  padding-top:.15rem; min-width:2.4ch;
}
.edito__body h3{ font-size:clamp(1.12rem,1rem + .5vw,1.32rem); letter-spacing:-.01em; margin-bottom:.4rem; }
.edito__body > p{ color:var(--color-gray); font-size:1rem; line-height:1.62; max-width:66ch; }
.edito__body .arrow-link{ margin-top:.8rem; }
.section--dark .edito__item,.section--gradient .edito__item{ border-color:rgba(255,255,255,.14); }
.section--dark .edito__body > p,.section--gradient .edito__body > p{ color:rgba(255,255,255,.72); }

/* --- Comparativa gran de preus: Elvora vs altres agències --- */
.price-vs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-md); align-items:stretch; margin-top:var(--space-md); }
@media (max-width:720px){ .price-vs{ grid-template-columns:1fr; } }
.price-col{
  position:relative; border-radius:var(--radius-lg); padding:clamp(1.8rem,4vw,3rem) var(--space-md);
  text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.price-col--elvora{
  border:2px solid var(--color-primary);
  background:linear-gradient(168deg, rgba(244,162,43,.14), rgba(242,100,25,.05) 70%, transparent);
  box-shadow:var(--shadow-glow);
}
.price-col--market{ border:1px solid var(--color-line); background:var(--color-bg-tint); }
.price-col__label{ font-size:.82rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--color-gray); margin-bottom:.7rem; }
.price-col--elvora .price-col__label{ color:var(--color-primary-dark); }
.price-col__from{ font-size:.9rem; font-weight:700; letter-spacing:.04em; color:var(--color-gray); text-transform:uppercase; }
.price-col__amount{ font-size:clamp(3.2rem,2rem + 8vw,5.6rem); font-weight:800; line-height:.92; letter-spacing:-.03em; margin-top:.1rem; }
.price-col--elvora .price-col__amount{ background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.price-col--market .price-col__amount{ color:var(--color-ink); opacity:.62; }
.price-col__sub{ color:var(--color-gray); font-size:.96rem; line-height:1.55; margin-top:.9rem; max-width:36ch; }
.price-col__flag{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  background:var(--gradient-vibrant); color:#fff; font-size:.72rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:.4rem .95rem; border-radius:999px;
  box-shadow:0 8px 18px rgba(242,100,25,.32); white-space:nowrap;
}
.price-verdict{
  margin-top:var(--space-md); padding:clamp(1.2rem,2.5vw,1.8rem) var(--space-md);
  border-radius:var(--radius-lg); text-align:center;
  background:var(--color-dark); color:#fff;
}
.price-verdict strong{ color:var(--color-amber); }
.price-verdict__big{ display:block; font-size:clamp(1.3rem,1rem + 2vw,2rem); font-weight:800; letter-spacing:-.01em; margin-bottom:.4rem; }
.price-verdict__big em{ font-style:normal; background:var(--gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.price-verdict p{ color:rgba(255,255,255,.78); font-size:.98rem; max-width:60ch; margin:0 auto; }

/* --- Taula de referència del mercat (clarament externa, no preus d'Elvora) --- */
.market-ref{ margin-top:var(--space-md); border:1px solid var(--color-line); border-radius:var(--radius-lg); overflow:hidden; background:var(--color-white); box-shadow:var(--shadow-sm); }
.market-ref__row{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-sm); align-items:center; padding:clamp(.9rem,1.8vw,1.25rem) clamp(1.1rem,2.5vw,1.8rem); border-top:1px solid var(--color-line); }
.market-ref__row:first-child{ border-top:none; }
.market-ref__row--head{ background:var(--color-dark); }
.market-ref__row--head span{ font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.market-ref__row--head span:last-child{ text-align:right; }
.market-ref__type strong{ display:block; font-size:1.04rem; color:var(--color-dark); }
.market-ref__type small{ font-size:.86rem; color:var(--color-gray); }
.market-ref__price{ text-align:right; font-weight:800; font-size:1.18rem; color:var(--color-ink); }
.market-ref__note{ margin-top:var(--space-sm); font-size:.9rem; color:var(--color-gray); text-align:center; }
@media (max-width:520px){ .market-ref__price{ font-size:1.05rem; } }

/* --- Tira de passos numerada (teaser de procés a la home) --- */
.steps-flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-md); margin-top:var(--space-md); }
@media (max-width:860px){ .steps-flow{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .steps-flow{ grid-template-columns:1fr; } }
.steps-flow__item{ position:relative; padding-top:1.4rem; }
.steps-flow__item::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:rgba(255,255,255,.16); }
.steps-flow__item::after{ content:''; position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%; background:var(--color-primary); }
.steps-flow__num{ font-size:.78rem; font-weight:800; letter-spacing:.1em; color:var(--color-amber); }
.steps-flow__item h3{ font-size:1.04rem; color:#fff; margin:.35rem 0 .3rem; }
.steps-flow__item p{ font-size:.88rem; color:rgba(255,255,255,.68); line-height:1.55; }

/* --- Tira de garanties (compromisos compactes, sense caixes d'icona) --- */
.guarantee-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-md); margin-top:var(--space-md); }
@media (max-width:820px){ .guarantee-strip{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .guarantee-strip{ grid-template-columns:1fr; } }
.guarantee-strip__item{ padding-top:1rem; border-top:2px solid rgba(242,100,25,.55); }
.guarantee-strip__item h3{ font-size:1.04rem; color:#fff; margin-bottom:.35rem; }
.guarantee-strip__item p{ font-size:.9rem; color:rgba(255,255,255,.7); line-height:1.55; }

/* --- Pills de text (sense icones) per a la meta del page-hero --- */
.pill-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--space-sm); }
.pill{ display:inline-flex; align-items:center; font-size:.82rem; font-weight:700; color:var(--color-ink); background:var(--color-white); border:1px solid var(--color-line); border-radius:999px; padding:.45rem 1rem; box-shadow:var(--shadow-sm); }
.pill--accent{ color:var(--color-primary-dark); border-color:rgba(242,100,25,.4); background:rgba(242,100,25,.06); }

/* --- Resum de seccions a la home (teaser editorial amb enllaç) --- */
.home-teaser__top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-sm); }
.home-teaser__top .section__head{ margin-bottom:0; }
.home-teaser__top .arrow-link{ padding-bottom:.4rem; flex-shrink:0; }

/* --------------------------------------------------------------------------
   16. BANNER DE COOKIES (GDPR · CAT/ES · mòbil i escriptori)
   -------------------------------------------------------------------------- */
.cookie-banner{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,30px);
  width:min(960px, calc(100% - 32px));
  background:var(--color-white);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  box-shadow:0 18px 48px rgba(26,20,16,.18), 0 4px 14px rgba(26,20,16,.08);
  padding:1.1rem 1.25rem;
  display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
  z-index:5000;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.cookie-banner.is-visible{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.cookie-banner__text{ flex:1 1 320px; min-width:240px; font-size:.92rem; line-height:1.55; color:var(--color-ink); }
.cookie-banner__text strong{ display:block; font-size:1rem; color:var(--color-dark); margin-bottom:.2rem; font-weight:700; }
.cookie-banner__text a{ color:var(--color-primary); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner__actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.cookie-banner__btn{
  font:inherit; font-weight:600; font-size:.9rem;
  padding:.65rem 1.15rem; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:all var(--transition-fast); white-space:nowrap;
}
.cookie-banner__btn--accept{ background:var(--gradient-warm); color:#fff; }
.cookie-banner__btn--accept:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.cookie-banner__btn--reject{ background:transparent; color:var(--color-ink); border-color:var(--color-gray-light); }
.cookie-banner__btn--reject:hover{ border-color:var(--color-gray); color:var(--color-dark); }
@media (max-width:640px){
  .cookie-banner{ left:12px; right:12px; bottom:12px; transform:translate(0,30px); width:auto; padding:1rem; gap:.85rem; }
  .cookie-banner.is-visible{ transform:translate(0,0); }
  .cookie-banner__text{ flex-basis:100%; font-size:.88rem; }
  .cookie-banner__actions{ width:100%; }
  .cookie-banner__btn{ flex:1; text-align:center; padding:.7rem .9rem; }
}