/* ==========================================================================
   Trak FM — Parrilla (frontend)
   Coherente con la cabecera: navy #14274e + naranja #f47b20
   ========================================================================== */

.trakfm-parrilla {
	--tfp-navy: #14274e;
	--tfp-navy-soft: #1d3163;
	--tfp-navy-deep: #0f1c3f;
	--tfp-orange: #f47b20;
	--tfp-orange-soft: #f7a35d;
	--tfp-red: #ef4444;
	--tfp-text: #14274e;
	--tfp-muted: #6b7a99;
	--tfp-line: rgba(20, 39, 78, 0.1);
	--tfp-bg: #f3f5fa;

	font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--tfp-text);
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}
.trakfm-parrilla *,
.trakfm-parrilla *::before,
.trakfm-parrilla *::after {
	box-sizing: border-box;
}

/* ==========================================================================
   Pestañas
   ========================================================================== */

.trakfm-tabs {
	display: flex;
	background: var(--tfp-navy-deep);
	border-radius: 10px 10px 0 0;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.trakfm-tabs::-webkit-scrollbar { height: 4px; }
.trakfm-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.trakfm-tab {
	flex: 1 1 0;
	min-width: 90px;
	padding: 14px 12px 16px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.65);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-family: inherit;
	transition: color 0.15s, background 0.15s;
	position: relative;
}
.trakfm-tab:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.04);
}
.trakfm-tab.is-active {
	background: var(--tfp-orange);
	color: #fff;
}
.trakfm-tab.is-active:hover {
	background: var(--tfp-orange);
}

.trakfm-tab-name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.1px;
}
.trakfm-tab-date {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0.75;
}

/* Marca discreta del día actual en pestañas no activas */
.trakfm-tab.is-today:not(.is-active)::after {
	content: '';
	position: absolute;
	bottom: 7px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--tfp-orange);
}

/* Flecha tipo "tooltip" debajo de la pestaña activa */
.trakfm-tab.is-active::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--tfp-orange);
	z-index: 2;
}

/* ==========================================================================
   Paneles
   ========================================================================== */

.trakfm-panels {
	background: var(--tfp-bg);
	padding: 20px 16px;
	border-radius: 0 0 10px 10px;
	border: 1px solid var(--tfp-line);
	border-top: 0;
}

.trakfm-panel[hidden] { display: none; }

.trakfm-empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--tfp-muted);
	font-style: italic;
	margin: 0;
}

/* ==========================================================================
   Items de programa
   ========================================================================== */

.trakfm-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.trakfm-item {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(20, 39, 78, 0.06);
	transition: transform 0.15s, box-shadow 0.15s;
	position: relative;
	overflow: hidden;
}
.trakfm-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(20, 39, 78, 0.1);
}

/* El <a> (o <div> si no hay permalink) que envuelve todo el contenido */
.trakfm-item-link {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 14px 22px 14px 14px;
	color: inherit;
	text-decoration: none;
	border-radius: inherit;
}
.trakfm-item-link:focus-visible {
	outline: 3px solid var(--tfp-orange);
	outline-offset: 2px;
}
a.trakfm-item-link:hover .trakfm-item-title {
	color: var(--tfp-orange);
}

/* Foto circular */
.trakfm-item-photo {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tfp-orange);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(244, 123, 32, 0.25);
}
.trakfm-item-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.trakfm-item-photo-placeholder {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}

/* Cuerpo (titular, locutores, etc.) */
.trakfm-item-body {
	min-width: 0;
}
.trakfm-item-title {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--tfp-navy);
	margin: 0 0 3px;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	line-height: 1.2;
	transition: color 0.15s;
}
.trakfm-item-hosts {
	font-size: 14px;
	color: var(--tfp-muted);
	margin: 0;
	font-weight: 500;
}
.trakfm-item-excerpt {
	font-size: 13px;
	color: var(--tfp-muted);
	margin: 6px 0 0;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.trakfm-item-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 5px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--tfp-red);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Horario grande, tipo display */
.trakfm-item-time {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-weight: 700;
	color: #c9d0dc;
	font-size: 28px;
	line-height: 1;
	letter-spacing: -0.5px;
}
.trakfm-item-sep {
	font-size: 12px;
	color: #c9d0dc;
	font-weight: 600;
}
.trakfm-item-end {
	font-size: 14px;
	color: var(--tfp-muted);
	font-weight: 600;
}

/* ==========================================================================
   Estado: EN DIRECTO
   ========================================================================== */

.trakfm-item.is-live {
	background: var(--tfp-navy);
	color: #fff;
	box-shadow: 0 6px 20px rgba(20, 39, 78, 0.2);
}
.trakfm-item.is-live::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--tfp-orange);
	border-radius: 10px 0 0 10px;
}
.trakfm-item.is-live .trakfm-item-title {
	color: #fff;
}
.trakfm-item.is-live .trakfm-item-hosts {
	color: rgba(255, 255, 255, 0.75);
}
.trakfm-item.is-live .trakfm-item-excerpt {
	color: rgba(255, 255, 255, 0.6);
}
.trakfm-item.is-live .trakfm-item-time {
	color: #fff;
}
.trakfm-item.is-live .trakfm-item-sep,
.trakfm-item.is-live .trakfm-item-end {
	color: rgba(255, 255, 255, 0.6);
}
.trakfm-item.is-live .trakfm-item-photo {
	border-color: var(--tfp-orange);
	box-shadow: 0 4px 16px rgba(244, 123, 32, 0.4);
}

.trakfm-live-dot {
	width: 8px;
	height: 8px;
	background: var(--tfp-red);
	border-radius: 50%;
	display: inline-block;
	animation: trakfm-pulse 1.8s ease-out infinite;
}
@keyframes trakfm-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
	70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ==========================================================================
   Accesibilidad
   ========================================================================== */

.trakfm-tab:focus-visible {
	outline: 3px solid var(--tfp-orange);
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.trakfm-live-dot,
	.trakfm-item,
	.trakfm-item-link,
	.trakfm-tab,
	.trakfm-item-title {
		animation: none !important;
		transition: none !important;
	}
	.trakfm-item:hover {
		transform: none;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — pestañas un poco más compactas, padding interior menor */
@media (max-width: 1024px) {
	.trakfm-tab { padding: 12px 10px 14px; }
	.trakfm-tab-name { font-size: 13px; }
	.trakfm-panels { padding: 16px 12px; }
	.trakfm-item-link { padding: 12px 18px 12px 12px; gap: 14px; }
	.trakfm-item-title { font-size: 16px; }
	.trakfm-item-time { font-size: 24px; }
}

/* Móvil — reorganización vertical del item */
@media (max-width: 720px) {
	.trakfm-item-link {
		grid-template-columns: 64px 1fr;
		grid-template-rows: auto auto;
		padding: 12px 14px;
		gap: 12px;
	}
	.trakfm-item-photo {
		width: 56px;
		height: 56px;
		grid-row: 1 / span 2;
	}
	.trakfm-item-photo-placeholder { font-size: 22px; }
	.trakfm-item-time {
		grid-column: 2;
		grid-row: 2;
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		font-size: 18px;
		margin-top: 4px;
	}
	.trakfm-item-end { font-size: 14px; }
	.trakfm-item-title { font-size: 15px; }
	.trakfm-tab { min-width: 70px; padding: 10px 8px 12px; }
	.trakfm-tab-name { font-size: 12px; }
	.trakfm-tab-date { font-size: 10px; }
}

/* Móvil pequeño — el horario se inline con los locutores */
@media (max-width: 480px) {
	.trakfm-panels { padding: 12px 8px; border-radius: 0 0 8px 8px; }
	.trakfm-tabs { border-radius: 8px 8px 0 0; }
	.trakfm-tab { min-width: 60px; padding: 8px 6px 10px; }
	.trakfm-tab-name { font-size: 11px; }
	.trakfm-tab-date { font-size: 9px; letter-spacing: 0.5px; }
	.trakfm-item-link { padding: 10px 12px; }
	.trakfm-item-title { font-size: 14px; letter-spacing: 0; }
	.trakfm-item-hosts { font-size: 12px; }
	.trakfm-item-excerpt { display: none; } /* fuera para liberar espacio */
	.trakfm-item-time { font-size: 16px; }
}

/* ==========================================================================
   Página single de programa (template del plugin)
   ========================================================================== */

.trakfm-single {
	--tfp-navy: #14274e;
	--tfp-orange: #f47b20;
	--tfp-red: #ef4444;
	--tfp-muted: #6b7a99;

	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	color: var(--tfp-navy);
	max-width: 920px;
	margin: 40px auto;
	padding: 0 20px;
}

.trakfm-breadcrumbs {
	font-size: 13px;
	color: var(--tfp-muted);
	margin-bottom: 20px;
}
.trakfm-breadcrumbs a { color: var(--tfp-orange); text-decoration: none; }
.trakfm-breadcrumbs a:hover { text-decoration: underline; }

.trakfm-single-header {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	align-items: center;
	margin-bottom: 36px;
}

.trakfm-single-photo {
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #d63a6b 0%, var(--tfp-orange) 100%);
	box-shadow: 0 8px 24px rgba(20, 39, 78, 0.15);
}
.trakfm-single-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trakfm-single-meta { min-width: 0; }

.trakfm-single-live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 5px 12px;
	background: var(--tfp-navy);
	color: #fff;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.trakfm-single-title {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 42px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1.05;
	margin: 0 0 16px;
	color: var(--tfp-navy);
}

.trakfm-single-hosts {
	margin: 8px 0;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.trakfm-single-schedule {
	margin: 12px 0;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	flex-wrap: wrap;
}
.trakfm-single-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--tfp-muted);
	margin-top: 4px;
	flex-shrink: 0;
}
.trakfm-single-slots {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.trakfm-single-slot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.trakfm-single-days {
	display: inline-flex;
	gap: 4px;
	flex-wrap: wrap;
}
.trakfm-single-day {
	display: inline-block;
	padding: 3px 10px;
	background: rgba(244, 123, 32, 0.12);
	color: var(--tfp-orange);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
}
.trakfm-single-time {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--tfp-navy);
}

.trakfm-single-content {
	font-size: 17px;
	line-height: 1.7;
	color: #2c3e5c;
}
.trakfm-single-content p { margin: 0 0 1.2em; }

@media (max-width: 720px) {
	.trakfm-single-header {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: left;
	}
	.trakfm-single-photo { max-width: 280px; }
	.trakfm-single-title { font-size: 30px; }
	.trakfm-single-content { font-size: 16px; }
}

/* ==========================================================================
   Widget [trakfm_proximos] — columna de programación para home / sidebar
   ========================================================================== */

.trakfm-upcoming {
	--tfp-navy: #14274e;
	--tfp-navy-deep: #0f1c3f;
	--tfp-orange: #f47b20;
	--tfp-orange-soft: #f7a35d;
	--tfp-red: #ef4444;
	--tfp-text: #14274e;
	--tfp-muted: #6b7a99;
	--tfp-line: rgba(20, 39, 78, 0.08);

	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	color: var(--tfp-text);
	background: #fff;
	border: 1px solid var(--tfp-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20, 39, 78, 0.04);
	box-sizing: border-box;
}
.trakfm-upcoming *,
.trakfm-upcoming *::before,
.trakfm-upcoming *::after { box-sizing: border-box; }

/* Cabecera del widget */
.trakfm-upcoming-header {
	background: var(--tfp-navy);
	padding: 12px 16px;
}
.trakfm-upcoming-title {
	margin: 0;
	color: #fff;
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/* Card "En directo" */
.trakfm-upcoming-live {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--tfp-navy) 0%, var(--tfp-navy-deep) 100%);
	color: #fff;
	text-decoration: none;
	position: relative;
	transition: background 0.15s;
}
.trakfm-upcoming-live::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--tfp-orange);
}
a.trakfm-upcoming-live:hover {
	background: linear-gradient(135deg, #1d3163 0%, var(--tfp-navy) 100%);
}
a.trakfm-upcoming-live:focus-visible {
	outline: 3px solid var(--tfp-orange);
	outline-offset: -3px;
}

.trakfm-upcoming-live-photo {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tfp-orange);
	border: 2px solid rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}
.trakfm-upcoming-live-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trakfm-upcoming-live-body { min-width: 0; }

.trakfm-upcoming-live-flag {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--tfp-orange-soft);
}
.trakfm-upcoming-live-name {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 2px;
	line-height: 1.15;
	color: #fff;
	letter-spacing: 0.1px;
}
.trakfm-upcoming-live-hosts {
	font-size: 12px;
	margin: 0 0 4px;
	color: rgba(255, 255, 255, 0.7);
}
.trakfm-upcoming-live-time {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 700;
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	gap: 6px;
}
.trakfm-upcoming-live-time span { opacity: 0.5; }

/* Lista de próximos */
.trakfm-upcoming-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.trakfm-upcoming-item {
	border-top: 1px solid var(--tfp-line);
}
.trakfm-upcoming-item:first-child { border-top: 0; }

.trakfm-upcoming-item-link {
	display: grid;
	grid-template-columns: 48px 40px 1fr;
	gap: 10px;
	align-items: center;
	padding: 10px 16px;
	color: inherit;
	text-decoration: none;
	transition: background 0.15s;
}
a.trakfm-upcoming-item-link:hover {
	background: #f8fafc;
}
a.trakfm-upcoming-item-link:focus-visible {
	outline: 2px solid var(--tfp-orange);
	outline-offset: -2px;
}
a.trakfm-upcoming-item-link:hover .trakfm-upcoming-item-name {
	color: var(--tfp-orange);
}

.trakfm-upcoming-item-time {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: var(--tfp-orange);
	letter-spacing: -0.3px;
}

.trakfm-upcoming-item-photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--tfp-orange);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.trakfm-upcoming-item-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trakfm-upcoming-item-body { min-width: 0; }
.trakfm-upcoming-item-name {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--tfp-navy);
	margin: 0;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.15s;
}
.trakfm-upcoming-item-hosts {
	font-size: 11px;
	color: var(--tfp-muted);
	margin: 1px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Placeholder cuando no hay foto */
.trakfm-upcoming-photo-placeholder {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
}
.trakfm-upcoming-photo-placeholder--small { font-size: 16px; }

/* Separador "Mañana" */
.trakfm-upcoming-break {
	padding: 8px 16px 4px;
	background: #f8fafc;
	border-top: 1px solid var(--tfp-line);
}
.trakfm-upcoming-break span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--tfp-muted);
}

/* CTA al pie */
.trakfm-upcoming-footer {
	padding: 0;
	border-top: 1px solid var(--tfp-line);
}
.trakfm-upcoming-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 16px;
	color: var(--tfp-navy);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	transition: background 0.15s, color 0.15s;
}
.trakfm-upcoming-cta:hover {
	background: var(--tfp-navy);
	color: #fff;
}
.trakfm-upcoming-cta span {
	font-size: 14px;
	transition: transform 0.15s;
}
.trakfm-upcoming-cta:hover span {
	transform: translateX(3px);
}

/* Cuando el widget vive en una sidebar estrecha, compactar más */
@media (max-width: 380px) {
	.trakfm-upcoming-item-link {
		grid-template-columns: 44px 36px 1fr;
		gap: 8px;
		padding: 9px 12px;
	}
	.trakfm-upcoming-live { padding: 12px; gap: 10px; }
	.trakfm-upcoming-header { padding: 10px 12px; }
}

/* ==========================================================================
   [trakfm_programas] — Página de programas con estética VINILO / VINTAGE
   ========================================================================== */

.trakfm-programas--vinyl {
	/* Paleta cálida analógica sobre blanco */
	--vy-cream:     #ffffff;   /* fondo principal: blanco limpio */
	--vy-cream-2:   #f5f0e6;   /* tono cálido para acentos */
	--vy-ink:       #2a1f15;   /* texto principal: tinta marrón muy oscura */
	--vy-ink-soft:  #5d4938;   /* texto secundario */
	--vy-burgundy:  #8b1e2d;   /* granate clásico de etiquetas de single */
	--vy-amber:     #c8842b;   /* ámbar / mostaza quemada */
	--vy-gold:      #b08538;   /* dorado viejo */
	--vy-red:       #c1361f;   /* rojo señalético */
	--vy-disc:      #0e0a07;   /* casi negro del vinilo */
	--vy-disc-2:    #1a130d;   /* segundo tono del vinilo */
	--vy-paper-line: rgba(42, 31, 21, 0.06);

	font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--vy-ink);
	background: var(--vy-cream);
	background-image:
		/* Manchas radiales muy suaves para no perder calidez del todo */
		radial-gradient(circle at 20% 30%, rgba(176, 133, 56, 0.035) 0%, transparent 40%),
		radial-gradient(circle at 75% 60%, rgba(139, 30, 45, 0.025) 0%, transparent 45%),
		radial-gradient(circle at 50% 90%, rgba(200, 132, 43, 0.025) 0%, transparent 50%);
	min-height: 100vh;
	padding: 0 0 100px;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

/* Patrón sutil tipo grano sobre el fondo entero (mínimo, solo perceptible) */
.trakfm-programas--vinyl::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 3px,
			rgba(42, 31, 21, 0.006) 3px,
			rgba(42, 31, 21, 0.006) 4px
		);
	pointer-events: none;
	z-index: 0;
}

.trakfm-programas--vinyl * { box-sizing: border-box; }

/* ============ HERO ============ */

.trakfm-programas--vinyl .trakfm-programas-hero {
	position: relative;
	padding: 90px 24px 56px;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 1;
}

/* Líneas de doble filete arriba y abajo (estilo cartelería) */
.trakfm-programas--vinyl .trakfm-programas-hero::before,
.trakfm-programas--vinyl .trakfm-programas-hero::after {
	content: '';
	position: absolute;
	left: 24px;
	right: 24px;
	height: 6px;
	border-top: 1.5px solid var(--vy-ink);
	border-bottom: 1.5px solid var(--vy-ink);
}
.trakfm-programas--vinyl .trakfm-programas-hero::before { top: 36px; }
.trakfm-programas--vinyl .trakfm-programas-hero::after  { bottom: 16px; }

.trakfm-programas--vinyl .trakfm-programas-hero-content {
	position: relative;
	z-index: 1;
}

/* Sello/timbre estilo "ON AIR" arriba */
.trakfm-programas--vinyl .trakfm-programas-stamp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 130px;
	border: 3px solid var(--vy-burgundy);
	border-radius: 50%;
	margin-bottom: 26px;
	transform: rotate(-6deg);
	position: relative;
	color: var(--vy-burgundy);
	box-shadow: inset 0 0 0 2px var(--vy-cream), inset 0 0 0 4px var(--vy-burgundy);
}
.trakfm-programas--vinyl .trakfm-programas-stamp-inner {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.trakfm-programas--vinyl .trakfm-programas-stamp-text {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.8px;
	max-width: 92px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

/* Título display estilo editorial / radio antigua */
.trakfm-programas--vinyl .trakfm-programas-title {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: clamp(46px, 8vw, 110px);
	font-weight: 900;
	letter-spacing: -2px;
	line-height: 0.9;
	margin: 0 0 18px;
	color: var(--vy-ink);
}

.trakfm-programas--vinyl .trakfm-programas-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 22px auto;
	max-width: 320px;
	color: var(--vy-burgundy);
}
.trakfm-programas--vinyl .trakfm-programas-divider-line {
	flex: 1;
	height: 2px;
	background: var(--vy-burgundy);
	border-radius: 1px;
}
.trakfm-programas--vinyl .trakfm-programas-divider-star {
	font-size: 18px;
	letter-spacing: -1px;
}

.trakfm-programas--vinyl .trakfm-programas-subtitle {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 14px;
	color: var(--vy-ink-soft);
	margin: 0;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 600;
}

/* ============ GRID ============ */

.trakfm-programas--vinyl .trakfm-programas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 50px 36px;
	max-width: 1200px;
	margin: 30px auto 0;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}
.trakfm-programas--vinyl[data-columns="2"] .trakfm-programas-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.trakfm-programas--vinyl[data-columns="4"] .trakfm-programas-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.trakfm-programas--vinyl[data-columns="5"] .trakfm-programas-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ============ TARJETA VINILO ============ */

.trakfm-vinyl {
	position: relative;
	text-align: center;
}

.trakfm-vinyl-link {
	display: block;
	color: inherit;
	text-decoration: none;
	padding: 4px;
}
.trakfm-vinyl-link:focus-visible {
	outline: 3px solid var(--vy-burgundy);
	outline-offset: 6px;
	border-radius: 6px;
}

/* Etiqueta tipo single arriba */
.trakfm-vinyl-tag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 220px;
	margin: 0 auto 14px;
	padding: 4px 12px;
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--vy-cream);
	background: var(--vy-ink);
	border-radius: 2px;
}
.trakfm-vinyl-tag-cat {
	color: var(--vy-amber);
}

/* El "soporte" del vinilo: cuadrado con sombra que da profundidad */
.trakfm-vinyl-disc-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

/* El disco en sí: negro con surcos concéntricos */
.trakfm-vinyl-disc {
	width: 92%;
	height: 92%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, var(--vy-disc-2) 0%, var(--vy-disc) 70%, #050302 100%);
	position: relative;
	box-shadow:
		0 18px 36px -8px rgba(0, 0, 0, 0.55),
		0 4px 12px rgba(0, 0, 0, 0.3),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
	transform-origin: center;
}

/* Surcos concéntricos del vinilo: líneas finas en círculo */
.trakfm-vinyl-grooves {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-image: repeating-radial-gradient(
		circle at center,
		transparent 0,
		transparent 3px,
		rgba(255, 255, 255, 0.025) 3px,
		rgba(255, 255, 255, 0.025) 4px,
		transparent 4px,
		transparent 6px,
		rgba(255, 255, 255, 0.015) 6px,
		rgba(255, 255, 255, 0.015) 7px
	);
	pointer-events: none;
}

/* Brillo radial difuso que da sensación de plástico pulido */
.trakfm-vinyl-shine {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.12) 0%, transparent 30%),
		radial-gradient(ellipse at 70% 75%, rgba(200, 132, 43, 0.06) 0%, transparent 40%);
	pointer-events: none;
}

/* Etiqueta central del disco: la foto del programa, recortada circular.
   Ocupa la mayor parte del disco — los surcos son solo un aro exterior. */
.trakfm-vinyl-label {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 72%;
	height: 72%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	box-shadow:
		0 0 0 3px var(--vy-disc),
		0 0 0 4px rgba(255, 255, 255, 0.08),
		0 4px 12px rgba(0, 0, 0, 0.4);
	z-index: 2;
}
.trakfm-vinyl-label-img,
.trakfm-vinyl-label img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Placeholder si no hay foto: gradiente cálido con la inicial */
.trakfm-vinyl-label-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 30% 30%, var(--vy-amber) 0%, var(--vy-burgundy) 65%, var(--vy-ink) 100%);
}
.trakfm-vinyl-label-placeholder span {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 64px;
	font-weight: 900;
	color: #ffffff;
}

/* Agujero central del vinilo — va por encima de todo */
.trakfm-vinyl-hole {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7%;
	height: 7%;
	background: var(--vy-disc);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow:
		inset 0 0 4px rgba(0, 0, 0, 0.9),
		0 0 0 1.5px rgba(255, 255, 255, 0.12);
	z-index: 3;
}

/* Animación al hacer hover: el vinilo gira */
.trakfm-vinyl:hover .trakfm-vinyl-disc,
.trakfm-vinyl-link:focus-visible .trakfm-vinyl-disc {
	animation: trakfm-spin 4s linear infinite;
}
@keyframes trakfm-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Bloque inferior: título, locutores, horario */
.trakfm-vinyl-info {
	margin-top: 22px;
	padding: 0 8px;
}

.trakfm-vinyl-title {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: var(--vy-ink);
	margin: 0 0 8px;
	line-height: 1.15;
	letter-spacing: -0.4px;
}
.trakfm-vinyl:hover .trakfm-vinyl-title {
	color: var(--vy-burgundy);
}

.trakfm-vinyl-hosts {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--vy-ink-soft);
	letter-spacing: 0.2px;
	font-weight: 500;
}
.trakfm-vinyl-hosts-label {
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1.6px;
	color: var(--vy-amber);
	padding: 2px 6px;
	background: rgba(200, 132, 43, 0.15);
	border-radius: 2px;
	text-transform: uppercase;
}

.trakfm-vinyl-schedule {
	display: inline-block;
	padding: 5px 14px;
	border: 1.5px solid var(--vy-ink);
	border-radius: 999px;
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--vy-ink);
	background: transparent;
}

/* Indicador "ON AIR" para programa en directo */
.trakfm-vinyl-onair {
	position: absolute;
	top: -8px;
	right: 12px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--vy-red);
	color: var(--vy-cream);
	border-radius: 2px;
	font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	transform: rotate(3deg);
	box-shadow: 0 4px 12px rgba(193, 54, 31, 0.4);
}
.trakfm-vinyl-onair-dot {
	width: 6px;
	height: 6px;
	background: var(--vy-cream);
	border-radius: 50%;
	animation: trakfm-onair-pulse 1.4s ease-out infinite;
}
@keyframes trakfm-onair-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

/* Disco "en directo": el aro brilla muy sutilmente y rota despacio */
.trakfm-vinyl.is-live .trakfm-vinyl-disc {
	animation: trakfm-spin 5s linear infinite;
	box-shadow:
		0 0 0 2px var(--vy-red),
		0 18px 36px -8px rgba(193, 54, 31, 0.4),
		0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============ Responsive ============ */

@media (max-width: 720px) {
	.trakfm-programas--vinyl { padding-bottom: 60px; }
	.trakfm-programas--vinyl .trakfm-programas-hero { padding: 60px 16px 36px; }
	.trakfm-programas--vinyl .trakfm-programas-hero::before { top: 24px; }
	.trakfm-programas--vinyl .trakfm-programas-hero::after  { bottom: 12px; }
	.trakfm-programas--vinyl .trakfm-programas-stamp { width: 100px; height: 100px; }
	.trakfm-programas--vinyl .trakfm-programas-stamp-text { font-size: 9px; max-width: 70px; }
	.trakfm-programas--vinyl .trakfm-programas-grid {
		gap: 40px 20px;
		padding: 0 18px;
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
	.trakfm-vinyl-title { font-size: 20px; }
	.trakfm-vinyl-hosts { font-size: 12px; }
}

@media (max-width: 480px) {
	.trakfm-programas--vinyl .trakfm-programas-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.trakfm-programas--vinyl .trakfm-programas-divider { max-width: 220px; }
	.trakfm-vinyl-tag { max-width: 200px; }
}

/* Estado vacío */
.trakfm-programas-empty {
	background: #ffffff;
	color: rgba(42, 31, 21, 0.6);
	padding: 80px 20px;
	text-align: center;
	font-family: 'Manrope', system-ui, sans-serif;
	margin: 0 calc(50% - 50vw);
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
	.trakfm-vinyl-disc,
	.trakfm-vinyl-onair-dot {
		animation: none !important;
		transition: none !important;
	}
	.trakfm-vinyl:hover .trakfm-vinyl-disc,
	.trakfm-vinyl-link:focus-visible .trakfm-vinyl-disc {
		animation: none !important;
	}
}