/* ==========================================================================
   Estilos propios del proyecto.
   Se carga después de main.css para no tocar el CSS original de la plantilla.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cabecera de página (breadcrumb)
   La imagen de fondo puede ser una foto clara y con mucho detalle, así que el
   título se apoya sobre una placa negra translúcida y lleva contorno negro.
   -------------------------------------------------------------------------- */
.breadcrumb-plate {
    max-width: 720px;
    margin-inline: auto;
    padding: 2rem 2.5rem;
    border-radius: 1rem;
    background-color: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.breadcrumb-plate h1,
.breadcrumb-plate span {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
    paint-order: stroke fill;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.9);
}

@media (max-width: 575.98px) {
    .breadcrumb-plate {
        padding: 1.25rem 1rem;
        border-radius: 0.75rem;
    }
}