/* ╔══════════════════════════════════════════════════════════════════════════════╗
   ║  PAPIK · Components Rich · extracted from construccio.html inline styles     ║
   ║                                                                              ║
   ║  Contains the visual styles for sectioned components used across the site:   ║
   ║    .phases-rail · .phase-card · .phases-grid                                 ║
   ║    .audience-flow · .audience-flow__card                                     ║
   ║    .wall-section · .wall-section__layer (interactive Eskimohaus wall)        ║
   ║    .faq-list · .faq-item · .section--faq                                     ║
   ║    rl-pillar-modal (modal for the 6-capes wall details)                      ║
   ║                                                                              ║
   ║  Some rules overlap with motion-system.css · duplicate is harmless, CSS      ║
   ║  cascade resolves identical rules without effect.                            ║
   ╚══════════════════════════════════════════════════════════════════════════════╝ */

    /* construccio page-specific */

    .wall-anatomy {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
    }
    @media (max-width: 700px) { .wall-anatomy { grid-template-columns: 1fr; } }
    .wall-layer {
      display: grid; grid-template-columns: 64px 80px 1fr; gap: 18px;
      padding: 18px 22px; align-items: center;
      background: #fff; border: 1px solid var(--border);
      border-radius: var(--r-md);
      transition: border-color .25s ease, transform .25s ease;
    }
    .wall-layer:hover { border-color: var(--accent); transform: translateX(4px); }
    .wall-layer--key { background: var(--bg-light); border-color: var(--accent); }
    .wall-layer__idx { color: var(--muted-light); font-size: 13px; font-weight: 500; letter-spacing: .1em; }
    .wall-layer__depth { color: var(--green); font-size: 16px; font-weight: 500; }
    .wall-layer__name { font-size: 15px; line-height: 1.4; }
    .wall-layer__name small { display:block; color: var(--muted); font-size: 13px; margin-top: 4px; }

    .ph-levels {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    }
    @media (max-width: 900px) { .ph-levels { grid-template-columns: 1fr; } }

    .faq-list:not(.faq-list--2col) { display: flex; flex-direction: column; gap: 0; }
    .faq-item {
      padding: 28px 0; border-bottom: 1px solid var(--border);
    }
    .faq-item:first-child { border-top: 1px solid var(--border); }
    .faq-item__num {
      color: var(--accent); font-size: 13px; letter-spacing: 0.04em;
      text-transform: uppercase; margin-bottom: 8px;
    }
    .faq-item__q {
      font-size: clamp(18px, 1.8vw, 22px);
      font-weight: var(--fw-light); margin-bottom: 14px; color: var(--text);
    }
    .faq-item__a { color: var(--muted); font-size: 15px; line-height: 1.7; }
    .faq-item__a ul { list-style: disc; padding-left: 22px; margin-top: 10px; }
    .faq-item__a li { margin-bottom: 6px; }
    .faq-item__a strong { color: var(--text); font-weight: 500; }

    /* Equal-height cards across all card-grids on this page */
    .card-grid { grid-auto-rows: 1fr; }
    .card-grid .card,
    .card-grid .card > .card__link { display: flex; flex-direction: column; height: 100%; }
    .card-grid .card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
    .card-grid .card__excerpt { flex: 1 1 auto; }

    /* ─────── Phases rail · fusión rl-featured + cursor-driven slide ─────── */
    .phases-rail {
      background: var(--bg-light);
      color: var(--text);
      padding: 120px 56px;
      overflow: hidden;
      position: relative;
    }
    .phases-rail__container {
      max-width: 1440px;
      margin: 0 auto;
    }
    .phases-rail__img {
      width: 100%; height: var(--hero-band-h);
      border-radius: var(--r-xl);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    /* Match the rl-featured hero band exactly: same height + same ≤600 step. */
    @media (max-width: 600px) {
      .phases-rail__img { height: var(--hero-band-h-sm); }
    }
    .phases-rail__inner {
      /* Unified panel width · matches the rl-featured white-card shell (1180)
         so the "El nostre procés" panel lines up with the Promocions panel
         and every other rl-featured panel site-wide. Do not diverge to 1240. */
      max-width: 1180px;
      margin: -100px auto 0;
      background: #fff;
      border-radius: var(--r-xl);
      padding: 56px 0 48px;
      box-shadow: 0 16px 48px rgba(0, 40, 25, 0.08);
      position: relative;
      z-index: 2;
      overflow: hidden;
    }
    .phases-rail__head {
      padding: 0 48px;
      margin-bottom: 48px;
      display: block;
      gap: 32px;
      align-items: end;
    }
    .phases-rail__copy { min-width: 0; }
    .phases-rail__label {
      display: block;
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #002819;
      margin-bottom: 14px;
      font-weight: var(--fw-regular);
    }
    .phases-rail__heading {
      font-size: clamp(28px, 3vw, 42px);
      font-weight: var(--fw-light);
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--text);
      margin: 0 0 14px;
      max-width: 760px;
    }
    .phases-rail__heading strong { font-weight: var(--fw-medium); color: var(--green); }
    .phases-rail__lead {
      font-size: clamp(14.5px, 1vw, 16px);
      font-weight: var(--fw-light);
      line-height: 1.5;
      color: var(--muted);
      margin: 0;
      max-width: 640px;
    }
    .phases-rail__nav {
      display: inline-flex;
      gap: 8px;
      align-self: end;
      flex-shrink: 0;
    }
    .phases-rail__nav-btn {
      width: 56px; height: 56px;
      border-radius: 50%;
      background: var(--green);
      border: 0;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .phases-rail__nav-btn:hover:not(:disabled) {
      background: var(--accent);
      color: var(--green);
      transform: translateY(-1px);
    }
    .phases-rail__nav-btn:active:not(:disabled) {
      transform: translateY(0);
    }
    .phases-rail__nav-btn:disabled {
      background: var(--accent-soft);
      color: rgba(0, 40, 25, 0.28);
      box-shadow: inset 0 0 0 1px rgba(0, 40, 25, 0.16);
      cursor: not-allowed;
    }
    .phases-rail__nav-btn i {
      font-size: 20px;
      line-height: 1;
    }
    .phases-grid {
      padding: 0 48px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
    }
    .phase-card {
      padding: 30px 28px;
      background: transparent;
      border: 0;
      border-right: 1px solid rgba(0, 40, 25, 0.08);
      border-bottom: 1px solid rgba(0, 40, 25, 0.08);
      border-radius: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 280px;
      box-sizing: border-box;
      position: relative;
      box-shadow: none;
      transition: background 0.3s ease;
    }
    /* Clean the outer edges of the 3×3 grid: no right border on col 3, no bottom border on row 3 */
    .phase-card:nth-child(3n) { border-right: 0; }
    .phase-card:nth-child(n+7) { border-bottom: 0; }
    /* Universal: in a 3-col grid, the last row never has bottom border (works for 6, 9, 12...) */
    .phases-grid > .phase-card:nth-last-child(-n+3) { border-bottom: 0; }
    .phase-card:hover {
      background: rgba(0, 40, 25, 0.02);
    }

    /* SPOTLIGHT · auto-cycling active phase (parallel to Cover Flow rotation) */
    .phase-card {
      transition: background 0.55s ease;
    }
    .phase-card__icon {
      transition:
        background 0.45s ease,
        border-color 0.45s ease,
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .phase-card__title {
      transition: color 0.45s ease;
    }
    .phase-card.is-filling {
      background: rgba(0, 40, 25, 0.028);
    }
    .phase-card.is-filling .phase-card__icon {
      background: var(--accent-soft);
      border-color: rgba(0, 40, 25, 0.40);
      animation: phaseIconBreathe 2.4s ease-in-out infinite;
    }
    @keyframes phaseIconBreathe {
      0%, 100% { transform: scale(1.06); }
      50%      { transform: scale(1.16); }
    }
    .phase-card.is-filling .phase-card__icon i {
      color: var(--green);
    }
    .phase-card.is-filling .phase-card__title {
      color: var(--green);
    }
    /* Emphasize the active timeline segment while filling */
    .phase-card.is-filling .phase-card__timeline-seg.is-active {
      transform: scaleY(1.18);
      box-shadow: 0 0 0 4px rgba(0, 40, 25, 0.10);
    }

    /* Scan light continuously crossing the active card's timeline track */
    .phase-card__timeline-track {
      position: relative;
      overflow: hidden;
      border-radius: 4px;
    }
    .phase-card.is-filling .phase-card__timeline-track::after {
      content: "";
      position: absolute;
      top: -6px;
      bottom: -6px;
      left: 0;
      width: 38%;
      background: linear-gradient(90deg, transparent 0%, rgba(0, 40, 25, 0.12) 50%, transparent 100%);
      animation: phaseScan 3.2s cubic-bezier(0.55, 0, 0.45, 1) infinite;
      pointer-events: none;
    }
    @keyframes phaseScan {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(280%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .phase-card,
      .phase-card__icon,
      .phase-card__title { transition: none; }
      .phase-card.is-filling .phase-card__icon,
      .phase-card.is-filling .phase-card__timeline-track::after { animation: none; }
    }
    .phase-card__icon {
      width: 52px; height: 52px;
      background: var(--bg-light);
      border: 1px solid rgba(0, 40, 25, 0.08);
      border-radius: var(--r-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--green);
      margin-bottom: 24px;
      flex-shrink: 0;
    }
    .phase-card__icon svg {
      width: 22px; height: 22px;
      stroke-width: 1.5;
    }
    .phase-card__icon i {
      font-size: 24px;
      line-height: 1;
      color: var(--green);
      display: inline-flex;
    }
    .phase-card__num { display: none; }
    .phase-card__title {
      font-size: clamp(19px, 1.4vw, 22px);
      font-weight: var(--fw-regular);
      line-height: 1.25;
      color: var(--text);
      margin: 0 0 12px;
      letter-spacing: -0.005em;
    }
    .phase-card__text {
      font-size: 14px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0 0 22px;
      font-weight: var(--fw-light);
    }
    .phase-card__link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--green);
      letter-spacing: 0;
      font-weight: var(--fw-medium);
      text-transform: none;
      margin-top: 18px;
      transition: gap 0.25s ease;
    }
    .phase-card__timeline {
      margin-top: auto;
      padding-top: 22px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .phase-card__timeline-track {
      display: flex;
      gap: 3px;
      height: 12px;
      align-items: center;
    }
    .phase-card__timeline-seg {
      display: block;
      flex: var(--w, 1) 0 0;
      height: 5px;
      background: rgba(0, 40, 25, 0.10);
      border-radius: 3px;
      cursor: help;
      transition: background 0.25s ease, height 0.25s ease, transform 0.25s ease;
    }
    .phase-card__timeline-seg:hover {
      background: rgba(0, 40, 25, 0.22);
      height: 9px;
    }
    .phase-card__timeline-seg.is-active {
      background: var(--green);
      height: 12px;
      box-shadow: 0 0 0 0 rgba(0, 40, 25, 0.0);
      animation: tlPulse 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
    .phase-card__timeline-seg.is-active:hover {
      background: var(--green);
      height: 12px;
      transform: scaleY(1.08);
    }
    @keyframes tlPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0, 40, 25, 0.25); }
      50%      { box-shadow: 0 0 0 6px rgba(0, 40, 25, 0); }
    }
    .phase-card__timeline-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
    }
    .phase-card__timeline-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #002819;
      font-weight: var(--fw-medium);
    }
    .phase-card__timeline-value {
      font-size: 14px;
      color: var(--text);
      font-weight: var(--fw-medium);
      letter-spacing: -0.005em;
    }
    @media (prefers-reduced-motion: reduce) {
      .phase-card__timeline-seg,
      .phase-card__timeline-seg.is-active { animation: none; transition: none; }
    }
    .phase-card__link-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto; height: auto;
      background: transparent;
      color: inherit;
      transition: transform 0.25s ease;
    }
    .phase-card__link-icon svg {
      width: 16px; height: 16px;
      stroke-width: 1.6;
    }
    .phase-card:hover .phase-card__link { gap: 14px; }
    .phase-card:hover .phase-card__link-icon { transform: translateX(4px); }
    @media (max-width: 900px) {
      .phases-rail { padding: 64px 24px; }
      .phases-rail__inner {
        margin-top: -60px;
        padding: 36px 0 32px;
      }
      .phases-rail__head {
        margin-bottom: 32px;
        padding: 0 28px;
      }
      .phases-grid {
        padding: 0 28px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
      }
      .phase-card {
        padding: 24px 22px;
        min-height: 240px;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 40, 25, 0.08);
      }
      .phase-card:nth-child(odd) { border-right: 1px solid rgba(0, 40, 25, 0.08); }
      .phase-card:nth-child(3n) { border-right: 1px solid rgba(0, 40, 25, 0.08); }
      .phase-card:nth-child(2n) { border-right: 0; }
      .phase-card:nth-child(n+7) { border-bottom: 1px solid rgba(0, 40, 25, 0.08); }
      .phase-card:last-child { border-right: 0; border-bottom: 0; }
      .phase-card__title { font-size: 19px; }
    }
    @media (max-width: 600px) {
      .phases-grid { grid-template-columns: 1fr; }
      .phase-card,
      .phase-card:nth-child(odd),
      .phase-card:nth-child(3n) {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 40, 25, 0.08);
      }
      .phase-card:last-child { border-bottom: 0; }
    }

    /* Description text under rl-featured card titles (audience + guarantees sections) */
    .rl-featured__card-desc {
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.5;
      margin: 8px 0 0;
      font-weight: var(--fw-light);
    }

    /* AUDIENCE FLOW · Cover Flow style carousel (3 visible: center + 2 side)
       Sister pattern to phases-rail with its own identity (3D-rotating) */
    .audience-flow {
      background: #fff;
      padding: 80px 56px 80px;
      overflow: hidden;
    }
    .audience-flow__container {
      max-width: 1240px;
      margin: 0 auto;
    }
    .audience-flow__head {
      margin: 0 0 32px;
      max-width: 760px;
    }
    .audience-flow__head .phases-rail__heading {
      font-size: clamp(22px, 2.2vw, 32px);
      margin-bottom: 10px;
    }
    .audience-flow__head .phases-rail__lead {
      font-size: 14px;
    }
    .audience-flow__stage {
      position: relative;
      height: 480px;
      perspective: 1400px;
      perspective-origin: 50% 50%;
      margin: 0 auto;
      outline: 0;
    }
    .audience-flow__track {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .audience-flow__card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(380px, 82vw);
      height: 440px;
      padding: 0;
      background: #fff;
      border: 1px solid rgba(0, 40, 25, 0.08);
      border-radius: 22px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease, box-shadow 0.45s ease;
      cursor: pointer;
      user-select: none;
      transform-origin: center center;
      backface-visibility: hidden;
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
      z-index: 0;
      pointer-events: none;
    }
    .audience-flow__card-media {
      position: relative;
      width: 100%;
      height: 200px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      flex-shrink: 0;
    }
    .audience-flow__card-content {
      padding: 38px 26px 26px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
      min-height: 0;
    }
    /* Active (center) card */
    .audience-flow__card[data-pos="0"] {
      transform: translate(-50%, -50%) scale(1) rotateY(0);
      opacity: 1;
      z-index: 4;
      box-shadow: 0 24px 56px rgba(0, 40, 25, 0.14);
      cursor: default;
      pointer-events: auto;
    }
    /* Side cards (one step away) */
    .audience-flow__card[data-pos="1"] {
      transform: translate(calc(-50% + 230px), -50%) scale(0.86) rotateY(-22deg);
      opacity: 0.55;
      z-index: 3;
      box-shadow: 0 10px 24px rgba(0, 40, 25, 0.06);
      pointer-events: auto;
    }
    .audience-flow__card[data-pos="-1"] {
      transform: translate(calc(-50% - 230px), -50%) scale(0.86) rotateY(22deg);
      opacity: 0.55;
      z-index: 3;
      box-shadow: 0 10px 24px rgba(0, 40, 25, 0.06);
      pointer-events: auto;
    }
    /* Far cards (two steps) · visible at low opacity, progressive blur */
    .audience-flow__card[data-pos="2"] {
      transform: translate(calc(-50% + 430px), -50%) scale(0.66) rotateY(-32deg);
      opacity: 0.28;
      filter: blur(2px);
      z-index: 2;
    }
    .audience-flow__card[data-pos="-2"] {
      transform: translate(calc(-50% - 430px), -50%) scale(0.66) rotateY(32deg);
      opacity: 0.28;
      filter: blur(2px);
      z-index: 2;
    }
    /* Hidden back */
    .audience-flow__card[data-pos="3"],
    .audience-flow__card[data-pos="-3"] {
      transform: translate(-50%, -50%) scale(0.5);
      opacity: 0;
      z-index: 1;
    }
    .audience-flow__card-icon {
      position: absolute;
      bottom: -22px;
      left: 22px;
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: #fff;
      border: 1px solid rgba(0, 40, 25, 0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0, 40, 25, 0.12);
      z-index: 2;
    }
    .audience-flow__card-icon i {
      font-size: 20px;
      color: var(--green);
      line-height: 1;
    }
    .audience-flow__card-title {
      font-size: clamp(20px, 1.5vw, 24px);
      font-weight: var(--fw-regular);
      line-height: 1.22;
      color: var(--text);
      margin: 0;
      letter-spacing: -0.005em;
    }
    .audience-flow__card-text {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--muted);
      margin: 0;
      font-weight: var(--fw-light);
    }
    .audience-flow__nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      margin-top: 40px;
    }
    .audience-flow__nav-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid var(--green);
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }
    .audience-flow__nav-btn:hover {
      background: var(--green);
      color: #fff;
      border-color: transparent;
    }
    .audience-flow__nav-btn:active { transform: scale(0.94); }
    .audience-flow__nav-btn i { font-size: 14px; line-height: 1; }
    .audience-flow__dots {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .audience-flow__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(0, 40, 25, 0.14);
      border: 0;
      padding: 0;
      cursor: pointer;
      transition: background 0.3s ease, width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .audience-flow__dot.is-active {
      background: var(--green);
      width: 26px;
      border-radius: 4px;
    }
    @media (max-width: 900px) {
      .audience-flow { padding: 64px 24px; }
      .audience-flow__stage {
        height: auto;
        perspective: none;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }
      .audience-flow__track {
        display: flex;
        flex-direction: column;
        gap: 18px;
        height: auto;
      }
      .audience-flow__card,
      .audience-flow__card[data-pos="0"],
      .audience-flow__card[data-pos="1"],
      .audience-flow__card[data-pos="-1"],
      .audience-flow__card[data-pos="2"],
      .audience-flow__card[data-pos="-2"],
      .audience-flow__card[data-pos="3"],
      .audience-flow__card[data-pos="-3"] {
        position: static;
        width: 100%;
        height: auto;
        min-height: 0;
        transform: none;
        opacity: 1;
        z-index: auto;
        pointer-events: auto;
        box-shadow: 0 2px 12px rgba(0, 40, 25, 0.04);
        cursor: default;
        filter: none; /* phones stack the cover-flow flat · drop the far-card blur */
      }
      .audience-flow__card-media { height: 180px; }
      .audience-flow__nav { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .audience-flow__card { transition: opacity 0.3s ease; }
    }

    /* Small "see also" footnote inside cs-services */
    .cs-services__footnote {
      margin: 32px 0 0;
      padding: 22px 28px;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.55;
      border: 1px dashed var(--border-soft);
      border-radius: 18px;
      text-align: center;
    }
    .cs-services__footnote a {
      color: var(--green);
      font-weight: var(--fw-medium);
      text-decoration: none;
      border-bottom: 1px solid currentColor;
    }
    .cs-services__footnote a:hover { opacity: 0.75; }

    /* FAQ section · harmonize header + native <details> accordion for uniform card heights.
       Vertical rhythm matches every other section (--section-pad-y) so the FAQ block is
       coherent with the rest of the page; fallback keeps it sane if the var is absent. */
    .section--faq { padding: var(--section-pad-y, 112px) 0; background: #fff; }
    .section--faq .faq-head { max-width: 780px; margin: 0 0 44px; }
    .section--faq .faq-head .phases-rail__heading { margin-bottom: 14px; }
    .section--faq .faq-head .phases-rail__lead { max-width: 640px; }

    .section--faq .faq-list--2col {
      gap: 12px 20px;
      align-items: start;
    }
    /* Card container: now a <details> element */
    .section--faq .faq-item,
    .section--faq .faq-item:first-child,
    .section--faq .faq-list--2col > .faq-item:nth-child(2) {
      padding: 0;
      border: 1px solid rgba(0, 40, 25, 0.08);
      border-radius: 18px;
      background: rgba(0, 40, 25, 0.04);
      overflow: hidden;
      transition: border-color 0.3s ease, background 0.3s ease;
    }
    .section--faq .faq-item:hover {
      border-color: rgba(0, 40, 25, 0.16);
      background: rgba(0, 40, 25, 0.08);
    }
    /* Summary = always-visible header (question + chevron). Hide default disclosure marker. */
    .section--faq .faq-item > summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 26px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 16px;
      user-select: none;
      outline: 0;
    }
    .section--faq .faq-item > summary::-webkit-details-marker { display: none; }
    .section--faq .faq-item > summary::marker { content: ""; font-size: 0; }
    .section--faq .faq-item > summary > .faq-item__text {
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 10px;
    }
    .section--faq .faq-item__num {
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--muted);
      font-weight: var(--fw-medium);
      margin: 0;
      flex-shrink: 0;
    }
    /* Divider between the number and the question · "01 | Question" */
    .section--faq .faq-item__num::after {
      content: "|";
      margin-left: 10px;
      color: rgba(0, 40, 25, 0.30);
      font-weight: var(--fw-light);
    }
    .section--faq .faq-item__q {
      font-size: clamp(15px, 1.1vw, 16.5px);
      font-weight: var(--fw-medium);
      line-height: 1.32;
      letter-spacing: -0.005em;
      margin: 0;
      color: var(--text);
    }
    .section--faq .faq-item__chevron {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(0, 40, 25, 0.06);
      color: var(--green);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease;
    }
    .section--faq .faq-item__chevron i { font-size: 12px; line-height: 1; }

    /* Open state: chevron rotates, color emphasis */
    .section--faq .faq-item[open] {
      background: rgba(0, 40, 25, 0.08);
      border-color: rgba(0, 40, 25, 0.18);
    }
    .section--faq .faq-item[open] .faq-item__chevron {
      transform: rotate(180deg);
      background: var(--green);
      color: #fff;
    }

    /* Answer panel */
    .section--faq .faq-item__a {
      padding: 0 26px 22px;
      font-size: 13.5px;
      line-height: 1.65;
      color: var(--muted);
    }
    .section--faq .faq-item__a p { margin: 0 0 10px; }
    .section--faq .faq-item__a p:last-child { margin-bottom: 0; }
    .section--faq .faq-item__a ul { padding-left: 18px; margin: 8px 0 0; list-style: disc; }
    .section--faq .faq-item__a li { margin-bottom: 4px; }
    .section--faq .faq-item__a strong { color: var(--text); font-weight: var(--fw-medium); }
    .section--faq .faq-item__a em { font-style: normal; color: var(--text); }

    @media (max-width: 900px) {
      .section--faq { padding: 64px 0 56px; }
      .section--faq .faq-head { margin-bottom: 28px; }
      .section--faq .faq-list--2col { gap: 10px; grid-template-columns: 1fr; }
      .section--faq .faq-item > summary { padding: 20px 22px; gap: 12px; }
      .section--faq .faq-item__a { padding: 0 22px 22px; }
      .section--faq .faq-item__chevron { width: 28px; height: 28px; }
    }

    /* SEO-only section: kept in the DOM (crawlable + accessible) but visually hidden.
       For internal-link sitemap content that doesn't belong in the visual flow. */
    .section--seo-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

  
    /* ───── Beat header · unified chapter marker (8 narrative beats) ───── */
    .beat-header {
      padding: 88px 32px 0;
      background: transparent;
    }
    /* Inherit the background of the immediately following section so beat-header and module read as one chapter */
    .beat-header:has(+ .rl-featured),
    .beat-header:has(+ .phases-rail) {
      background: var(--bg-light);
    }
    /* Pull the module section close to its chapter marker (with breathing room) */
    .beat-header + section { padding-top: 56px !important; }

    /* ───── Arch variant · architectural blueprint numeral as backdrop ───── */
    /* ========== MOTION FOUNDATION ========== */
    /* Easing tokens (Apple/Linear/Stripe vocabulary) */
    :root {
      --ease-luxe:     cubic-bezier(0.16, 1, 0.3, 1);     /* hero reveals · slow start, dramatic ease out */
      --ease-snap:     cubic-bezier(0.32, 0.72, 0, 1);    /* iOS scroll-snap feel */
      --ease-physical: cubic-bezier(0.4, 0, 0.2, 1);      /* Material Design standard */
      --ease-bounce:   cubic-bezier(0.68, -0.6, 0.32, 1.6); /* magnetic, springy */
      --dur-fast:      240ms;
      --dur-base:      420ms;
      --dur-cinematic: 1.2s;
    }
    /* Scroll model · Lenis takes control · native smooth-scroll is OFF (Lenis would fight it) */
    html { scroll-padding-top: 96px; }
    .beat-header--arch {
      position: relative;
      overflow: hidden;
      padding: 32px;
      min-height: calc(100vh - 96px);
      min-height: calc(100dvh - 96px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* Content sections vertically center their contents · `safe center` keeps tall content anchored to top so nothing is cut off above the fold */
    /* Grid-stack numeral + content in the SAME cell so they share an exact geometric center */
    .beat-header--arch .beat-header__container {
      position: relative;
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      place-items: center;
      text-align: center;
      width: 100%;
    }
    .beat-header--arch .beat-header__num-large {
      grid-area: 1 / 1;
      font-family: inherit;
      font-size: clamp(180px, 26vw, 340px);
      font-weight: var(--fw-regular);
      line-height: 1;
      letter-spacing: -0.05em;
      color: transparent;
      -webkit-text-stroke: 1.5px var(--green);
      text-stroke: 1.5px var(--green);
      opacity: 0.14;
      pointer-events: none;
      user-select: none;
      z-index: 0;
      white-space: nowrap;
      margin: 0;
    }
    .beat-header--arch .beat-header__content {
      grid-area: 1 / 1;
      z-index: 1;
      max-width: 1040px;
      padding: 0 16px;
    }
    .beat-header--arch .beat-header__title {
      font-family: inherit;
      font-size: clamp(30px, 3.6vw, 48px);
      font-weight: var(--fw-light);
      line-height: 1.18;
      letter-spacing: -0.014em;
      color: var(--text);
      margin: 0 auto;
      max-width: 1040px;
    }
    .beat-header--arch .beat-header__title strong {
      font-weight: var(--fw-medium);
      color: var(--green);
    }
    /* Scroll-hint · prominent drip-line + chevron · visible "scroll-down" indicator on every beat-header */
    .beat-header__scroll-hint {
      position: absolute;
      bottom: 44px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      color: var(--green);
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 2;
    }
    .beat-header__scroll-hint-track {
      position: relative;
      width: 2px;
      height: 56px;
      background: rgba(0, 40, 25, 0.18);
      border-radius: 2px;
      overflow: hidden;
    }
    .beat-header__scroll-hint-dot {
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 18px;
      background: var(--green);
      border-radius: 2px;
      animation: scroll-hint-drip 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }
    .beat-header__scroll-hint-chevron {
      width: 28px;
      height: 18px;
      stroke-width: 2.4;
      opacity: 0.95;
      animation: scroll-hint-chev 2.4s ease-in-out infinite;
    }
    @keyframes scroll-hint-drip {
      0%   { transform: translateY(-20px); opacity: 0; }
      18%  { opacity: 1; }
      82%  { opacity: 1; }
      100% { transform: translateY(56px); opacity: 0; }
    }
    @keyframes scroll-hint-chev {
      0%, 100% { transform: translateY(0);   opacity: 0.8; }
      50%      { transform: translateY(5px); opacity: 1; }
    }
    /* During a snap transition · gracefully fade out so the indicator doesn't ghost */
    body.is-snapping .beat-header__scroll-hint {
      opacity: 0;
      transform: translate(-50%, 14px);
    }
    @media (prefers-reduced-motion: reduce) {
      .beat-header__scroll-hint-dot,
      .beat-header__scroll-hint-chevron { animation: none; }
    }
    @media (max-height: 600px) {
      .beat-header__scroll-hint { display: none; }
    }
    /* Homogenise the gap between consecutive beats by capping the previous section's bottom padding */
    section:has(+ .beat-header) { padding-bottom: 48px !important; }
    @media (max-width: 768px) {
      .beat-header--arch { padding: 64px 22px; }
      .beat-header--arch .beat-header__num-large {
        font-size: clamp(140px, 36vw, 220px);
        -webkit-text-stroke-width: 1.2px;
      }
      section:has(+ .beat-header) { padding-bottom: 32px !important; }
    }
    .beat-header__container {
      max-width: 880px;
      margin: 0 auto;
      text-align: center;
    }
    .beat-header__num {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      font-size: 12px;
      font-weight: var(--fw-medium);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--green-light);
      margin-bottom: 24px;
    }
    .beat-header__num::before,
    .beat-header__num::after {
      content: "";
      display: inline-block;
      width: 36px;
      height: 1px;
      background: currentColor;
      opacity: 0.5;
    }
    .beat-header__title {
      font-family: inherit;
      font-size: clamp(30px, 3.6vw, 48px);
      font-weight: var(--fw-light);
      line-height: 1.15;
      letter-spacing: -0.014em;
      color: var(--text);
      margin: 0 auto;
      max-width: 820px;
    }
    
    /* Restored module sub-titles · second tier under each beat-header */
    
    .rl-featured__divider {
      border: 0;
      border-top: 1px solid var(--border-soft);
      margin: 56px 0 40px;
      width: 100%;
    }
    /* Filled-icon variant · same textured corporate-green field as the canonical
       rl-system `:has(> i)` tile (mint bloom + soft black vignette over #002819), so
       filled and plain icon cards read as ONE family on every page. */
    .rl-featured__cards--filled .rl-featured__card-visual {
      background:
        radial-gradient(125% 120% at 78% 12%, rgba(217, 228, 224, 0.20) 0%, rgba(217, 228, 224, 0) 52%),
        radial-gradient(120% 120% at 12% 100%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
        #002819;
    }
    .rl-featured__cards--filled .rl-featured__card-visual i,
    .rl-featured__cards--filled .rl-featured__card-visual svg {
      color: #fff;
    }
    h3.rl-featured__title,
    h3.phases-rail__heading,
    h3.rl-posts__title {
      font-size: clamp(20px, 2.2vw, 28px);
      margin-bottom: 40px;
      letter-spacing: -0.005em;
      font-weight: var(--fw-light);
    }
    h3.rl-featured__title strong,
    h3.phases-rail__heading strong,
    h3.rl-posts__title strong {
      font-weight: var(--fw-medium);
      color: var(--green);
    }
    .beat-header__title strong {
      font-weight: var(--fw-medium);
      color: var(--green);
    }
    @media (max-width: 768px) {
      .beat-header { padding: 72px 22px 24px; }
      .beat-header__num { font-size: 11px; letter-spacing: 0.04em; margin-bottom: 18px; }
      .beat-header__num::before,
      .beat-header__num::after { width: 24px; }
    }
  </style>


  /* ════════════════════════════════════════════
     WALL SECTION · corporate table format
     6 homogeneous rows, divider lines, clean typography
     ═══════════════════════════════════════════ */
  .rl-combo__box.wall-section {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 0;
    overflow: hidden;
    font-family: 'TT Firs Neue', sans-serif;
    font-style: normal;
  }
  .wall-section__layer {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: center;
    padding: 0 32px;
    color: var(--green);
    background: #fff;
    border-bottom: 1px solid rgba(0, 40, 25, 0.08);
    cursor: pointer;
    outline: none;
    transition: background 0.25s cubic-bezier(0.25, 1, 0.5, 1),
                color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .wall-section__layer:last-child { border-bottom: 0; }
  .wall-section__layer:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
    border-radius: 2px;
  }
  .wall-section__layer:hover {
    background: rgba(0, 40, 25, 0.10);
  }
  /* Index column (left) */
  .wall-section__layer::before {
    content: attr(data-idx);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-right: 24px;
    min-width: 22px;
    text-align: left;
    flex-shrink: 0;
    transition: color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .wall-section__layer:hover::before { color: var(--accent); }
  /* Depth column (right) */
  .wall-section__layer::after {
    content: attr(data-cm);
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  /* Name column (center) */
  .wall-section__name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--green);
    letter-spacing: -0.005em;
    padding-right: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Hide leftover SVG (vestigial from house-iso experiment) */
  .rl-combo__box.wall-section .house-iso__svg { display: none !important; }
  /* Mini-stats grid inside rl-combo__box--main (green box) · compact */
  .rl-combo__stats {
    list-style: none;
    margin: 16px 0 0;
    padding: 16px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .rl-combo__stats li {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
    min-width: 0;
  }
  .rl-combo__stats strong {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.005em;
    font-style: normal;
  }
  .rl-combo__stats span {
    font-size: 11.5px;
    font-weight: 300;
    color: #d9e4e0;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
  /* Light variant · for stats inside rl-combo__box--white (cream/white box) */
  .rl-combo__stats--light {
    border-top-color: rgba(0, 40, 25, 0.10);
  }
  .rl-combo__stats--light strong { color: var(--green); }
  .rl-combo__stats--light span { color: var(--muted); }
  /* Boxes with stats need to grow · disable fixed min-height + overflow clipping */
  .rl-combo__box:has(.rl-combo__stats) {
    min-height: 0;
    overflow: visible;
  }
  /* Generous breathing room between stats block and CTA button */
  .rl-combo__box:has(.rl-combo__stats) .rl-combo__btn {
    margin-top: 40px;
  }
  .rl-combo__stats { margin-bottom: 4px; }
  @media (max-width: 720px) {
    .rl-combo__stats { grid-template-columns: 1fr; gap: 10px; }
    .rl-combo__stats strong { font-size: 15px; }
  }

  /* Visually hidden but indexable by Google + accessible via aria */
  .seo-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  /* Mobile */
  @media (max-width: 720px) {
    .wall-section__layer { padding: 0 20px; }
    .wall-section__layer::after { right: 20px; font-size: 11px; }
    .wall-section__name { padding-right: 64px; font-size: 13px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wall-section__layer,
    .wall-section__layer::before { transition: none; }
  }
</style>

/* ═══ Fit-to-viewport · #projectes grid (compartit per rehabilitacio + construccio) ═══ */
/* Catàleg de 6 cards 3×2 que ha de caber sencer a una sola pantalla.
   Mides harmonitzades amb el catàleg de promocio (#promocions) per coherència entre serveis. */
/* #projectes uses the canonical rl-posts spacing inherited from rl-system.css.
   Per-page overrides live in each service page's local <style> block. */

/* ═══ Refined FAQ variant (was inline in rehabilitacio.html) ═══ */
/* Refined FAQ · scoped override · keeps card chrome, refines typography + microdetails */
.section--faq.section--faq--refined .faq-list--2col {
  gap: 14px 22px;
}

/* Card stays · just a slightly lighter border + a hint of inner depth on hover */
.section--faq--refined .faq-item,
.section--faq--refined .faq-item:first-child,
.section--faq--refined .faq-list--2col > .faq-item:nth-child(2) {
  border: 1px solid rgba(0, 40, 25, 0.08);
  border-radius: 18px;
  background: rgba(0, 40, 25, 0.04);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.section--faq--refined .faq-item:hover {
  border-color: rgba(0, 40, 25, 0.18);
  background: rgba(0, 40, 25, 0.07);
  transform: translateY(-1px);
}
.section--faq--refined .faq-item[open] {
  background: rgba(0, 40, 25, 0.06);
  border-color: rgba(0, 40, 25, 0.22);
}

/* Summary · index | question | toggle */
.section--faq--refined .faq-item > summary {
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 36px 1fr 26px;
  align-items: center;
  column-gap: 18px;
}
.section--faq--refined .faq-item > summary > .faq-item__text {
  display: contents;
}

/* Numeral · oversized, ghosted, sits in left gutter like an editorial index */
.section--faq--refined .faq-item__num {
  grid-column: 1;
  align-self: center;
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: rgba(0, 40, 25, 0.22);
  font-weight: var(--fw-light);
  font-feature-settings: "tnum";
  line-height: 1;
  transition: color 0.35s ease;
}
.section--faq--refined .faq-item:hover .faq-item__num,
.section--faq--refined .faq-item[open] .faq-item__num {
  color: var(--green);
}

/* Question · thinner weight, slightly bigger, more breathing room */
.section--faq--refined .faq-item__q {
  grid-column: 2;
  margin: 0;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: var(--fw-light);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
}

/* Toggle · rounded chip with Flaticon UIcons Thin Rounded `fi-tr-add` icon.
   On open the icon rotates 45° to read as a × close-affordance. No custom SVG, no pseudo-element shapes. */
.section--faq--refined .faq-item__chevron {
  grid-column: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.section--faq--refined .faq-item__chevron i {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.section--faq--refined .faq-item:hover .faq-item__chevron {
  border-color: var(--green);
  background: rgba(0, 40, 25, 0.04);
}
.section--faq--refined .faq-item[open] .faq-item__chevron {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.section--faq--refined .faq-item[open] .faq-item__chevron i {
  transform: rotate(180deg);
}

/* Answer · indented to align with the question column, no left rule (stays within the card) */
.section--faq--refined .faq-item__a {
  padding: 0 26px 24px 80px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.section--faq--refined .faq-item__a strong { color: var(--text); font-weight: var(--fw-medium); }

@media (max-width: 900px) {
  .section--faq--refined .faq-list--2col { gap: 12px; grid-template-columns: 1fr; }
  .section--faq--refined .faq-item > summary {
    grid-template-columns: 30px 1fr 22px;
    column-gap: 14px;
    padding: 20px 22px;
  }
  .section--faq--refined .faq-item__num { font-size: 18px; }
  .section--faq--refined .faq-item__chevron { width: 22px; height: 22px; }
  .section--faq--refined .faq-item__a { padding: 0 22px 22px 66px; }
}

/* ═══ .is-focused premium focus state for beat-header--arch (was inline in rehabilitacio.html) ═══ */
/* Premium "focus of attention" treatment for the centered numbered block.
   Subtle · the active block reads as primary, others recede without dimming the content. */
.beat-header--arch .beat-header__num-large,
.beat-header--arch .beat-header__title,
.beat-header--arch .beat-header__scroll-hint {
  transition: opacity 0.7s cubic-bezier(0.32, 0.72, 0, 1),
              -webkit-text-stroke-width 0.7s cubic-bezier(0.32, 0.72, 0, 1),
              letter-spacing 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.beat-header--arch.is-focused .beat-header__num-large {
  opacity: 0.20 !important;
  -webkit-text-stroke-width: 1.9px;
  text-stroke-width: 1.9px;
}
.beat-header--arch.is-focused .beat-header__scroll-hint { opacity: 1; }
.beat-header--arch:not(.is-focused) .beat-header__scroll-hint { opacity: 0.42; }

/* ═══ Phases-rail dins #fases · catàleg-style cards (compartit per promocio, rehabilitacio, construccio) ═══ */
/* HEREDA pixel-perfect el contracte visual de rl-featured__card. Mateix gap, mateix panell d'icona (100px),
   mateixes mides tipogràfiques. La timeline de barres es desactiva. Només la durada al peu. */

#fases .phases-grid {
  padding: 0 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#fases .phase-card {
  padding: 0 !important;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 320px !important;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  box-shadow: none;
  transition: transform var(--t-base) ease, border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
/* Anul·la les regles d'arestes obertes del phases-rail default · funciona per a 6, 8, 9 cards */
#fases .phase-card:nth-child(3n),
#fases .phase-card:nth-child(n+7),
#fases .phases-grid > .phase-card:nth-last-child(-n+3) {
  border-right: 1px solid var(--border-soft) !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
#fases .phase-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--sh-card-hover-sm);
  background: #fff;
}

/* Panell d'icona · LITERAL còpia de rl-featured__card-visual */
#fases .phase-card__icon {
  width: 100% !important;
  height: 100px !important;
  flex: 0 0 100px;
  /* Light tile · mint textured field (white bloom + soft green vignette + #d9e4e0),
     the light-green counterpart of the dark tile and the rl-featured card visuals. */
  background:
    radial-gradient(125% 120% at 78% 12%, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(120% 120% at 12% 100%, rgba(0, 40, 25, 0.12) 0%, rgba(0, 40, 25, 0) 55%),
    #d9e4e0;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fases .phase-card__icon i {
  font-size: 28px !important;
  line-height: 1;
  color: var(--green);
}

/* Checkerboard · senars en verd corporatiu amb icona blanca.
   Dark tile · EXACT same textured field as the rl-featured card visuals above
   (mint bloom + black vignette + #002819) so both share one background language. */
#fases .phase-card:nth-child(odd) .phase-card__icon {
  background:
    radial-gradient(125% 120% at 78% 12%, rgba(217, 228, 224, 0.20) 0%, rgba(217, 228, 224, 0) 52%),
    radial-gradient(120% 120% at 12% 100%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
    #002819;
}
#fases .phase-card:nth-child(odd) .phase-card__icon i {
  color: #fff;
}

/* Body · ressuscita el __num (heretat com display:none), padding generós perquè respiri */
#fases .phase-card__num {
  display: block;
  padding: 22px 20px 8px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--fw-medium);
  margin: 0;
  line-height: 1.2;
}
#fases .phase-card__title {
  padding: 0 20px;
  font-size: 13.5px !important;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--text);
  margin: 0 0 12px !important;
  letter-spacing: 0;
}
#fases .phase-card__text {
  padding: 0 20px 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 !important;
  font-weight: var(--fw-light);
}

/* Timeline · oculta la barra de segments. Només queda la durada com a peu subtil. */
#fases .phase-card__timeline {
  margin-top: auto;
  padding: 14px 20px 18px !important;
  border-top: 1px solid rgba(0, 40, 25, 0.06);
  gap: 0 !important;
}
#fases .phase-card__timeline-track { display: none !important; }
#fases .phase-card__timeline-meta {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
#fases .phase-card__timeline-label { display: none !important; }
#fases .phase-card__timeline-value {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: var(--fw-medium);
}

/* Neutralitza l'spotlight is-filling perquè no trenqui la chrome */
#fases .phase-card.is-filling { background: #fff; }
#fases .phase-card.is-filling .phase-card__icon {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 900px) {
  #fases .phases-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 24px; }
  #fases .phase-card__icon { height: 88px !important; flex-basis: 88px; }
}

/* ═══ Phase modal · popup amb informació comercial per fitxa (compartit per les tres pàgines) ═══ */
#fases .phase-card { cursor: pointer; }
#fases .phase-card:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.phase-modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(720px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100vh - 64px);
  margin: auto;
  color: var(--text);
  overflow: hidden; /* el scroll viu al body, no al dialog */
}
.phase-modal::backdrop {
  background: rgba(0, 40, 25, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.phase-modal__inner {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 40, 25, 0.20);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}
.phase-modal__visual { flex: 0 0 auto; }
.phase-modal__close { display: none !important; } /* botó × eliminat · tanca amb ESC o clic al backdrop */

/* Bloqueja el scroll del document mentre el modal és obert · evita que Lenis es mengi el scroll intern */
html.is-modal-open,
body.is-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

/* ═══ Language switcher · al header de totes les pàgines · injectat per js/lang-switcher.js ═══ */
.rl-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 18px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  user-select: none;
}
.rl-lang-switch__btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  color: var(--muted);
  text-decoration: none;
  background: var(--accent-soft);
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  border-radius: 10px;
  transition: color 0.25s ease, background 0.25s ease;
}
.rl-lang-switch__btn:hover {
  color: var(--green);
}
.rl-lang-switch__btn.is-active {
  color: var(--green);
  font-weight: var(--fw-medium);
  pointer-events: none;
}
.rl-lang-switch__sep {
  width: 1px;
  height: 10px;
  background: rgba(0, 40, 25, 0.18);
  margin: 0 2px;
}
@media (max-width: 900px) {
  .rl-lang-switch { margin-right: 12px; font-size: 11px; }
  .rl-lang-switch__btn { padding: 6px 6px; }
}
.phase-modal__visual {
  width: 100%;
  height: 140px;
  /* Light tile · same mint textured field as the #fases light phase-card icons. */
  background:
    radial-gradient(125% 120% at 78% 12%, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(120% 120% at 12% 100%, rgba(0, 40, 25, 0.12) 0%, rgba(0, 40, 25, 0) 55%),
    #d9e4e0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Dark tile · EXACT rl-featured / dark phase-card icon gradient. */
.phase-modal__visual--filled {
  background:
    radial-gradient(125% 120% at 78% 12%, rgba(217, 228, 224, 0.20) 0%, rgba(217, 228, 224, 0) 52%),
    radial-gradient(120% 120% at 12% 100%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 55%),
    #002819;
}
.phase-modal__visual i {
  font-size: 42px;
  line-height: 1;
  color: var(--green);
}
.phase-modal__visual--filled i { color: #fff; }
.phase-modal__body {
  padding: 32px 36px 36px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.phase-modal__num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: var(--fw-medium);
  margin: 0 0 10px;
}
.phase-modal__title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.phase-modal__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 24px;
  font-weight: var(--fw-light);
}
.phase-modal__details {
  border-top: 1px solid rgba(0, 40, 25, 0.10);
  padding-top: 22px;
  margin-bottom: 18px;
}
.phase-modal__details h3 {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: var(--fw-medium);
  margin: 0 0 10px;
}
.phase-modal__details h3:not(:first-child) { margin-top: 22px; }
.phase-modal__details ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.phase-modal__details li {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 8px;
  font-weight: var(--fw-light);
  padding-left: 16px;
  position: relative;
}
.phase-modal__details li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--green);
  font-weight: var(--fw-medium);
}
.phase-modal__details p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 10px;
  font-weight: var(--fw-light);
}
.phase-modal__details strong {
  color: var(--text);
  font-weight: var(--fw-medium);
}
.phase-modal__duration {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: var(--fw-medium);
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(0, 40, 25, 0.15);
  border-radius: 999px;
}
@media (max-width: 600px) {
  .phase-modal__visual { height: 112px; }
  .phase-modal__visual i { font-size: 32px; }
  .phase-modal__body { padding: 24px 22px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .phase-modal::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .phase-modal__close { transition: none; }
}

/* phases-rail image · support real <img> child (10/10 audit: bg-image → <img>) */
.phases-rail__img { position: relative; overflow: hidden; }
.phases-rail__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lang switch items · authorized 10px button radius (were inheriting 8px) */
.rl-lang-switch__item, .rl-lang-switch__menu a { border-radius: 10px; }

    /* ════════════════════════════════════════════════════════════════
       FAQ v2 · two-column quiet accordion. Soft mint rows (no card
       chrome: no border, no shadow, no lift), NO chevron icon, mint
       number tile that inks corporate on open, answer in a soft block,
       native height animation. One item open at a time (motion-system.js
       closes siblings) so the two columns never fight each other.
       ════════════════════════════════════════════════════════════════ */
    .faq-v2 .faq-list--2col {
      gap: 16px 24px;
      align-items: start;
    }
    /* Independent columns (built by motion-system.js): each stacks its own
       items, so an open panel never leaves a dead gap beside a closed one */
    .faq-v2 .faq-list--2col.faq-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 24px;
      align-items: start;
    }
    .faq-v2 .faq-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }
    .faq-v2 .faq-item,
    .faq-v2 .faq-item:first-child,
    .faq-v2 .faq-list--2col > .faq-item:nth-child(2) {
      background: rgba(217, 228, 224, 0.30);
      border: none;
      border-radius: 16px;
      box-shadow: none;
      overflow: hidden;
      transition: background 0.22s ease;
    }
    .faq-v2 .faq-item:hover {
      background: rgba(217, 228, 224, 0.55);
      border: none;
      box-shadow: none;
      transform: none;
    }
    .faq-v2 .faq-item > summary {
      padding: 20px 24px;
      cursor: pointer;
      user-select: none;
      outline: 0;
      font-size: 15px;
      font-weight: var(--fw-medium);
      color: var(--text);
      line-height: 1.4;
    }
    .faq-v2 .faq-item > summary::-webkit-details-marker { display: none; }
    .faq-v2 .faq-item > summary:has(.faq-item__num) {
      display: grid;
      grid-template-columns: 34px 1fr;
      column-gap: 14px;
      align-items: center;
    }
    .faq-v2 .faq-item > summary > .faq-item__text {
      display: contents;
    }
    /* No chevron */
    .faq-v2 .faq-item__chevron { display: none; }
    /* Number · mint tile on white chip, inks corporate on open */
    .faq-v2 .faq-item__num {
      display: inline-grid;
      place-items: center;
      width: 34px;
      height: 34px;
      background: #fff;
      color: #002819;
      border-radius: 10px;
      font-size: 12px;
      letter-spacing: 0.04em;
      flex-shrink: 0;
      transition: background 0.24s ease, color 0.24s ease;
    }
    .faq-v2 .faq-item__num::after { content: none; }
    .faq-v2 .faq-item__q {
      font-size: clamp(15px, 1.15vw, 16.5px);
      transition: color 0.18s ease;
    }
    .faq-v2 .faq-item[open] {
      background: rgba(217, 228, 224, 0.55);
      border: none;
      box-shadow: none;
    }
    .faq-v2 .faq-item[open] .faq-item__num {
      background: #002819;
      color: #fff;
    }
    /* Answer · white soft block inside the mint row */
    .faq-v2 .faq-item__a {
      margin: 0 24px 22px;
      padding: 16px 18px;
      background: #fff;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.65;
    }
    /* Plain-markup variant (communities FAQs): answer body mirrors __a */
    .faq-v2 .faq-item__body {
      margin: 0 24px 22px;
      padding: 16px 18px;
      background: #fff;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.65;
    }
    .faq-v2 .faq-item__body p { margin: 0 0 10px; }
    .faq-v2 .faq-item__body p:last-child { margin-bottom: 0; }

    /* Native open/close animation (Chromium 131+; progressive elsewhere) */
    .faq-v2 .faq-item { interpolate-size: allow-keywords; }
    .faq-v2 .faq-item::details-content {
      height: 0;
      opacity: 0;
      overflow: clip;
      transition: height 0.34s cubic-bezier(0.32, 0.72, 0, 1),
                  opacity 0.26s ease,
                  content-visibility 0.34s allow-discrete;
    }
    .faq-v2 .faq-item[open]::details-content {
      height: auto;
      opacity: 1;
    }
    @media (max-width: 900px) {
      .faq-v2 .faq-list--2col { grid-template-columns: 1fr; gap: 12px; }
      .faq-v2 .faq-item > summary { padding: 18px 20px; }
      .faq-v2 .faq-item__num { width: 30px; height: 30px; border-radius: 9px; }
      .faq-v2 .faq-item__a { margin: 0 20px 18px; padding: 14px 15px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .faq-v2 .faq-item::details-content { transition: none; }
    }
    }