/* ============================================================================
   PATA AMARILLA — breadcrumbs.css
   ============================================================================
   Migas de pan premium. Formato horizontal, chevron sutil, home icon al
   inicio, pagina actual en negro bold (no clic). Hover de links: subrayado
   ambar (color de marca). Fuente --pa-font-micro.

   Posicion: antes del hero/entry-header, dentro del flujo normal del
   contenido. Alineado al contenedor de 1160px del sitio.
   ============================================================================ */

.pa-crumbs {
	max-width: 1160px;
	margin: 0 auto;
	padding: 18px 24px 6px;
	font-family: var(--pa-font-cuerpo);
}

.pa-crumbs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--pa-font-micro);
	line-height: 1.2;
	letter-spacing: 0.01em;
}

/* Item generico ---------------------------------------------------------- */
.pa-crumbs-item {
	display: inline-flex;
	align-items: center;
	min-width: 0;             /* permite ellipsis */
	color: #6b7280;
	font-weight: 600;
}

.pa-crumbs-item > span,
.pa-crumbs-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 100%;
}

/* Link ------------------------------------------------------------------- */
.pa-crumbs-link {
	color: #6b7280;
	text-decoration: none;
	padding: 2px 0;
	border-bottom: 1.5px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}

.pa-crumbs-link:hover,
.pa-crumbs-link:focus-visible {
	color: var(--pa-negro);
	border-bottom-color: var(--pa-amarillo);
	outline: none;
}

/* Icono home — tiene color propio heredado del link */
.pa-crumbs-home {
	flex: 0 0 auto;
	opacity: .85;
	transition: opacity .18s ease;
}
.pa-crumbs-link:hover .pa-crumbs-home { opacity: 1; }

/* Separador chevron ------------------------------------------------------- */
.pa-crumbs-sep {
	display: inline-flex;
	align-items: center;
	color: #d1d5db;             /* gris claro, muy sutil */
	flex: 0 0 auto;
}
.pa-crumbs-sep svg {
	display: block;
}

/* Pagina actual ---------------------------------------------------------- */
.pa-crumbs-current {
	color: var(--pa-negro);
	font-weight: 700;
	max-width: 420px;
}
.pa-crumbs-current > span {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Scope: cuando el breadcrumb va antes de un hero full-bleed oscuro,
   igual queda bien porque usa su propio padding/margin y gris sobre
   blanco. En posts (fondo claro) va dentro del wrap de GeneratePress,
   asi que respetamos su padding lateral. */
.site-content .pa-crumbs {
	padding-left: 0;
	padding-right: 0;
	padding-top: 14px;
	padding-bottom: 10px;
}

/* En single post la miga va entre la imagen destacada y el titulo. Debe
   quedar al mismo "tap" horizontal que el h1.entry-title (sin indent) y
   con un respiro proporcional arriba/abajo para separar imagen y titulo. */
body.single-post .pa-crumbs {
	max-width: none;
	margin: 0;
	padding: 14px 0 10px;
}

/* Pegado al hero: cuando va JUSTO antes de .pa-page-hero, bajamos un
   poco el padding inferior para que no quede flotando sobre el eyebrow. */
.pa-crumbs + .pa-page-hero {
	margin-top: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.pa-crumbs {
		padding: 14px 18px 4px;
	}
	.pa-crumbs-list {
		gap: 6px;
	}
	.pa-crumbs-current {
		max-width: 180px;
	}
	/* En movil, el icono home solo (sin texto "Portada") ahorra espacio */
	.pa-crumbs-item:first-child .pa-crumbs-link > span {
		font-size: 0;              /* oculta el label visualmente */
	}
	.pa-crumbs-item:first-child .pa-crumbs-home {
		width: 14px;
		height: 14px;
	}
}