/* =========================================================
   Breadcrumbs — sobre fondos oscuros y claros
   ========================================================= */

.tla-breadcrumbs {
  font: 500 12px var(--font-body);
  color: var(--fg-muted);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tla-breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.tla-breadcrumbs a:hover { color: var(--green-700); }
.tla-breadcrumbs__sep,
.tla-breadcrumbs .separator { color: var(--fg-soft); padding: 0 4px; }
.tla-breadcrumbs [aria-current="page"] { color: var(--fg); font-weight: 500; }

/* Sobre dark backgrounds (dentro de page-hero) */
.tla-page-hero .tla-breadcrumbs { color: #6B716A; }
.tla-page-hero .tla-breadcrumbs a { color: #AEB3AD; }
.tla-page-hero .tla-breadcrumbs a:hover { color: var(--green-300); }
.tla-page-hero .tla-breadcrumbs [aria-current="page"] { color: #fff; }