/**
 * Catálogo de canales VOXPOP.
 *
 * Hereda el mundo visual de voxpop.com.mx: Poppins, azul de marca, controles
 * de radio completo. Todo va bajo .vxc para no chocar con Elementor.
 *
 * Sobre el azul: #00A0DB con texto blanco da 2.98:1, debajo del mínimo de
 * 4.5:1. Se conserva como color de marca para trazos y acentos, y se derivan
 * dos tonos más profundos para las superficies que cargan blanco encima.
 */

.vxc {
	--vxc-blue: #00a0db;        /* marca: trazos, puntos, acentos */
	--vxc-blue-solid: #0089bc;  /* superficies con gráficos blancos — 3.96:1 */
	--vxc-blue-deep: #00719b;   /* superficies con texto blanco — 5.48:1 */
	--vxc-blue-wash: #e8f6fc;
	--vxc-blue-fill: #d3ecf9; /* relleno de las barras de mezcla */

	--vxc-ink: #16202b;
	--vxc-body: #4a5765;
	--vxc-muted: #6b7885;
	--vxc-line: #e2e8ee;
	--vxc-ground: #f6f9fb;

	--vxc-ok: #1a7f5a;
	--vxc-warn: #a86407;
	--vxc-warn-wash: #fdf6e8;

	--vxc-radius: 16px;
	--vxc-radius-sm: 10px;
	--vxc-pill: 999px;

	--vxc-shadow: 0 1px 2px rgba(16, 32, 45, 0.05), 0 10px 28px -14px rgba(16, 32, 45, 0.22);
	--vxc-shadow-lift: 0 2px 4px rgba(16, 32, 45, 0.06), 0 18px 40px -16px rgba(16, 32, 45, 0.3);

	--vxc-ease: cubic-bezier(0.16, 1, 0.3, 1);

	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--vxc-body);
	line-height: 1.55;
	container-type: inline-size;

	/* El catálogo se controla a sí mismo: si alguien lo mete en un bloque
	   Preformateado o en cualquier contenedor con white-space heredado, cada
	   salto de línea del HTML se dibujaría como un salto real y la maqueta se
	   llenaría de huecos. */
	white-space: normal;
	text-align: left;
}

.vxc *,
.vxc *::before,
.vxc *::after {
	box-sizing: border-box;
}

.vxc :focus-visible {
	outline: 2px solid var(--vxc-blue-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- Paso 1 */

.vxc .vxc__step-title {
	margin: 0 0 0.25rem;
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--vxc-ink);
}

.vxc .vxc__step-help {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	color: var(--vxc-muted);
	max-width: 60ch;
}

.vxc .vxc__choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 0.875rem;
}

.vxc button.vxc-choice {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	margin: 0;
	padding: 1.15rem 1.25rem;
	text-align: left;
	font-family: inherit;
	background: #fff;
	border: 1.5px solid var(--vxc-line);
	border-radius: var(--vxc-radius);
	cursor: pointer;
	transition: border-color 0.25s var(--vxc-ease), box-shadow 0.25s var(--vxc-ease),
		background-color 0.25s var(--vxc-ease);
}

.vxc button.vxc-choice:hover {
	border-color: #bcdcea;
	box-shadow: var(--vxc-shadow);
}

.vxc button.vxc-choice[aria-pressed="true"] {
	border-color: var(--vxc-blue);
	background: var(--vxc-blue-wash);
	box-shadow: var(--vxc-shadow);
}

.vxc .vxc-choice__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--vxc-blue-wash);
	color: var(--vxc-blue-deep);
	transition: background-color 0.25s var(--vxc-ease);
}

.vxc button.vxc-choice[aria-pressed="true"] .vxc-choice__icon {
	background: #fff;
}

.vxc .vxc-choice__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.vxc .vxc-choice__name {
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--vxc-ink);
}

.vxc .vxc-choice__desc {
	font-size: 0.86rem;
	color: var(--vxc-muted);
	line-height: 1.4;
}

/* ------------------------------------------------------------- Regalías */

.vxc .vxc__royalties {
	margin-top: 1.75rem;
	padding: 1.5rem;
	background: var(--vxc-ground);
	border-radius: var(--vxc-radius);
}

.vxc .vxc__royalties {
	transition: background-color 0.3s var(--vxc-ease), box-shadow 0.3s var(--vxc-ease);
}

.vxc .vxc__royalties.is-applicable {
	background: var(--vxc-blue-wash);
	box-shadow: inset 0 0 0 1.5px var(--vxc-blue);
}

.vxc .vxc__royalties-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--vxc-ink);
	letter-spacing: -0.01em;
}

/* La insignia solo aparece en el panel que corresponde al paso 1. */
.vxc .vxc__badge {
	display: none;
	padding: 0.2rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0;
	color: #fff;
	background: var(--vxc-blue-deep);
	border-radius: var(--vxc-pill);
}

.vxc .vxc__royalties.is-applicable .vxc__badge {
	display: inline-block;
}

.vxc .vxc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vxc .vxc__catalogs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vxc .vxc-catalog {
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid var(--vxc-line);
	border-radius: var(--vxc-radius-sm);
}

.vxc .vxc-catalog__label {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vxc-muted);
}

.vxc .vxc-catalog__royalties {
	margin: 0 0 0.7rem;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--vxc-ink);
}

.vxc .vxc-catalog--ok .vxc-catalog__royalties {
	color: var(--vxc-ok);
}

.vxc .vxc-catalog--warn .vxc-catalog__royalties {
	color: var(--vxc-warn);
}

.vxc .vxc-catalog__libs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

/* Deliberadamente inline-block y no flex: dentro de un contenedor de
   Elementor el chip se estiraba a todo el ancho y el punto se despegaba de
   la etiqueta. Con inline-block el tamaño lo manda el contenido y ninguna
   regla de layout ajena lo puede estirar. */
.vxc .vxc-dot {
	display: inline-block;
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	padding: 0.2rem 0.6rem 0.2rem 0.45rem;
	font-size: 0.76rem;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--vxc-body);
	background: var(--vxc-ground);
	border-radius: var(--vxc-pill);
}

.vxc .vxc-dot::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 8px;
	height: 8px;
	margin-right: 0.4rem;
	vertical-align: 0.05em;
	border-radius: 50%;
	background: var(--vxc-dot, var(--vxc-blue));
}

/* Etiquetas de giro: mismo aire que .vxc-dot pero sin punto, porque el
   punto de color ya significa «biblioteca» en el resto del catálogo. */
.vxc .vxc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.vxc .vxc-tag {
	display: inline-block;
	flex: 0 0 auto;
	width: auto;
	padding: 0.2rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--vxc-body);
	background: var(--vxc-ground);
	border-radius: var(--vxc-pill);
}

/* -------------------------------------------------------------- Toolbar */

.vxc .vxc__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 3rem;
}

.vxc .vxc__title {
	margin: 0;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--vxc-ink);
}

.vxc .vxc__count {
	margin: 0;
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
	color: var(--vxc-muted);
}

.vxc .vxc__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.1rem;
}

.vxc button.vxc-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.95rem;
	font-family: inherit;
	font-size: 0.83rem;
	font-weight: 500;
	color: var(--vxc-body);
	background: #fff;
	border: 1px solid var(--vxc-line);
	border-radius: var(--vxc-pill);
	cursor: pointer;
	transition: border-color 0.2s var(--vxc-ease), color 0.2s var(--vxc-ease),
		background-color 0.2s var(--vxc-ease);
}

.vxc button.vxc-pill:hover {
	border-color: #bcdcea;
	color: var(--vxc-ink);
}

.vxc button.vxc-pill.is-active {
	background: var(--vxc-blue-deep);
	border-color: var(--vxc-blue-deep);
	color: #fff;
}

.vxc .vxc-pill__count {
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--vxc-muted);
}

.vxc button.vxc-pill.is-active .vxc-pill__count {
	color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------- Rejilla */

.vxc .vxc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr));
	gap: 1.25rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

.vxc .vxc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--vxc-line);
	border-radius: var(--vxc-radius);
	transition: box-shadow 0.3s var(--vxc-ease), transform 0.3s var(--vxc-ease),
		border-color 0.3s var(--vxc-ease);
}

.vxc .vxc-card:hover {
	transform: translateY(-3px);
	border-color: #cfe4ee;
	box-shadow: var(--vxc-shadow-lift);
}

.vxc .vxc-card[hidden] {
	display: none;
}

.vxc .vxc-card__media {
	position: relative;
	border-radius: calc(var(--vxc-radius) - 1px) calc(var(--vxc-radius) - 1px) 0 0;
	background: var(--vxc-ground);
}

.vxc .vxc-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: inherit;
}

.vxc .vxc-card__img--none {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: inherit;
	background: linear-gradient(150deg, #e9eef3, #f6f9fb);
}

.vxc .vxc-card__lib {
	position: absolute;
	top: 0.65rem;
	left: 0.65rem;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.22rem 0.55rem 0.22rem 0.45rem;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--vxc-ink);
	background: #fff;
	border-radius: var(--vxc-pill);
	box-shadow: 0 1px 2px rgba(16, 32, 45, 0.12), 0 4px 10px -6px rgba(16, 32, 45, 0.35);
}

.vxc .vxc-card__lib::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vxc-dot, var(--vxc-blue));
}

/* Botón de escucha, montado en el borde de la portada. */
.vxc button.vxc-play {
	position: absolute;
	right: 0.85rem;
	bottom: 0;
	transform: translateY(50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: #fff;
	background: var(--vxc-blue-solid);
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(16, 32, 45, 0.12), 0 8px 20px -8px rgba(0, 137, 188, 0.6);
	transition: transform 0.25s var(--vxc-ease), background-color 0.25s var(--vxc-ease);
	z-index: 2;
}

.vxc button.vxc-play:hover {
	transform: translateY(50%) scale(1.09);
	background: var(--vxc-blue-deep);
}

.vxc .vxc-play__icon {
	display: grid;
	place-items: center;
	margin-left: 2px; /* compensa el peso óptico del triángulo */
}

.vxc .vxc-play__bars {
	display: none;
	align-items: flex-end;
	gap: 3px;
	height: 16px;
}

.vxc .vxc-play__bars i {
	display: block;
	width: 3px;
	height: 100%;
	background: currentColor;
	border-radius: 1px;
	transform-origin: bottom;
	animation: vxc-eq 0.9s var(--vxc-ease) infinite alternate;
}

.vxc .vxc-play__bars i:nth-child(2) {
	animation-delay: 0.18s;
}

.vxc .vxc-play__bars i:nth-child(3) {
	animation-delay: 0.36s;
}

@keyframes vxc-eq {
	from {
		transform: scaleY(0.3);
	}
	to {
		transform: scaleY(1);
	}
}

.vxc button.vxc-play.is-playing {
	background: var(--vxc-blue-deep);
}

.vxc button.vxc-play.is-playing .vxc-play__icon {
	display: none;
}

.vxc button.vxc-play.is-playing .vxc-play__bars {
	display: flex;
}

.vxc button.vxc-play.is-loading {
	background: var(--vxc-blue-deep);
}

.vxc button.vxc-play.is-loading .vxc-play__icon {
	animation: vxc-pulse 1s ease-in-out infinite;
}

@keyframes vxc-pulse {
	50% {
		opacity: 0.35;
	}
}

.vxc .vxc-card__body {
	padding: 1.85rem 1rem 1.1rem;
}

.vxc .vxc-card__name {
	margin: 0 0 0.3rem;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--vxc-ink);
}

/* hello-elementor subraya los enlaces del contenido con `.entry-content a`,
   que gana por especificidad. El selector de tipo nos deja por encima sin
   recurrir a !important; la regla de hover se sube en paralelo. */
.vxc a.vxc-card__link {
	color: inherit;
	text-decoration: none;
}

/* El enlace del título cubre la tarjeta; el botón de play queda por encima. */
.vxc .vxc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--vxc-radius);
	z-index: 1;
}

.vxc .vxc-card:hover a.vxc-card__link {
	color: var(--vxc-blue-deep);
}

.vxc .vxc-card__desc {
	margin: 0;
	font-size: 0.83rem;
	line-height: 1.45;
	color: var(--vxc-muted);
}

/* ------------------------------------------------------------- Sin datos */

.vxc .vxc__empty {
	margin: 3rem 0;
	text-align: center;
	color: var(--vxc-muted);
}

.vxc .vxc__empty[hidden] {
	display: none;
}

.vxc button.vxc__empty-reset {
	margin-left: 0.5rem;
	padding: 0;
	font: inherit;
	color: var(--vxc-blue-deep);
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ----------------------------------------------------------------- Modal */

.vxc .vxc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.vxc .vxc-modal[hidden] {
	display: none;
}

.vxc .vxc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 20, 30, 0.6);
	animation: vxc-fade 0.25s var(--vxc-ease);
}

@keyframes vxc-fade {
	from {
		opacity: 0;
	}
}

.vxc .vxc-modal__panel {
	position: relative;
	width: min(100%, 620px);
	max-height: min(88vh, 780px);
	overflow-y: auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 70px -20px rgba(10, 20, 30, 0.5);
	animation: vxc-rise 0.35s var(--vxc-ease);
}

@keyframes vxc-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

.vxc button.vxc-modal__close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--vxc-ink);
	background: #fff;
	border: 1px solid var(--vxc-line);
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
	transition: background-color 0.2s var(--vxc-ease);
}

.vxc button.vxc-modal__close:hover {
	background: var(--vxc-ground);
}

.vxc .vxc-modal__content {
	padding: 1.75rem;
}

.vxc .vxc-modal__head {
	display: flex;
	gap: 1.15rem;
	align-items: flex-start;
	padding-right: 2.5rem;
}

.vxc .vxc-modal__cover {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 12px;
}

.vxc .vxc-modal__title {
	margin: 0 0 0.3rem;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--vxc-ink);
}

.vxc .vxc-modal__desc {
	margin: 0 0 0.6rem;
	font-size: 0.92rem;
	color: var(--vxc-body);
}

.vxc .vxc-modal__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.1rem;
	background: var(--vxc-ground);
	border-radius: var(--vxc-radius-sm);
	list-style: none;
}

.vxc .vxc-modal__stat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.86rem;
	color: var(--vxc-body);
}

.vxc .vxc-modal__stat svg {
	color: var(--vxc-blue-deep);
	width: 18px;
	height: 18px;
}

.vxc .vxc-modal__stat b {
	font-weight: 600;
	color: var(--vxc-ink);
	font-variant-numeric: tabular-nums;
}

.vxc .vxc-modal__section-title {
	margin: 2rem 0 0.9rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vxc-muted);
}

.vxc .vxc-block {
	padding: 1rem 0;
	border-top: 1px solid var(--vxc-line);
}

.vxc .vxc-block__hours {
	margin: 0 0 0.7rem;
	font-size: 0.9rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--vxc-ink);
}

.vxc .vxc-block__mix {
	display: grid;
	gap: 0.45rem;
	margin: 0;
}

.vxc .vxc-mix {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.84rem;
}

.vxc .vxc-mix__name {
	position: relative;
	padding: 0.3rem 0.6rem;
	color: var(--vxc-ink);
	border-radius: 6px;
	overflow: hidden;
	isolation: isolate;
}

.vxc .vxc-mix__name::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--vxc-pct, 0%);
	background: var(--vxc-blue-fill);
	z-index: -1;
}

.vxc .vxc-mix__pct {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--vxc-blue-deep);
}

.vxc .vxc-modal__note {
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
	color: var(--vxc-muted);
}

.vxc .vxc-modal__error {
	margin: 0;
	padding: 2rem 0;
	text-align: center;
	color: var(--vxc-body);
}

.vxc button.vxc-modal__retry {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.55rem 1.25rem;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 500;
	color: #fff;
	background: var(--vxc-blue-deep);
	border: 0;
	border-radius: var(--vxc-pill);
	cursor: pointer;
}

.vxc .vxc-modal__skeleton {
	display: grid;
	gap: 0.75rem;
	padding: 1rem 0;
}

.vxc .vxc-modal__skeleton span {
	display: block;
	height: 14px;
	background: linear-gradient(90deg, #eef2f5, #f7fafc, #eef2f5);
	background-size: 200% 100%;
	border-radius: 4px;
	animation: vxc-shimmer 1.4s linear infinite;
}

.vxc .vxc-modal__skeleton span:nth-child(1) {
	width: 55%;
	height: 22px;
}

.vxc .vxc-modal__skeleton span:nth-child(3) {
	width: 80%;
}

.vxc .vxc-modal__skeleton span:nth-child(4) {
	width: 65%;
}

@keyframes vxc-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* ------------------------------------------------- Entrada de la rejilla */

.vxc .vxc-card.is-entering {
	animation: vxc-card-in 0.45s var(--vxc-ease) both;
	animation-delay: calc(var(--vxc-i, 0) * 22ms);
}

@keyframes vxc-card-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* ------------------------------------------------------------- Responsive */

@container (max-width: 560px) {
	.vxc .vxc__grid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
		gap: 0.85rem;
	}

	.vxc .vxc-card__body {
		padding: 1.6rem 0.75rem 0.9rem;
	}

	.vxc button.vxc-play {
		width: 38px;
		height: 38px;
	}
}

@media (max-width: 600px) {
	.vxc .vxc-modal {
		padding: 0;
		place-items: end stretch;
	}

	.vxc .vxc-modal__panel {
		width: 100%;
		max-height: 92vh;
		border-radius: 20px 20px 0 0;
	}

	.vxc .vxc-modal__content {
		padding: 1.35rem;
	}

	.vxc .vxc-modal__head {
		flex-direction: column;
		gap: 0.85rem;
	}

	.vxc .vxc__royalties {
		padding: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vxc *,
	.vxc *::before,
	.vxc *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.vxc .vxc-card:hover {
		transform: none;
	}

	.vxc button.vxc-play:hover {
		transform: translateY(50%);
	}

	.vxc button.vxc-play.is-playing .vxc-play__bars i {
		transform: scaleY(0.7);
	}
}