@charset "UTF-8";
 /* Estilos para los breadcrumbs */
.breadcrumb {
  font-family: var(--fuente-secundaria);
  margin: 0.5rem 0 1.5rem; /* Reducimos márgenes superior/inferior */
  z-index: 500;
}

.breadcrumb ol {
  display: flex; 
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: center;
    line-height: 1; /* Evita altura extra */
  gap: 0.25rem; /* Reducimos espacio entre ítems */
}

.breadcrumb li {
  display: inline-flex; /* Más compacto que flex */
  align-items: center;
  margin: 0; /* Elimina márgenes por defecto de <li> */
  padding: 0 1rem; /* Elimina padding por defecto */
    line-height: 1.2; /* Altura de línea más compacta */
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 0.35rem; /* Reducimos espacio después del separador */
  margin-right: 0.25rem;
  color: var(--acero-suave);
  font-size: 1rem;
}
/* Separadores compactos */
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 0.25rem; /* Espacio mínimo alrededor del separador */
}
.breadcrumb a {
 color: var(--azul-prussia);
  text-decoration: none;
  font-size: 0.85rem; /* Tamaño de fuente ligeramente menor */
  transition: color 0.2s ease;
  padding: .5rem ; /* Pequeño padding para mejor click */
  border-radius: 3px;
}

.breadcrumb a:hover {
 color: var(--rosa-brillante);
  background-color: rgba(0, 0, 0, 0.03);
}

.breadcrumb [aria-current="page"] {
 color: var(--rosa-brillante);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.15rem 0.25rem;
}
/* Sistema de tamaños con clamp() */
.breadcrumb a,
.breadcrumb [aria-current="page"] {
  font-size: clamp(1rem, 1.25vw, 1.1rem); /* Base 1rem, escala controlada */
  transition: all 0.2s ease;
}