/* Encabezado de las páginas públicas (Views/Shared/Public/_UbicacionMoC): las migas de pan que indican dónde está la
   persona. El título de la página va en un h1 oculto, para buscadores y lectores de pantalla.
   Sustituye a la cabecera con imagen, que ocupaba 721 px de alto y 2,3 MB de descarga. */

/* El menú de la web es fijo y mide 100 px en cualquier ancho, así que el encabezado empieza por debajo; si no, las
   migas quedarían tapadas. La banda lleva su propio fondo oscuro para que se lea igual en todas las vistas: algunas
   arrancan con una fotografía a pantalla completa y las migas se perdían encima. La parte que queda bajo la barra
   conserva el fondo de la página y la de las migas va algo más oscura, para que no se lean como un solo bloque. */
.moc-ubicacion {
    padding: 7.5rem 0 .9rem;
    background: var(--qg-public-gradient-breadcrumb);
    color: var(--qg-public-color-white);
}

.moc-ubicacion__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--qg-public-font-body);
    /* Las migas son lo único visible del encabezado, así que se leen algo más grandes que un texto auxiliar. */
    font-size: .95rem;
}

.moc-ubicacion__miga {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--qg-public-color-white-70);
}

/* El separador se dibuja antes de cada miga menos la primera, así no hace falta marcado extra. */
.moc-ubicacion__miga + .moc-ubicacion__miga::before {
    content: "›";
    color: var(--qg-public-color-white-30);
}

.moc-ubicacion__miga a {
    color: var(--qg-public-color-white-70);
    text-decoration: none;
}

.moc-ubicacion__miga a:hover,
.moc-ubicacion__miga a:focus-visible {
    color: var(--qg-public-color-gold-light);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.moc-ubicacion__miga--actual {
    color: var(--qg-public-color-white);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .moc-ubicacion__lista {
        font-size: .8rem;
    }
}