/* ── CAPÇALERA DE PÀGINES INTERIORS ── */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--maroon);
  color: var(--white);
}
/* Tauler dinàmic en perspectiva (Groc Actiu + Granate) */
.page-hero::before {
  content: '';
  position: absolute;
  right: -160px;
  top: -40px;
  width: 760px;
  height: 520px;
  background: repeating-conic-gradient(var(--gold) 0% 25%, var(--maroon) 0% 50%) 0 0 / 88px 88px;
  transform: perspective(700px) rotateY(-38deg) rotateX(18deg);
  transform-origin: 100% 50%;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 70%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  min-height: 380px;
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-maroon);
}
.breadcrumb li + li::before { content: '/'; margin-right: 10px; color: var(--gold); }
.breadcrumb a { display: inline-block; padding: 15px 6px; margin: -15px -6px; } /* àrea de toc ≥44px sense canviar la maquetació */
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current="page"] { color: var(--gold); }

.page-hero h1 {
  font-size: clamp(64px, 10vw, 140px);
  line-height: 1;
  color: var(--white);
}
.page-hero p { max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--cream); }
.page-hero .page-meta { font-size: 14px; color: var(--on-maroon-m); }

@media (max-width: 700px) {
  .page-hero::before { width: 420px; height: 320px; right: -180px; opacity: 0.25; }
  .page-hero-inner { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
  .page-hero p { font-size: 16px; }
}