/**
 * WapuOS - Blocks — layouts canónicos de categorías y etiquetas.
 * Una sola hoja para editor, preview y front; cada instancia aporta tokens.
 */
.wapu-cat-layout {
	--surface: var(--wb-surface);
	--text: var(--wb-text);
	--primary: var(--wb-primary);
	--secondary: var(--wb-surface-muted);
	--accent: var(--primary);
	padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);
	background: var(--surface);
	color: var(--text);
	font-family: var(--pg-style-body, system-ui, sans-serif);
}

.wapu-cat-layout *,
.wapu-cat-layout *::before,
.wapu-cat-layout *::after {
	box-sizing: border-box;
}

.wapu-cat-layout .wapu-cat-wrap {
	max-width: 80rem;
	margin: auto;
}

.wapu-cat-layout .wapu-cat-head {
	margin-bottom: 2rem;
}

.wapu-cat-layout .wapu-cat-head span {
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--accent);
}

.wapu-cat-layout h2 {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
}

.wapu-cat-layout .wapu-cat-head p {
	font-size: 1rem;
	line-height: 1.5;
}

.wapu-cat-layout .wapu-cat-items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.wapu-cat-layout .wapu-cat-item {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 18.75rem;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--secondary);
	color: inherit;
	text-decoration: none;
	align-items: flex-end;
}

.wapu-cat-layout .media {
	position: absolute;
	inset: 0;
	background-color: var(--secondary);
	background-image: var(--term-image), linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--primary) 24%, var(--secondary)));
	background-size: cover;
	background-position: center;
	transition: transform .3s ease;
}

.wapu-cat-layout .wapu-cat-item:hover .media {
	transform: scale(1.035);
}

.wapu-cat-layout .meta {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 0.5rem;
	width: 100%;
	padding: 1.5rem;
	background: linear-gradient(180deg, transparent, color-mix(in srgb,var(--wb-text) 70%,transparent));
	color: var(--wb-surface);
}

.wapu-cat-layout strong {
	font-size: 1rem;
	line-height: 1.25;
}

.wapu-cat-layout small {
	font-size: 0.875rem;
	line-height: 1.45;
	opacity: .82;
}

.wapu-cat-layout .cta {
	justify-self: start;
	margin-top: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: var(--wapu-button-radius, var(--pg-button-radius, 0.75rem));
	background: var(--wapu-button-bg, var(--pg-style-button-bg, var(--pg-style-primary, var(--wb-text))));
	color: var(--wapu-button-text, var(--pg-style-button-text, var(--wb-surface)));
	font-size: 0.875rem;
	line-height: 1.4;
}

.wapu-cat-layout.layout-pills .wapu-cat-items {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.wapu-cat-layout.layout-pills .wapu-cat-item {
	min-height: 0;
	flex: none;
	padding: 0.5rem 1rem;
	border-radius: var(--wapu-button-radius, var(--pg-button-radius, 0.75rem));
	background: var(--primary);
	color: var(--wb-surface);
}

.wapu-cat-layout.layout-pills .media {
	display: none;
}

.wapu-cat-layout.layout-pills .meta {
	padding: 0;
	background: none;
	color: inherit;
}

.wapu-cat-layout.layout-carousel .wapu-cat-items {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 0.5rem;
}

.wapu-cat-layout.layout-carousel .wapu-cat-item {
	flex: 0 0 min(18.75rem, 72vw);
	scroll-snap-align: start;
}

.wapu-cat-layout.layout-bento .wapu-cat-item:first-child {
	grid-column: span 2;
}

.wapu-cat-layout.layout-bento .wapu-cat-item:nth-child(2) {
	grid-row: span 2;
}

.wapu-cat-layout.layout-editorial .wapu-cat-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	min-height: 38.5rem;
}

.wapu-cat-layout.layout-shop .wapu-cat-item {
	min-height: 27.5rem;
}

.wapu-cat-layout.layout-horizontal .wapu-cat-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wapu-cat-layout.layout-horizontal .wapu-cat-item {
	min-height: 9.5rem;
	align-items: stretch;
	background: var(--secondary);
}

.wapu-cat-layout.layout-horizontal .media {
	position: relative;
	inset: auto;
	flex: 0 0 42%;
	min-height: 9.5rem;
}

.wapu-cat-layout.layout-horizontal .meta {
	align-content: center;
	padding: 1rem;
	background: none;
	color: var(--text);
}

.wapu-cat-layout.layout-avatars .wapu-cat-items {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1rem;
}

.wapu-cat-layout.layout-avatars .wapu-cat-item {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	min-height: 0;
	overflow: visible;
	background: transparent;
	text-align: center;
}

.wapu-cat-layout .avatar-media {
	position: relative;
	display: grid;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
	border-radius: 50%;
	background-color: var(--secondary);
	background-image: radial-gradient(circle at 50% 35%, var(--surface), color-mix(in srgb, var(--secondary) 78%, var(--surface)) 56%, color-mix(in srgb, var(--primary) 20%, var(--secondary)));
	background-size: cover;
	background-position: center;
	box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--text) 6%, transparent);
	transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.wapu-cat-layout .avatar-media.has-image { background-image: var(--term-image); }

.wapu-cat-layout .avatar-placeholder {
	display: grid;
	place-items: center;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--pg-style-body, system-ui, sans-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
}

.wapu-cat-layout.layout-avatars .wapu-cat-item:hover .avatar-media {
	transform: translateY(-0.25rem);
	border-color: color-mix(in srgb, var(--text) 22%, transparent);
	box-shadow: 0 1rem 2rem color-mix(in srgb, var(--text) 11%, transparent);
}

.wapu-cat-layout.layout-avatars .wapu-cat-item:focus-visible {
	outline: 0.1875rem solid var(--accent);
	outline-offset: 0.25rem;
	border-radius: 1rem;
}

.wapu-cat-layout.layout-avatars .wapu-cat-item.is-active .avatar-media {
	border: 0.1875rem solid var(--accent);
}

.wapu-cat-layout.layout-avatars .wapu-cat-item.is-active strong { color: var(--accent); }

.wapu-cat-layout.layout-avatars .meta {
	padding: 0;
	background: none;
	color: var(--text);
}

.wapu-cat-layout.layout-avatars .meta strong { font-size: 0.875rem; }

.wapu-cat-layout.layout-avatars .wapu-cat-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.wapu-cat-layout.layout-avatars .wapu-cat-head-copy {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.wapu-cat-layout.layout-avatars .wapu-cat-archive-link {
	flex: none;
	min-height: 2.5rem;
}

.wapu-cat-layout.layout-stacked .wapu-cat-items {
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

.wapu-cat-layout.layout-stacked .wapu-cat-item {
	min-height: 7rem;
}

.wapu-cat-layout.layout-stacked .meta {
	background: linear-gradient(90deg, color-mix(in srgb,var(--wb-text) 72%,transparent), transparent);
}

.wapu-cat-layout.layout-folders .wapu-cat-item,
.wapu-cat-layout.layout-fan .wapu-cat-item {
	min-height: 15rem;
	overflow: visible;
	background: transparent;
	justify-content: center;
	text-align: center;
}

.wapu-cat-layout .folder,
.wapu-cat-layout .fan {
	position: absolute;
	inset: 3.25rem 0.5rem 2.625rem;
	border-radius: 1rem;
	background: color-mix(in srgb, var(--primary) 35%, var(--secondary));
}

.wapu-cat-layout .folder::before {
	content: "";
	position: absolute;
	left: 0;
	top: -0.75rem;
	width: 56%;
	height: 1.5rem;
	border-radius: 0.875rem 0.875rem 0 0;
	background: inherit;
}

.wapu-cat-layout .folder i,
.wapu-cat-layout .folder b,
.wapu-cat-layout .fan i,
.wapu-cat-layout .fan b,
.wapu-cat-layout .fan em {
	position: absolute;
	inset: 1rem;
	background-image: var(--term-image);
	background-size: cover;
	background-position: center;
	border: 0.1875rem solid var(--wb-surface);
	border-radius: 0.75rem;
}

.wapu-cat-layout .folder i,
.wapu-cat-layout .fan i {
	transform: rotate(-6deg);
}

.wapu-cat-layout .folder b,
.wapu-cat-layout .fan b {
	transform: rotate(6deg);
}

.wapu-cat-layout .fan em {
	inset: 3.5rem 2rem 0 0;
	transform: rotate(-2deg);
}

.wapu-cat-layout.layout-folders .meta,
.wapu-cat-layout.layout-fan .meta {
	align-self: flex-end;
	padding: 0;
	background: none;
	color: var(--text);
}

.wapu-cat-layout .wapu-taxonomy-empty {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.5rem;
	justify-items: start;
	padding: 1.5rem;
	border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent);
	border-radius: 1rem;
}

.wapu-cat-layout .wapu-taxonomy-empty a {
	color: var(--primary);
	font-weight: 800;
}

@media (max-width: 56.25em) {
	.wapu-cat-layout .wapu-cat-items,
	.wapu-cat-layout.layout-horizontal .wapu-cat-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@container wapu-block-preview (max-width: 56.25em){
	.wapu-cat-layout .wapu-cat-items,
	.wapu-cat-layout.layout-horizontal .wapu-cat-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


@media (max-width: 35em) {
	.wapu-cat-layout {
		padding: 2rem 1rem;
	}

	.wapu-cat-layout .wapu-cat-head {
		margin-bottom: 1.5rem;
	}

	.wapu-cat-layout:not(.layout-pills):not(.layout-avatars) .wapu-cat-items {
		display: flex;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		padding: 0 0 0.5rem;
	}

	.wapu-cat-layout:not(.layout-pills):not(.layout-avatars) .wapu-cat-item {
		flex: 0 0 82%;
		min-height: 20rem;
		scroll-snap-align: start;
	}

	.wapu-cat-layout.layout-horizontal .wapu-cat-item {
		min-height: 10rem;
		flex-basis: 92%;
	}

	.wapu-cat-layout.layout-horizontal .media {
		min-height: 10rem;
	}

	.wapu-cat-layout.layout-editorial .wapu-cat-item:first-child {
		min-height: 20rem;
	}

	.wapu-cat-layout.layout-folders .wapu-cat-item,
	.wapu-cat-layout.layout-fan .wapu-cat-item {
		min-height: 16.5rem;
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-items {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 0.5rem;
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-items::-webkit-scrollbar { display: none; }

	.wapu-cat-layout.layout-avatars .wapu-cat-item {
		flex: 0 0 6rem;
		scroll-snap-align: start;
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-head {
		align-items: center;
		padding-inline: 0;
	}

}
@container wapu-block-preview (max-width: 35em){
	.wapu-cat-layout {
		padding: 2rem 1rem;
	}

	.wapu-cat-layout .wapu-cat-head {
		margin-bottom: 1.5rem;
	}

	.wapu-cat-layout:not(.layout-pills):not(.layout-avatars) .wapu-cat-items {
		display: flex;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
		padding: 0 0 0.5rem;
	}

	.wapu-cat-layout:not(.layout-pills):not(.layout-avatars) .wapu-cat-item {
		flex: 0 0 82%;
		min-height: 20rem;
		scroll-snap-align: start;
	}

	.wapu-cat-layout.layout-horizontal .wapu-cat-item {
		min-height: 10rem;
		flex-basis: 92%;
	}

	.wapu-cat-layout.layout-horizontal .media {
		min-height: 10rem;
	}

	.wapu-cat-layout.layout-editorial .wapu-cat-item:first-child {
		min-height: 20rem;
	}

	.wapu-cat-layout.layout-folders .wapu-cat-item,
	.wapu-cat-layout.layout-fan .wapu-cat-item {
		min-height: 16.5rem;
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-items {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 0.5rem;
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-items::-webkit-scrollbar { display: none; }

	.wapu-cat-layout.layout-avatars .wapu-cat-item {
		flex: 0 0 6rem;
		scroll-snap-align: start;
	}

	.wapu-cat-layout.layout-avatars .wapu-cat-head {
		align-items: center;
		padding-inline: 0;
	}

}


@media (prefers-reduced-motion: reduce) {
	.wapu-cat-layout *,
	.wapu-cat-layout *::before,
	.wapu-cat-layout *::after {
		scroll-behavior: auto;
		transition-duration: .01ms;
	}
}

/* WapuOS - Playground Standard · Categorías por pestañas */
.wb-category-tabs{background:var(--wb-bg);color:var(--wb-text);display:grid;gap:var(--wapu-space-3,1.5rem);font-family:var(--pg-style-font-body,inherit)}
.wb-category-tabs__nav{display:flex;gap:var(--wapu-space-2,1rem);overflow-x:auto;padding:0.25rem 0.125rem 0.5rem;scrollbar-width:thin;scroll-snap-type:x proximity}
.wb-category-tabs__tab{appearance:none;border:0;background:transparent;color:inherit;display:grid;justify-items:center;gap:0.625rem;min-width:6rem;padding:0;cursor:pointer;scroll-snap-align:start}
.wb-category-tabs__avatar{width:5.5rem;height:5.5rem;border-radius:62.4375rem;background:color-mix(in srgb,var(--wb-line) 72%,transparent);border:0.125rem solid transparent;display:grid;place-items:center;overflow:hidden;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.wb-category-tabs__avatar img{width:100%;height:100%;object-fit:cover}.wb-category-tabs__avatar>span{font:700 1.625rem/1 var(--pg-style-font-heading,inherit);color:var(--wb-muted)}
.wb-category-tabs__label{font-size:0.75rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.wb-category-tabs__tab:is(:hover,:focus-visible) .wb-category-tabs__avatar{transform:translateY(-0.125rem)}
.wb-category-tabs__tab.is-active .wb-category-tabs__avatar{border-color:var(--wb-primary);box-shadow:0 0 0 0.25rem color-mix(in srgb,var(--wb-primary) 10%,transparent)}
.wb-category-tabs__stage{padding:clamp(1.125rem,3vw,2.5rem);background:color-mix(in srgb,var(--wb-line) 44%,transparent);border-radius:var(--pg-style-radius-lg,2rem);overflow:hidden}
.wb-category-tabs__panel{display:grid;grid-template-columns:minmax(17.5rem,26.25rem) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.25rem);align-items:stretch}
.wb-category-tabs__content{background:var(--wb-bg);border:1px solid color-mix(in srgb,var(--wb-text) 8%,transparent);border-radius:var(--pg-style-radius,1.5rem);padding:clamp(1.25rem,3vw,2rem);box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--wb-text) 8%,transparent);display:grid;align-content:start;gap:0.875rem}
.wb-category-tabs__eyebrow{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase}.wb-category-tabs__title{margin:0}.wb-category-tabs__copy{margin:0;color:var(--wb-muted);max-width:36ch}
.wb-category-tabs__products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.875rem}.wb-category-tabs__product{color:inherit;text-decoration:none;display:grid;gap:0.5rem}.wb-category-tabs__product-media{aspect-ratio:1;border-radius:var(--pg-style-radius-sm,1rem);background:color-mix(in srgb,var(--wb-line) 74%,transparent);display:grid;place-items:center;overflow:hidden}.wb-category-tabs__product-media img{width:100%;height:100%;object-fit:cover}.wb-category-tabs__product-name{font-size:0.75rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.wb-category-tabs__cta{display:inline-flex;align-items:center;gap:0.5rem;color:inherit;text-decoration:none;font-weight:750;width:max-content}.wb-category-tabs__hero{min-height:22.5rem;border-radius:var(--pg-style-radius-lg,2rem);overflow:hidden;background:color-mix(in srgb,var(--wb-accent) 28%,var(--wb-bg));position:relative}.wb-category-tabs__hero img,.wb-category-tabs__placeholder{width:100%;height:100%;object-fit:cover;display:block}.wb-category-tabs__placeholder{background:linear-gradient(135deg,color-mix(in srgb,var(--wb-accent) 55%,var(--wb-bg)),color-mix(in srgb,var(--wb-line) 70%,var(--wb-bg)))}
@media (max-width:53.75em){.wb-category-tabs__panel{grid-template-columns:1fr}.wb-category-tabs__hero{min-height:16.25rem;order:1}.wb-category-tabs__content{order:2}.wb-category-tabs__tab{min-width:5.125rem}.wb-category-tabs__avatar{width:4.5rem;height:4.5rem}}
@container wapu-block-preview (max-width:53.75em){.wb-category-tabs__panel{grid-template-columns:1fr}.wb-category-tabs__hero{min-height:16.25rem;order:1}.wb-category-tabs__content{order:2}.wb-category-tabs__tab{min-width:5.125rem}.wb-category-tabs__avatar{width:4.5rem;height:4.5rem}}

@media (prefers-reduced-motion:reduce){.wb-category-tabs__avatar{transition:none}}

/* Category Read Model V2 — optional richer reading without changing layouts. */
.wapu-cat-layout .term-description {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.wapu-cat-layout .term-children {
	display: block;
	font-size: 0.78rem;
	line-height: 1.45;
	opacity: .86;
}

.wapu-cat-layout.layout-pills .term-description,
.wapu-cat-layout.layout-pills .term-children {
	max-width: 24rem;
}