/* ════════════════════════════════════════════════════════════
   PAPIK · HOME PREMIUM (light polish)
   Layer on top of rl-system.css. Adds:
   · login icon + modal styling for the header
   · spacing/typography homogenization across sections
   · micro-interactions & motion details (reveals, hovers, focus)
   Does NOT redefine hero, sectors, featured, combo, posts or CTA.
   ════════════════════════════════════════════════════════════ */

/* Premium easing tokens (used by polish layer) */
:root {
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --t-snap:  0.18s;
  --t-cozy:  0.32s;
  --t-soft:  0.5s;
  --t-cine:  0.85s;
}

:root {
  --section-pad-y: clamp(96px, 9vw, 120px);
  --section-pad-x: clamp(24px, 5vw, 56px);
}

/* ──────────────────────────────────────────────────────
   HOMOGENIZE section paddings (only on the homepage)
   ────────────────────────────────────────────────────── */
.rl-sectors,
.rl-featured,
.rl-combo,
.rl-posts {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}
.rl-cta {
  padding: var(--section-pad-y) var(--section-pad-x);
}

/* Tighten the spacing of the jumbo .rl-anim band so it aligns
   with the new section rhythm. */
.rl-anim {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
  padding-left: var(--section-pad-x);
  padding-right: var(--section-pad-x);
}

/* Eyebrow / label parity across sections (overridden després per la versió A) */
.rl-sectors__label,
.rl-posts__label,
.rl-combo__label {font-size: 11.5px;font-weight: var(--fw-regular);
  text-transform: uppercase;
  /* tighter tracking · matches the kicker/trust labels · beats the shared
     .upper eyebrow rule (components.css, !important) by loading later */
  letter-spacing: 0.04em !important;
}

/* ══════════════════════════════════════════════════════════════
   HEADER · right side reorganized (canonical · all pages)
   Visual order: [lang switcher] | [login icon] [Pressupost CTA]
   ══════════════════════════════════════════════════════════════ */

/* The right-side container becomes a tightly-spaced flex row */
.rl-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Lang first, login second, CTA last (lang-switcher.js injects between login and CTA) */
.rl-lang-switch   { order: 1; margin-right: 0; }
.rl-header__login { order: 2; }
.rl-header__cta   { order: 3; }

/* Divider between lang group and user-action group */
.rl-header__login::before {
  content: "";
  display: block;
  position: absolute;
  left: -12px;
  top: 50%;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-50%);
  pointer-events: none;
}

/* ── Login icon · slimmer, more refined ──────────────── */
.rl-header__login {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  transition: color 0.25s var(--ease-out-quart),
              background 0.25s var(--ease-out-quart);
}
.rl-header__login i {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  transition: transform 0.25s var(--ease-out-quart);
}
.rl-header__login:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.rl-header__login:hover i {
  transform: scale(1.06);
}
.rl-header__login:focus-visible {
  outline: 0;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 40, 25, 0.45);
}

/* ── Lang switcher · lighter, smaller, less intrusive ── */
.rl-lang-switch {
  gap: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
}
.rl-lang-switch__btn {
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.48);
  border-radius: 10px;
  transition: color 0.25s var(--ease-out-quart),
              background 0.25s var(--ease-out-quart);
}
.rl-lang-switch__btn:hover {
  color: #ffffff;
}
.rl-lang-switch__btn.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
}
/* Active fill extends right up to the separator line on each side */
.rl-lang-switch__btn:first-of-type.is-active {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rl-lang-switch__btn:last-of-type.is-active {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rl-lang-switch__btn:not(:first-of-type):not(:last-of-type).is-active {
  border-radius: 10px;
}
.rl-lang-switch__sep {
  background: rgba(255, 255, 255, 0.18);
  width: 1px;
  height: 22px;
  margin: 0;
}

/* ── Pressupost CTA · subtle refinement ───────────────── */
.rl-header__cta {
  padding: 6px 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  border: 0;
  transition: background 0.25s var(--ease-out-quart),
              color 0.25s var(--ease-out-quart),
              transform 0.25s var(--ease-out-quart),
              box-shadow 0.25s var(--ease-out-quart);
}
.rl-header__cta:hover {
  background: var(--green-accent, #d9e4e0);
  color: var(--green) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(0, 40, 25, 0.55);
}

/* ── Mobile · keep order, tighter gap ─────────────────── */
@media (max-width: 720px) {
  .rl-header__right { gap: 10px; }
  .rl-header__login { width: 32px; height: 32px; }
  .rl-header__login i { font-size: 17px; }
  .rl-header__login::before {
    left: -8px;
    height: 14px;
  }
}

/* ════════════════════════════════════════════════════════════
   LOGIN DRAWER · panel lateral dret editorial
   Easing global: cubic-bezier(0.23, 1, 0.32, 1)
   ════════════════════════════════════════════════════════════ */
:root {
  --hp-login-page: #ffffff;
  --hp-login-ink:  #002819;
  --hp-login-tile: #d9e4e0;
  --hp-login-easing: cubic-bezier(0.23, 1, 0.32, 1);
}

.hp-login {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
}
.hp-login.is-open { display: block; }
.hp-login[hidden] { display: none !important; }

/* ─── Backdrop · fade 620ms ─── */
.hp-login__backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0,40,25,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--hp-login-easing);
}
.hp-login.is-open .hp-login__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Dialog · panell flotant germà del header ───
   Respecta la pastilla del header (top 16 + h 64 + gap 16 = 96).
   Inset lateral 24px = mateix que el header. Cantonades 18px.
   Slide entra pel cantó dret + ombra elevada apareix al final. */
.hp-login__dialog {
  position: fixed;
  top: 96px;
  right: 24px;
  bottom: 24px;
  width: calc(100% - 48px);
  max-width: 520px;
  height: auto;
  z-index: 65;
  background: var(--hp-login-page);
  color: var(--hp-login-ink);
  border: 1px solid rgba(0,40,25,0.06);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 24px));
  box-shadow:
    0 24px 60px -16px rgba(0, 0, 0, 0),
    0 8px 24px rgba(0, 0, 0, 0);
  transition:
    transform 420ms var(--hp-login-easing),
    box-shadow 420ms var(--hp-login-easing);
}
.hp-login.is-open .hp-login__dialog {
  transform: translateX(0);
  box-shadow:
    0 24px 60px -16px rgba(0,40,25,0.22),
    0 8px 24px rgba(0,40,25,0.08);
}

/* Tablet · ajustem inset */
@media (max-width: 1023px) {
  .hp-login__dialog {
    top: 88px;
    right: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
    transform: translateX(calc(100% + 16px));
  }
}

/* Mòbil · sota el header (top 12 + h 56 + gap 12 = 80), full bleed amb marges */
@media (max-width: 767px) {
  .hp-login__dialog {
    top: 80px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    border-radius: 14px;
    transform: translateY(24px);
    opacity: 0;
    transition:
      transform 360ms var(--hp-login-easing),
      opacity 360ms var(--hp-login-easing),
      box-shadow 360ms var(--hp-login-easing);
  }
  .hp-login.is-open .hp-login__dialog {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ─── Header bar · kicker + close ─── */
.hp-login__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(0,40,25,0.10);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .hp-login__head { height: 64px; padding: 0 40px; }
}
.hp-login__kicker {
  font-size: 11.5px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #002819;
  font-family: var(--ff-sans);
}

.hp-login__close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-login-ink);
  opacity: 0.8;
  padding: 0;
  transition:
    opacity 620ms var(--hp-login-easing),
    transform 620ms var(--hp-login-easing);
}
.hp-login__close:hover,
.hp-login__close:focus-visible {
  opacity: 1;
  transform: rotate(90deg);
}
.hp-login__close svg { display: block; }

/* ─── Body · scrollable ─── */
.hp-login__body {
  flex: 1;
  overflow-y: auto;
  padding: 40px 24px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
  .hp-login__body { padding: 56px 40px 64px; }
}

.hp-login__title {
  font-family: var(--ff-sans);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--hp-login-ink);
  margin: 0 0 20px;
}
.hp-login__sub {
  font-size: 15px;
  line-height: 1.65;
  color: #002819;
  font-weight: 300;
  max-width: 60ch;
  margin: 0 0 36px;
}
@media (min-width: 768px) {
  .hp-login__sub { font-size: 17px; }
}

/* ─── Form ─── */
.hp-login__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}
.hp-login__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hp-login__label {
  font-size: 11.5px;
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: #002819;
  text-transform: uppercase;
}
.hp-login__field input {
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  border: 1px solid rgba(0,40,25,0.16);
  border-radius: 10px;
  background: transparent;
  color: var(--hp-login-ink);
  transition: border-color 320ms var(--hp-login-easing);
}
.hp-login__field input::placeholder { color: rgba(0, 40, 25, 0.35); }
.hp-login__field input:focus {
  outline: 0;
  border-color: var(--hp-login-ink);
}

.hp-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
}
.hp-login__remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(0, 40, 25, 0.7);
  cursor: pointer;
}
.hp-login__remember input {
  width: 14px;
  height: 14px;
  accent-color: var(--hp-login-ink);
  margin: 0;
}
.hp-login__forgot {
  font-size: 13px;
  color: var(--hp-login-ink);
  text-decoration: none;
  font-weight: 500;
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity 320ms var(--hp-login-easing);
}
.hp-login__forgot:hover { opacity: 0.65; }

.hp-login__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  background: var(--hp-login-ink);
  color: var(--hp-login-page);
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background 320ms var(--hp-login-easing),
    opacity 320ms var(--hp-login-easing);
}
.hp-login__submit:hover { opacity: 0.88; }
.hp-login__submit svg { transition: transform 320ms var(--hp-login-easing); }
.hp-login__submit:hover svg { transform: translateX(3px); }
.hp-login__submit:disabled { opacity: 0.5; cursor: not-allowed; }

.hp-login__foot {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(0, 40, 25, 0.65);
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(0,40,25,0.08);
}
.hp-login__foot a {
  color: var(--hp-login-ink);
  font-weight: 500;
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity 320ms var(--hp-login-easing);
}
.hp-login__foot a:hover { opacity: 0.65; }

/* ─── Focus visible accessible (ink outline) ─── */
.hp-login *:focus-visible {
  outline: 2px solid var(--hp-login-ink);
  outline-offset: 3px;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .hp-login__dialog,
  .hp-login__backdrop,
  .hp-login__close,
  .hp-login__submit svg {
    transition: none !important;
  }
  .hp-login__close:hover,
  .hp-login__close:focus-visible {
    transform: none;
  }
}


/* ════════════════════════════════════════════════════════════
   POLISH LAYER · micro-interactions, motion, premium details
   Targets existing elements via existing classes — no markup
   changes. All transitions GPU-friendly (transform/opacity).
   ════════════════════════════════════════════════════════════ */

/* ─── Smoother global easing for the existing motion engine ─── */
body.is-home .js-ready [data-anim] {
  transition-timing-function: var(--ease-out-quart);
  transition-duration: var(--t-cine);
}

/* ──────────────────────────────────────────────────────
   HERO · entrance choreography + idle/hover refinements
   ────────────────────────────────────────────────────── */
body.is-home .rl-hero { isolation: isolate; }

/* Refine ken-burns: slower and longer travel for premium feel */
body.is-home .rl-hero__bg {
  animation: hpKenBurns 38s var(--ease-out-quart) infinite alternate;
  /* Ancorada al top: el zoom escala des de dalt, la imatge no deriva avall. */
  transform-origin: center top;
  filter: saturate(1.02);
}
@keyframes hpKenBurns {
  /* Zoom pur des de dalt (transform-origin: center top a .rl-hero__bg).
     Sense translate vertical perquè la imatge no es desenganxi mai del top. */
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Stronger, more cinematic gradient at the bottom */
body.is-home .rl-hero__bg::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.55) 100%),
    radial-gradient(80% 60% at 20% 90%, rgba(0,40,25,0.3) 0%, transparent 70%);
}

/* Subtle inset border to lift the hero canvas */
body.is-home .rl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  z-index: 2;
}

/* Title : tiny lift in motion + sharpened text shadow on dark bg */
body.is-home .rl-hero__title {
  text-shadow: 0 1px 30px rgba(0,0,0,0.25);
  transition: letter-spacing var(--t-soft) var(--ease-out-quart);
}

/* Hero CTAs : softer lift, accent shadow, micro-icon shift */
body.is-home .rl-hero__btn {
  position: relative;
  transition: background var(--t-cozy) var(--ease-out-quart),
              color var(--t-cozy) var(--ease-out-quart),
              transform var(--t-cozy) var(--ease-out-quart),
              box-shadow var(--t-cozy) var(--ease-out-quart);
  box-shadow: 0 0 0 0 rgba(0,40,25,0);
}
body.is-home .rl-hero__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -12px rgba(0,0,0,0.35);
}
body.is-home .rl-hero__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0,40,25,0.55);
}
body.is-home .rl-hero__btn i.fi {
  font-size: 13px;
  line-height: 1;
  transition: transform var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-hero__btn:hover i.fi { transform: translate(3px, -3px); }

body.is-home .rl-hero__btn--blur {
  background: var(--green);
}
body.is-home .rl-hero__btn--blur:hover {
  background: var(--green);
  border-color: transparent;
}


/* ──────────────────────────────────────────────────────
   ANIM jumbo · accent underline draws under "segle"
   ────────────────────────────────────────────────────── */
body.is-home .rl-anim__title strong {
  position: relative;
  display: inline-block;
}
body.is-home .rl-anim__title strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 4%;
  bottom: 0.08em;
  height: 0.1em;
  background: var(--accent);
  border-radius: 4px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.55;
  transition: transform 1.1s var(--ease-out-quart) 0.45s;
}
body.is-home .js-ready .rl-anim__title > div.is-visible:last-child strong::after {
  transform: scaleX(1);
}

/* Soft vertical drift on the radial glow during scroll */
body.is-home .rl-anim::after {
  animation: hpAnimGlow 14s ease-in-out infinite alternate;
}
@keyframes hpAnimGlow {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-2%, -3%, 0); }
}

/* ──────────────────────────────────────────────────────
   SECTORS · rolling text (per-char vertical roll on hover)
   Inspired by https://demos.gsap.com/demo/rolling-text/
   Only applies to .rl-sectors__title once the JS marks it
   with [data-rolled="1"].
   ────────────────────────────────────────────────────── */
body.is-home .rl-sectors__title[data-rolled="1"] {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
}
body.is-home .rl-sectors__title .rt-char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1em;
  vertical-align: top;
  line-height: 1;
}
body.is-home .rl-sectors__title .rt-space {
  display: inline-block;
  width: 0.32em;
  height: 1em;
  vertical-align: top;
}
body.is-home .rl-sectors__title .rt-char__layer {
  display: block;
  line-height: 1;
  transition: transform 0.6s cubic-bezier(0.6, 0, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 22ms);
  will-change: transform;
}
body.is-home .rl-sectors__title .rt-char__layer--bot {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
body.is-home .rl-sectors__item:hover .rl-sectors__title .rt-char__layer--top {
  transform: translateY(-100%);
}
body.is-home .rl-sectors__item:hover .rl-sectors__title .rt-char__layer--bot {
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.is-home .rl-sectors__title .rt-char__layer {
    transition: none !important;
    transform: none !important;
  }
}

/* ──────────────────────────────────────────────────────
   SECTORS · animated underline + arrow appearance
   ────────────────────────────────────────────────────── */
body.is-home .rl-sectors__link {
  position: relative;
  transition: padding var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-sectors__title {
  transition: color var(--t-cozy) var(--ease-out-quart),
              transform var(--t-soft) var(--ease-out-quart);
  display: inline-block;
}
body.is-home .rl-sectors__item:hover .rl-sectors__title {
  transform: translateX(4px);
}
body.is-home .rl-sectors__count {
  transition: color var(--t-cozy) var(--ease-out-quart),
              transform var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-sectors__item:hover .rl-sectors__count {
  color: var(--green);
}


/* Subtle border colour transition */
body.is-home .rl-sectors__item {
  transition: border-color var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-sectors__item:hover {
  border-top-color: var(--green);
}

/* ──────────────────────────────────────────────────────
   FEATURED · icon refinement + softer card lift
   ────────────────────────────────────────────────────── */
body.is-home .rl-featured__card {
  transition: transform var(--t-cozy) var(--ease-out-quart),
              border-color var(--t-cozy) var(--ease-out-quart),
              box-shadow var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-featured__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px -20px rgba(0, 40, 25, 0.18);
}
body.is-home .rl-featured__card-visual {
  position: relative;
  overflow: hidden;
  transition: background var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-featured__card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 80%, rgba(0,40,25,0.22) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-featured__card:hover .rl-featured__card-visual::after {
  opacity: 1;
}
body.is-home .rl-featured__card-visual svg {
  transition: transform var(--t-soft) var(--ease-out-quart),
              stroke var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-featured__card:hover .rl-featured__card-visual svg {
  transform: scale(1.08) rotate(-1deg);
}

/* Hero image inside featured: very subtle ken-burns on dwell */
body.is-home .rl-featured__img {
  transition: transform 1.1s var(--ease-out-quart);
  will-change: transform;
}
body.is-home .rl-featured:hover .rl-featured__img {
  transform: scale(1.025);
}

/* ──────────────────────────────────────────────────────
   COMBO · refined floating titles + CTA arrow micro-shift
   ────────────────────────────────────────────────────── */
body.is-home .rl-combo__bg {
  transition: transform 1.1s var(--ease-out-quart),
              opacity var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-combo__box--image:hover .rl-combo__bg {
  transform: scale(1.05);
  opacity: 0.92;
}
body.is-home .rl-combo__floating {
  transition: transform var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-combo__box--image:hover .rl-combo__floating {
  transform: translateY(-2px);
}
body.is-home .rl-combo__title-large {
  text-shadow: 0 1px 18px rgba(0,0,0,0.18);
}

body.is-home .rl-combo__btn {
  position: relative;
  padding-bottom: 4px;
}
body.is-home .rl-combo__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transition: width var(--t-cozy) var(--ease-out-quart),
              opacity var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-combo__btn:hover::after { width: 100%; opacity: 1; }
body.is-home .rl-combo__btn i.fi {
  font-size: 14px;
  line-height: 1;
  transition: transform var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-combo__btn:hover i.fi { transform: translate(3px, -3px); }

/* ──────────────────────────────────────────────────────
   POSTS · clean card hover (img scale stays disabled per system)
   ────────────────────────────────────────────────────── */
body.is-home .rl-posts__card {
  transition: transform var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-posts__card:hover {
  transform: translateY(-4px);
}
body.is-home .rl-posts__card-img {
  transition: box-shadow var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-posts__card:hover .rl-posts__card-img {
  box-shadow: 0 20px 44px -20px rgba(0, 40, 25, 0.18);
}
body.is-home .rl-posts__card-title {
  transition: color var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-posts__card:hover .rl-posts__card-title {
  color: var(--green);
}
body.is-home .rl-posts__card-link {
  transition: gap var(--t-cozy) var(--ease-out-quart);
  gap: 6px;
}
body.is-home .rl-posts__card:hover .rl-posts__card-link {
  gap: 10px;
}
body.is-home .rl-posts__card-link i.fi {
  font-size: 12px;
  line-height: 1;
  transition: transform var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-posts__card:hover .rl-posts__card-link i.fi {
  transform: translate(2px, -2px);
}

/* ──────────────────────────────────────────────────────
   CTA · refined image hover + radial accent shift
   ────────────────────────────────────────────────────── */
body.is-home .rl-cta__bg {
  transition: transform 1.1s var(--ease-out-quart),
              opacity var(--t-soft) var(--ease-out-quart);
}
body.is-home .rl-cta__box--image:hover .rl-cta__bg {
  transform: scale(1.05);
  opacity: 0.85;
}
/* CTA inside image box · force white so it reads over the photo (global · every page) */
.rl-cta__box--image .rl-cta__bottom { color: #fff; }
.rl-cta__box--image .rl-cta__title { color: #fff; }
.rl-cta__box--image .rl-combo__btn,
.rl-cta__box--image .rl-combo__btn:hover { color: #fff !important; }
body.is-home .rl-cta__box--main::after {
  transition: transform var(--t-cine) var(--ease-out-quart);
}
body.is-home .rl-cta__box--main:hover::after {
  transform: scale(1.18) translate(8%, 8%);
}

/* ──────────────────────────────────────────────────────
   HEADER · login icon micro-pulse on focus + cleaner hover
   ────────────────────────────────────────────────────── */
.rl-header__login {
  position: relative;
}
.rl-header__login::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 40, 25, 0);
  transition: box-shadow var(--t-soft) var(--ease-out-quart);
  pointer-events: none;
}
.rl-header__login:hover::after {
  box-shadow: 0 0 0 6px rgba(0, 40, 25, 0.14);
}
.rl-header__login i {
  transition: transform var(--t-cozy) var(--ease-out-quart);
}
.rl-header__login:hover i {
  transform: scale(1.06);
}

/* Header menu trigger chevron: smoother rotation */
.rl-header__menu-trigger,
.rl-header__menu-chevron {
  transition-timing-function: var(--ease-out-quart);
}

/* ──────────────────────────────────────────────────────
   FOOTER · subtle dot hover for contact links
   ────────────────────────────────────────────────────── */
body.is-home .rl-footer__contact-circle {
  transition: background var(--t-cozy) var(--ease-out-quart),
              color var(--t-cozy) var(--ease-out-quart),
              transform var(--t-cozy) var(--ease-out-quart);
}
body.is-home .rl-footer__contact-link:hover .rl-footer__contact-circle {
  background: var(--green);
  color: #fff;
  transform: scale(1.06);
}
body.is-home .rl-footer__top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(0, 40, 25, 0.3);
  transition: transform var(--t-cozy) var(--ease-out-quart),
              background var(--t-cozy) var(--ease-out-quart),
              box-shadow var(--t-cozy) var(--ease-out-quart);
}

/* ──────────────────────────────────────────────────────
   FOCUS VISIBLE · unified ring on all interactives
   ────────────────────────────────────────────────────── */
body.is-home a:focus-visible,
body.is-home button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 10px;
}
body.is-home .rl-hero__btn:focus-visible,
body.is-home .rl-header__cta:focus-visible,
body.is-home .rl-combo__btn:focus-visible {
  border-radius: 10px;
}

/* ──────────────────────────────────────────────────────
   REDUCED MOTION · disable all polish animations
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.is-home .rl-hero__bg,
  body.is-home .rl-anim::after {
    animation: none !important;
  }
  body.is-home .rl-sectors__title::after,
  body.is-home .rl-anim__title strong::after,
  body.is-home .rl-combo__btn::after,
  body.is-home .rl-featured__card-visual::after {
    transition: none !important;
  }
  body.is-home [class*="rl-"]:hover {
    transform: none !important;
  }
}


/* ════════════════════════════════════════════════════════════
   POSTS · header amb foto + 6 cards 3×2 amb imatges grans
   ════════════════════════════════════════════════════════════ */
.hp-posts-featured .rl-featured__inner,
.hp-fites .rl-featured__inner,
#valors .rl-featured__inner {
  max-width: 1180px;
  padding: clamp(40px, 4.4vw, 64px) clamp(28px, 3vw, 44px) clamp(48px, 5vw, 72px);
}

/* ─── Blog (.hp-blog-full) · sense foto superior, card més ample ─── */
.hp-blog-full .rl-featured__img { display: none; }
.hp-blog-full .rl-featured__inner {
  margin-top: 0;
  /* same unified shell width as every other rl-featured panel (1180) */
}

/* ─── Bare cards grid · used by blog / projectes / projectes-actius
   When a beat-header sits above, that supplies the top breathing room — so the
   section itself only needs a smaller top padding before the cards. ─── */
.blog-cards-only {
  background: #fff;
  padding: 48px clamp(20px, 5vw, 56px) 120px;
}
.blog-cards-only__container {
  /* unified card-content width · matches the rl-featured white-panel shell so
     the same article card is the same width on hubs and on home/section pages */
  max-width: 1180px;
  margin: 0 auto;
}
.blog-cards-only .hp-posts-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px;
}
/* Mai una targeta sola a l'última fila. El primer card pot ser un "hero" a tota
   l'amplada (només a blog.html), cosa que desplaça el mòdul, així que distingim:
   · sense hero  -> orfe quan total ≡ 1 (mod 3)
   · amb hero    -> orfe quan total ≡ 2 (mod 3)
   En aquest cas, l'última card ocupa tota la fila. */
.blog-cards-only .hp-posts-cards:not(:has(> .hp-posts-hero)) > .rl-featured__card:last-child:nth-child(3n + 1),
.blog-cards-only .hp-posts-cards:has(> .hp-posts-hero) > .rl-featured__card:last-child:nth-child(3n + 2) {
  grid-column: 1 / -1;
}
@media (max-width: 980px) {
  .blog-cards-only .hp-posts-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* A 2 columnes: sense hero orfe si total imparell; amb hero si total parell. */
  .blog-cards-only .hp-posts-cards:not(:has(> .hp-posts-hero)) > .rl-featured__card:last-child:nth-child(odd),
  .blog-cards-only .hp-posts-cards:has(> .hp-posts-hero) > .rl-featured__card:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px) {
  .blog-cards-only .hp-posts-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Blog category chips · centered filter row inside the white card ─── */
.blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 48px;
}
.blog-chips__chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--green);
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition:
    background var(--t-base) ease,
    color var(--t-base) ease,
    border-color var(--t-base) ease,
    transform var(--t-base) ease;
}
.blog-chips__chip:hover {
  background: var(--green);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}
.blog-chips__chip.is-active {
  background: var(--green);
  color: #fff;
  border-color: transparent;
}
@media (max-width: 600px) {
  .blog-chips { gap: 8px; margin-bottom: 36px; }
  .blog-chips__chip { padding: 8px 14px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   TIMELINE · fites (nosaltres)
   3 cols × 2 files · serpentí amb línia contínua
   Fila 1 → ltr (1994 · 2008 · 2010)
   Drop dret cap a la fila 2
   Fila 2 → rtl (2014 · 2019 · 2026 en ordre cronològic;
                 visualment 2026 esquerra · 2019 centre · 2014 dreta)
   ════════════════════════════════════════════════════════════ */
.hp-fites-timeline {
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.hp-fites-timeline__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-bottom: 24px;
}
.hp-fites-timeline__row:last-child { padding-bottom: 0; }

/* Línies connectores retirades · les targetes queden com les de projectes */
.hp-fites-timeline__row::before { content: none; }
.hp-fites-timeline__row:not(:last-child)::after { content: none; }
/* LTR · drop a la DRETA (surt del card dret de la fila → entra pel dret de la següent) */
.hp-fites-timeline__row[data-dir="ltr"]:not(:last-child)::after {
  right: 16.67%;
  transform: translateX(50%);
}
/* RTL · drop a l'ESQUERRA */
.hp-fites-timeline__row[data-dir="rtl"]:not(:last-child)::after {
  left: 16.67%;
  transform: translateX(-50%);
}

/* ── Mobile · 1 col · línies col·lapsen ─────────────── */
@media (max-width: 760px) {
  .hp-fites-timeline__row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 28px;
  }
  .hp-fites-timeline__row::before { display: none; }
  .hp-fites-timeline__row:not(:last-child)::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    height: 28px;
  }
  .hp-fites-timeline__card .rl-featured__card-visual { height: 160px; }
}

.hp-fites-timeline__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  text-decoration: none;
  transition: transform var(--t-cozy) var(--ease-out-quart),
              border-color var(--t-cozy) var(--ease-out-quart),
              box-shadow var(--t-soft) var(--ease-out-quart);
}
/* Targetes estàtiques · sense hover (no obren sub-fites) */
.hp-fites-timeline__card:hover {
  transform: none;
  border-color: var(--border-soft);
  box-shadow: none;
}
.hp-fites-timeline__card { cursor: default; }

/* Pill d'any · overlay top-left · idèntic al de projectes (.rl-year-badge) */
.hp-fites-timeline__year {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--ff-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  background: #002819;
  padding: 5px 11px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 40, 25, 0.16);
}
/* Sobre el panell verd del logo la pastilla fosca es perdria · variant clara */
.hp-fites-timeline__card:has(.rl-fites-logo) .hp-fites-timeline__year {
  background: #d9e4e0;
  color: #002819;
}

.hp-fites-timeline__card .rl-featured__card-visual {
  height: 180px;
  background-color: var(--bg-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hp-fites-timeline__card .rl-featured__card-body {
  flex: 1;
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
}
.hp-fites-timeline__card .rl-featured__card-title {
  font-size: 15px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--green);
  margin-bottom: 10px;
}
.hp-fites-timeline__card .rl-featured__card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: var(--fw-light);
  margin: 0;
}

/* ── Mobile · 1 col · sense línies · ordre cronològic real ───────────── */
@media (max-width: 760px) {
  .hp-fites-timeline { gap: 18px; }
  .hp-fites-timeline__row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 0;
  }
  /* Cap línia connectora entre cards en mòbil */
  .hp-fites-timeline__row::before,
  .hp-fites-timeline__row:not(:last-child)::after { display: none; }
  /* Desfem el patró snake: les files rtl tenen el DOM invertit (per al desktop),
     així que en mòbil les reordenem perquè quedin en ordre de data ascendent. */
  .hp-fites-timeline__row[data-dir="rtl"] {
    display: flex;
    flex-direction: column-reverse;
    gap: 18px;
  }
  .hp-fites-timeline__card .rl-featured__card-visual { height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-fites-timeline__card { transition: none; transform: none !important; }
}
.hp-posts-cards {
  gap: 22px;
}

/* Força que la row 1 (hero) tingui la mateixa alçada que la row 2 (3 cards regulars) */
.hp-posts-cards {
  grid-auto-rows: 1fr;
}
.hp-posts-cards .rl-featured__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  transition: transform var(--t-cozy) var(--ease-out-quart),
              border-color var(--t-cozy) var(--ease-out-quart),
              box-shadow var(--t-soft) var(--ease-out-quart);
}
.hp-posts-cards .rl-featured__card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 40, 25, 0.16);
  box-shadow: 0 22px 44px -20px rgba(0, 40, 25, 0.18);
}
.hp-posts-cards .rl-featured__card-visual {
  height: 180px;
  background-color: var(--bg-light);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.hp-posts-cards .rl-featured__card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-cozy) var(--ease-out-quart);
}
.hp-posts-cards .rl-featured__card:hover .rl-featured__card-visual::after {
  opacity: 1;
}
.hp-posts-cards .rl-featured__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 26px;
}
.hp-posts-cards .rl-featured__card-title {
  font-size: 16px;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--green);
  margin-bottom: 12px;
}
.hp-posts-cards .rl-featured__card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: var(--fw-light);
  margin: 0;
}

@media (max-width: 980px) {
  .hp-posts-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .hp-posts-cards { grid-template-columns: 1fr !important; }
  .hp-posts-cards .rl-featured__card-visual { height: 160px; }
}

/* ─── Hero card · després de les regles regulars perquè guanyi el cascade
       Layout 2:1 horitzontal: imatge 2/3 (cols 1-2) + cos 1/3 (col 3)
       MATEIXA alçada que una row regular del grid (grid-auto-rows: 1fr) ─── */
.hp-posts-cards .rl-featured__card.hp-posts-hero {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
  align-self: stretch;
  flex-direction: initial;
  height: auto;
}
.hp-posts-cards .rl-featured__card.hp-posts-hero .rl-featured__card-visual {
  height: 100%;
  min-height: 180px;
}
.hp-posts-cards .rl-featured__card.hp-posts-hero .rl-featured__card-body {
  padding: 28px 32px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--green);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Radial accent corner (com a .rl-cta__box--main) */
.hp-posts-cards .rl-featured__card.hp-posts-hero .rl-featured__card-body::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at bottom right, rgba(0, 40, 25, 0.30), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hp-posts-cards .rl-featured__card.hp-posts-hero .rl-featured__card-title {
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  color: #fff;
  position: relative;
  z-index: 1;
}
.hp-posts-cards .rl-featured__card.hp-posts-hero .rl-featured__card-desc {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: #ffffff;
  font-weight: var(--fw-light);
  position: relative;
  z-index: 1;
}

/* Footer · pulse + data · ancorat a la part inferior */
.hp-posts-hero__footer {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.hp-posts-hero__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(0, 40, 25, 0.55);
  animation: hp-posts-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hp-posts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 40, 25, 0.6); }
  60%      { box-shadow: 0 0 0 10px rgba(0, 40, 25, 0); }
}
.hp-posts-hero__date {
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .hp-posts-hero__pulse { animation: none; }
}

@media (max-width: 760px) {
  .hp-posts-cards .rl-featured__card.hp-posts-hero {
    grid-template-columns: 1fr;
  }
  .hp-posts-cards .rl-featured__card.hp-posts-hero .rl-featured__card-visual {
    min-height: 180px;
    height: 180px;
  }
}

/* ════════════════════════════════════════════════════════════
   MEGA MENU · Productes
   Mismo panel que Serveis (chrome, blur, shadow, posición).
   Solo el grid interior pasa de 4 a 2 columnas, repartidas
   sobre la misma anchura total.
   ════════════════════════════════════════════════════════════ */
#megaProductes .rl-mega__inner,
#megaProjectes .rl-mega__inner {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  #megaProductes .rl-mega__inner,
  #megaProjectes .rl-mega__inner {
    grid-template-columns: 1fr;
  }
}


/* Labels recalibrats · centralitzat ara a components.css (universal)
   Excepció · year pill de la timeline manté la mida pròpia */
.hp-fites-timeline__year {
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}


/* ════════════════════════════════════════════════════════════
   BLOG · PAGINATION + EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.hp-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.hp-pagination__prev,
.hp-pagination__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--green);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--green);
  transition: background var(--t-cozy) var(--ease-out-quart),
              border-color var(--t-cozy) var(--ease-out-quart),
              transform var(--t-cozy) var(--ease-out-quart);
  cursor: pointer;
}
.hp-pagination__prev i,
.hp-pagination__next i {
  font-size: 16px;
  line-height: 1;
  transition: transform var(--t-cozy) var(--ease-out-quart);
}
.hp-pagination__prev:hover,
.hp-pagination__next:hover {
  border-color: var(--green);
  background: var(--bg-light);
}
.hp-pagination__next:hover i { transform: translateX(3px); }
.hp-pagination__prev:hover i { transform: translateX(-3px); }

.hp-pagination__prev--disabled,
.hp-pagination__next--disabled {
  color: var(--muted-light);
  border-color: var(--border-soft);
  pointer-events: none;
  opacity: 0.55;
}

.hp-pagination__list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp-pagination__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--muted);
  text-decoration: none;
  transition: background var(--t-cozy) var(--ease-out-quart),
              color var(--t-cozy) var(--ease-out-quart),
              transform var(--t-cozy) var(--ease-out-quart);
}
.hp-pagination__num:hover {
  background: var(--bg-light);
  color: var(--green);
}
.hp-pagination__num.is-active {
  background: var(--green);
  color: #fff;
  pointer-events: none;
}

@media (max-width: 600px) {
  .hp-pagination {
    flex-direction: column;
    gap: 16px;
  }
  .hp-pagination__list { order: -1; }
}

/* Empty state · pàgines secundàries sense articles encara */
.hp-posts-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(48px, 7vw, 96px) 24px;
  background: var(--bg-light);
  border-radius: 14px;
  gap: 16px;
}
.hp-posts-empty__pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.hp-posts-empty__pulse::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: hp-posts-pulse 2.4s ease-in-out infinite;
}
.hp-posts-empty__title {
  font-family: var(--ff-sans);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: var(--fw-light);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--green);
  margin: 0;
  max-width: 24ch;
}
.hp-posts-empty__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: var(--fw-light);
  margin: 0;
  max-width: 48ch;
}
.hp-posts-empty__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--green);
  text-decoration: none;
  padding: 12px 24px;
  background: #fff;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-top: 12px;
  transition: background var(--t-cozy) var(--ease-out-quart),
              border-color var(--t-cozy) var(--ease-out-quart);
}
.hp-posts-empty__link:hover { background: #d9e4e0; border-color: #d9e4e0; }

/* Perf: defer offscreen heavy sections so their background images and layout
   are only computed/fetched near the viewport. `auto` remembers real height
   after first render to avoid scroll jank. */
.rl-combo,
.hp-posts-featured {
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HERO · orbiting-cards portadilla (shared with Blog)
   One opening hero per service/product page. min-height accounts
   for the 96px fixed nav so the orbit reads centred in-viewport.
   ═══════════════════════════════════════════════════════════════ */
.blog-landing {
  position: relative;
  /* Pull the orbiting-cards hero up behind the fixed floating header (body has
     padding-top:96px for that header) so the rings sit flush under it — no gap. */
  margin-top: -96px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  overflow: hidden;
  background: #fff;
}
.blog-landing::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.30) 55%,
    rgba(255,255,255,0.85) 88%,
    #fff                   100%);
  z-index: 1;
  pointer-events: none;
}
.blog-landing__container {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 32px;
}
.blog-landing__container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vmin;
  height: 140vmin;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle 44vmin at center,
    rgba(255,255,255,1)    0%,
    rgba(255,255,255,1)    18%,
    rgba(255,255,255,0.94) 38%,
    rgba(255,255,255,0.74) 58%,
    rgba(255,255,255,0.42) 76%,
    rgba(255,255,255,0.16) 90%,
    rgba(255,255,255,0)    100%);
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .blog-landing__container::before {
    background: radial-gradient(circle 40vmin at center,
      rgba(255,255,255,1)    0%,
      rgba(255,255,255,1)    18%,
      rgba(255,255,255,0.94) 38%,
      rgba(255,255,255,0.74) 58%,
      rgba(255,255,255,0.42) 76%,
      rgba(255,255,255,0.16) 90%,
      rgba(255,255,255,0)    100%);
  }
}
.blog-landing__kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: var(--fw-medium);
  padding: 6px 14px;
  background: #d9e4e0;
  border-radius: 10px;
  margin-bottom: 32px;
}
.blog-landing__title {
  font-size: clamp(30px, 3.4vw, 47px);
  font-weight: var(--fw-light);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0 0 28px;
  max-width: 16ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.blog-landing__title strong {
  font-weight: var(--fw-medium);
  color: var(--green);
}
.blog-landing__lead {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  font-weight: var(--fw-light);
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 40px;
  letter-spacing: -0.005em;
}
.blog-landing__actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.blog-landing__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: var(--green);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--t-base) ease, box-shadow var(--t-base) ease;
}
.blog-landing__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 40, 25, 0.18);
}
.blog-landing__btn--ghost {
  background: transparent;
  color: var(--green);
  border: 1px solid var(--green);
}
.blog-landing__btn--ghost:hover { border-color: #d9e4e0; background: #d9e4e0; }
.blog-landing__btn i { font-size: 13px; line-height: 1; display: inline-flex; }

.blog-landing__cards {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.blog-landing__ring {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  transform-origin: 0 0;
}
.blog-landing__card {
  position: absolute;
  width: 84px;
  height: 116px;
  margin-left: -42px;
  margin-top: -58px;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 28px rgba(0, 40, 25, 0.18);
  opacity: 0;
  will-change: transform, opacity;
}
.blog-landing__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 40, 25, 0.22) 100%);
}
@media (max-width: 768px) {
  .blog-landing__card { width: 56px; height: 78px; margin-left: -28px; margin-top: -39px; border-radius: 10px; }
  /* Phone · the orbiting cards pass behind the kicker and the ghost button.
     With translucent fills they show through and read as a glitch, so make
     these two opaque (the primary CTA is already solid green). The kicker
     fill is the solid equivalent of its rgba(0,40,25,.22)-over-white tint. */
  .blog-landing__kicker {font-size: 11px;font-weight: var(--fw-medium); background: #d9e4e0; }
  .blog-landing__btn--ghost { background: #fff; }
  /* Phone · slightly smaller title + buttons so the enlarged inner ring has
     more breathing room around the copy. */
  .blog-landing__title { font-size: 26px; }
  .blog-landing__btn { padding: 11px 18px; font-size: 13px; }
}
/* Botons emparellats idèntics en mòbil · apilats i a amplada completa perquè
   els dos CTA quedin exactament de la mateixa mida (simetria visual). */
@media (max-width: 600px) {
  .rl-hero__actions,
  .blog-landing__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .rl-hero__actions .rl-hero__btn,
  .blog-landing__actions .blog-landing__btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-landing__cards { display: none; }
}

/* ════════════════════════════════════════════════════════════
   HOME · make the two rl-featured BLOCKS the same size (photo header +
   white card), while each section keeps its own inner card layout:
   · porta-dins → its native 5-in-a-row grid (smaller tiles)
   · #lectures  → its 3-col blog grid
   Only the outer shell (white-card width + padding) is unified here.
   ════════════════════════════════════════════════════════════ */
body.is-home .rl-featured__inner {
  max-width: 1180px;
  padding: clamp(40px, 4.4vw, 64px) clamp(28px, 3vw, 44px) clamp(48px, 5vw, 72px);
}

/* ════════════════════════════════════════════════════════════
   HOME · brand tint for grey backgrounds (user request):
   replace the greyish --bg-light / --bg-section tokens with #d9e4e0
   on the index page only, so every grey fill/section uses the tint.
   ════════════════════════════════════════════════════════════ */
body.is-home {
  --bg-light: #d9e4e0;
  --bg-section: #d9e4e0;
}

/* porta-dins icon cards · info box (title + complementary line) styled with
   the clean two-tier hierarchy of the reference: marked dark title over a
   legible grey subtitle. Scoped so the blog cards keep their own styling. */
body.is-home .rl-featured__cards:not(.hp-posts-cards) .rl-featured__card-body {
  padding: 15px 17px 17px;
}
body.is-home .rl-featured__cards:not(.hp-posts-cards) .rl-featured__card-title {
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--text);
}
body.is-home .rl-featured__cards:not(.hp-posts-cards) .rl-featured__card-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: var(--fw-regular);
  color: var(--muted);
}


/* ════════════════════════════════════════════════════════════
   HOME · "notable but elegant" motion pass.
   Enhances the existing reveal system (does not replace it):
   · content sections enter with more travel + a longer luxe ease
   · card cascade rises a touch more (base nth-child delays kept)
   · hero CTAs cascade in after the headline settles
   · featured cards lift a little more on hover, deeper soft shadow
   Transform/opacity only, CSS-transition driven (no per-frame work added).
   Hero + rl-anim excluded (they own bespoke entrances). Reduced-motion safe.
   ════════════════════════════════════════════════════════════ */

/* Content-section entrances · more presence */
body.is-home > section[data-reveal-section]:not(.rl-hero):not(.rl-anim) {
  transform: translateY(56px);
}
body.is-home > section[data-reveal-section]:not(.rl-hero):not(.rl-anim).is-on {
  transform: none;
  transition: opacity 1.05s var(--ease-luxe), transform 1.05s var(--ease-luxe);
}

/* Card cascade · a touch more rise (timing + nth-child delays kept from base) */
body.is-home > section[data-reveal-section] [data-reveal-stagger] > * {
  transform: translateY(34px);
}
body.is-home > section[data-reveal-section].is-on [data-reveal-stagger] > * {
  transform: none;
}

/* Hero · let the CTAs arrive just after the headline for a calm cascade */
body.is-home .rl-hero__actions[data-anim] { transition-delay: 0.42s; }

/* Featured cards · hover with a touch more lift + a deeper, softer shadow */
body.is-home .rl-featured__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px -22px rgba(0, 40, 25, 0.20);
}

@media (prefers-reduced-motion: reduce) {
  body.is-home > section[data-reveal-section]:not(.rl-hero):not(.rl-anim),
  body.is-home > section[data-reveal-section] [data-reveal-stagger] > * {
    transform: none !important;
  }
  body.is-home .rl-hero__actions[data-anim] { transition-delay: 0s !important; }
  body.is-home .rl-featured__card:hover { transform: none; }
}


/* 4-colour rule: accent on the dark rl-anim band → light tint */
body.is-home .rl-anim__title strong { color: #d9e4e0; }

/* porta-dins icon panels · unified into a single coherent corporate-green field
   (defined once in rl-system.css `.rl-featured__card-visual:has(> svg)`).
   The five per-pillar mesh overrides were removed for palette + system coherence;
   the icon is now the only differentiator between cards. */


/* ════════════════════════════════════════════════════════════
   E · Conversion & hierarchy
   Hero supporting line + above-the-fold trust strip + tap targets.
   Copy uses only verified facts (1994 · Eskimohaus® · 90% less energy
   · Catalonia/Balearics/Andorra). Palette-pure.
   ════════════════════════════════════════════════════════════ */
body.is-home .rl-hero__sub {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.5;
  color: #ffffff;
  max-width: 520px;
  margin: -8px 0 26px;
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(0,0,0,0.35);
}
.rl-trust { border-bottom: 1px solid var(--border-soft); }
/* Credentials bar = a THIN horizontal strip, never a tall block. The base
   container padding (22px 56px) already gives it the right slim height; no extra
   vertical padding on the home (an earlier 72px top turned it into a giant block). */
.rl-trust__container {
  max-width: 1440px; margin: 0 auto;
  padding: 22px 56px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 44px;
}
.rl-trust__item {
  position: relative;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: var(--fw-medium); color: var(--muted);
}
.rl-trust__item:not(:last-child)::after {
  content: ""; position: absolute; right: -22px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--border); transform: translateY(-50%);
}
@media (max-width: 600px) {
  .rl-trust__container { padding: 16px 24px; gap: 8px 26px; }
  .rl-trust__item { font-size: 11px; letter-spacing: 0.04em; }
  .rl-trust__item:not(:last-child)::after { right: -14px; }
  /* Phone · condense the trust bar to a single phrase on one line
     (the 4 items otherwise wrap to ~3 lines and read as too dense) */
  .rl-trust__item:not(:first-child) { display: none; }
  .rl-trust__item:first-child::after { display: none; }
}
/* Mobile · deixa només el claim "Certified Passivhaus Construction Company"
   (amaga la descripció llarga fins a tauleta portrait) */
@media (max-width: 768px) {
  .rl-trust__item:not(:first-child) { display: none; }
  .rl-trust__item:first-child::after { display: none; }
}
/* E13 · slimmer CTA, tap target kept ≥36px (above WCAG 2.2 AA 24px floor) */
@media (max-width: 900px) {
  .rl-header__cta { min-height: 36px; }
}



/* Posts grid de la home · 3 columnas (antes inline style, que bloqueava
   el override responsive de rl-system.css en móvil) */
.hp-posts-featured .hp-posts-cards { grid-template-columns: repeat(3, 1fr); }