/* Breadcrumb absoluto en el cuadrante izq del hero, sin opacidades */
.breadcrumb {
  /* Alineado al contenedor centrado: conserva el inset de 59px respecto al
     contenido del panel (120 - 59 = 61px en diseño 1440). */
  position: absolute;
  top: 12px;
  left: calc(var(--page-pad-x) - 59px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.06px;
  color: #fff;
}

.breadcrumb__link {
  color: #fff;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__current {
  color: #fff;
  font-weight: 700;
}

.breadcrumb__sep,
.breadcrumb__ellipsis {
  display: none;
}

@media (max-width: 991px) {
/* Breadcrumb flotante en el borde superior del hero, justo bajo el header
     (4px). Va sobre la imagen, así que el contraste lo garantiza el scrim
     oscuro de .hero__media::before. */
.breadcrumb {
    position: absolute;
    top: 4px;
    left: 24px;
    right: 24px;
    padding: 0;
    z-index: 3;
  }
}