/* ==========================================================================
   Visalia · Podcast — landing y ficha de episodio (Figma: Podcast / Episodio)
   Breakpoints alineados con Impreza: tablets ≤1024 · mobiles ≤600
   ========================================================================== */

.vpod {
	--vpod-primary: #0F7BAD;
	--vpod-primary-600: #042D4D;
	--vpod-primary-50: #EFFAFF;
	--vpod-primary-100: #DFF5FF;
	--vpod-primary-200: #9EDCF7;
	--vpod-text: #3F3F50;
	--vpod-muted: #717181;
	--vpod-line: #EBEBF1;
	--vpod-bg-soft: #F9F9FC;
	--vpod-white: #FFFFFF;

	--vpod-fs-xxl: 56px;
	--vpod-fs-l: 40px;
	--vpod-fs-m: 32px;
	--vpod-fs-xs: 24px;
	--vpod-fs-xxs: 20px;
	--vpod-fs-text-l: 20px;
	--vpod-fs-text-m: 16px;
	--vpod-fs-text-s: 14px;

	font-family: "Titillium Web", sans-serif;
	color: var(--vpod-text);
}
@media (max-width: 1024px) {
	.vpod { --vpod-fs-xxl: 44px; --vpod-fs-l: 34px; --vpod-fs-m: 28px; --vpod-fs-xs: 22px; }
}
@media (max-width: 600px) {
	.vpod { --vpod-fs-xxl: 36px; --vpod-fs-l: 30px; --vpod-fs-m: 24px; --vpod-fs-xs: 20px; --vpod-fs-xxs: 18px; --vpod-fs-text-l: 18px; }
}

/* Reset de márgenes del tema dentro de los componentes */
.vpod :where(h1, h2, h3, h4, p, ul, ol, li, figure) { margin: 0; padding: 0; }
.vpod :where(ul.vpod-list, ul.vpod-related__grid, ul.vpod-interviews) { list-style: none; }
.vpod :where(ul.vpod-list, ul.vpod-related__grid, ul.vpod-interviews) > li { margin: 0; }
.vpod a { text-decoration: none; }
.vpod img { display: block; max-width: 100%; }

/* Tipografía (Figma) */
.vpod .vpod-h-xxl { font-size: var(--vpod-fs-xxl); line-height: 1.2; font-weight: 600; color: var(--vpod-primary); }
.vpod .vpod-h-l   { font-size: var(--vpod-fs-l);   line-height: 1.2; font-weight: 600; }
.vpod .vpod-h-m   { font-size: var(--vpod-fs-m);   line-height: 1.2; font-weight: 600; color: var(--vpod-text); }
.vpod .vpod-h-xs  { font-size: var(--vpod-fs-xs);  line-height: 1.2; font-weight: 600; color: var(--vpod-text); }
.vpod .vpod-h-xs a { color: inherit; }
.vpod .vpod-h-xs a:hover { color: var(--vpod-primary); }
.vpod .vpod-p-l   { font-size: var(--vpod-fs-text-l); line-height: 1.6; font-weight: 400; }
.vpod .vpod-p-m   { font-size: var(--vpod-fs-text-m); line-height: 1.6; font-weight: 400; }
.vpod .vpod-p-s   { font-size: var(--vpod-fs-text-s); line-height: 1.6; font-weight: 400; }
.vpod .vpod-sub-l { font-size: var(--vpod-fs-text-l); line-height: 30px; font-weight: 700; color: var(--vpod-text); }
.vpod .vpod-sub-m { font-size: var(--vpod-fs-text-m); line-height: 26px; font-weight: 700; color: var(--vpod-text); }
.vpod .vpod-meta  { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--vpod-primary); }
.vpod .vpod-c-primary { color: var(--vpod-primary); }
.vpod .vpod-c-muted { color: var(--vpod-muted); }

/* Iconos */
.vpod-ico { flex: 0 0 auto; display: block; }

/* Enlace con flecha (Link) */
.vpod .vpod-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	padding: 8px 0;
	font-size: 16px; line-height: 20px; font-weight: 700;
	color: var(--vpod-primary);
	transition: color .2s;
}
.vpod .vpod-link:hover, .vpod .vpod-link:focus-visible { color: var(--vpod-primary-600); }
.vpod .vpod-link:hover .vpod-ico--arrow { transform: translateX(2px); }
.vpod .vpod-link .vpod-ico { transition: transform .2s; }

/* Botones */
.vpod .vpod-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	max-width: 311px;
	border-radius: 100px;
	font-size: 16px; line-height: 20px; font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s;
}
.vpod .vpod-btn--outline {
	padding: 13px 23px;
	border: 1px solid var(--vpod-primary);
	background: var(--vpod-white);
	color: var(--vpod-primary);
}
.vpod .vpod-btn--outline:hover, .vpod .vpod-btn--outline:focus-visible { background: var(--vpod-primary-100); color: var(--vpod-primary-600); border-color: var(--vpod-primary-600); }
.vpod .vpod-btn--primary {
	padding: 14px 40px;
	background: var(--vpod-primary);
	color: var(--vpod-white);
}
.vpod .vpod-btn--primary:hover, .vpod .vpod-btn--primary:focus-visible { background: var(--vpod-primary-600); color: var(--vpod-white); }
.vpod :is(.vpod-btn, .vpod-link, .vpod-chip, .vpod-faq__q button):focus-visible { outline: 2px solid var(--vpod-primary); outline-offset: 2px; }

.vpod .vpod-platforms { display: flex; flex-wrap: wrap; gap: 16px 12px; align-items: flex-start; }

/* Portadas */
.vpod .vpod-cover { position: relative; overflow: hidden; border-radius: 8px; background: var(--vpod-primary-100); }
.vpod .vpod-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* ---------- LANDING ---------- */
.vpod-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 56px; }

.vpod-intro {
	display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px;
	padding: 32px;
	border-radius: 16px;
	background: var(--vpod-primary-50);
	margin-bottom: 56px;
}
.vpod-intro__cover { flex: 1 0 0; min-width: 200px; max-width: 260px; height: 260px; border-radius: 8px; overflow: hidden; }
.vpod-intro__cover img { width: 100%; height: 100%; object-fit: cover; }
.vpod-intro__content { flex: 1 0 0; min-width: 240px; display: flex; flex-direction: column; gap: 16px; }
.vpod-intro__actions { padding-top: 8px; }
.vpod-intro__actions .vpod-platforms { gap: 12px; align-items: center; }

.vpod-episodes { display: flex; flex-direction: column; gap: 24px; }
.vpod-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.vpod .vpod-chip {
	min-width: 148px;
	margin: 0;
	padding: 3px 15px; /* borde «inside» del Figma: no suma alto */
	border: 1px solid var(--vpod-primary);
	border-radius: 100px;
	background: var(--vpod-primary-50);
	color: var(--vpod-primary);
	font-family: inherit; font-size: 16px; line-height: 26px; font-weight: 400;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.vpod .vpod-chip:hover { background: var(--vpod-primary-100); color: var(--vpod-primary); }
.vpod .vpod-chip.is-active { background: var(--vpod-primary); color: var(--vpod-white); }

.vpod-list { display: flex; flex-direction: column; }
.vpod-item {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--vpod-line);
}
.vpod-item[hidden] { display: none; }
.vpod-item__cover { flex: 0 0 256px; display: block; }
.vpod-cover--card { width: 256px; height: 144px; }
.vpod-item__info { flex: 1 0 0; min-width: 280px; display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.vpod-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 4px; }

@media (max-width: 600px) {
	.vpod-intro { padding: 24px; }
	.vpod-intro__cover { max-width: none; flex-basis: 100%; height: auto; aspect-ratio: 1; }
	.vpod-item__cover { flex-basis: 100%; }
	.vpod-cover--card { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.vpod-item__info { min-width: 0; flex-basis: 100%; }
}

/* ---------- FICHA ---------- */
.vpod-ep { display: flex; flex-direction: column; gap: 56px; }
.vpod-ep__head { display: flex; flex-direction: column; gap: 16px; }
.vpod-ep__head .vpod-link--back { align-self: flex-start; color: var(--vpod-primary); }
.vpod-ep__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }

.vpod-listen {
	display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
	padding: 24px;
	border-radius: 16px;
	background: var(--vpod-primary-50);
}
.vpod .vpod-listen__cover { flex: 1 0 0; min-width: 200px; max-width: 288px; height: 162px; }
.vpod-listen__content { flex: 1 0 0; min-width: 240px; display: flex; flex-direction: column; gap: 20px; }
.vpod-listen__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

.vpod-sec { display: flex; flex-direction: column; gap: 24px; }

.vpod-guest {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px;
	padding: 23px;
	border: 1px solid var(--vpod-line);
	border-radius: 16px;
}
.vpod-guest__avatar { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 100px; overflow: hidden; }
.vpod-guest__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vpod-guest__info { flex: 1 0 0; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.vpod-guest__bio p + p { margin-top: 12px; }
.vpod-guest__links { padding-top: 8px; display: flex; }

.vpod-rich { font-size: var(--vpod-fs-text-m); line-height: 1.6; }
.vpod-rich > * + * { margin-top: 24px !important; }
.vpod-rich ul, .vpod-rich ol { padding-left: 24px !important; }
.vpod-rich ul { list-style: disc; }
.vpod-rich li { margin: 0; }
.vpod-rich a { color: var(--vpod-primary); text-decoration: underline; }
.vpod-rich :is(h2, h3) { font-size: var(--vpod-fs-xs); line-height: 1.2; font-weight: 600; }

.vpod-faqs__list { display: flex; flex-direction: column; gap: 16px; }
.vpod-faq {
	display: flex; flex-direction: column; gap: 12px;
	padding: 15px 23px;
	border: 1px solid var(--vpod-primary-200);
	border-radius: 16px;
	background: var(--vpod-white);
}
.vpod .vpod-faq__q { margin: 0; font-size: 0; line-height: 0; }
.vpod .vpod-faq__q button {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
	width: 100%;
	margin: 0; padding: 0;
	border: 0; background: none;
	text-align: left;
	min-height: 0; height: auto;
	font-family: inherit; font-size: 0; line-height: 0; color: var(--vpod-text);
	cursor: pointer;
}
.vpod-faq__icon { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 100px; background: var(--vpod-primary-100); color: var(--vpod-primary); }
.vpod-faq__text { flex: 1 0 0; min-width: 240px; font-size: var(--vpod-fs-xxs); line-height: 1.4; font-weight: 600; }
.vpod-faq .vpod-ico--chevron { color: var(--vpod-text); transition: transform .2s; }
.vpod-faq.is-open .vpod-ico--chevron { transform: rotate(180deg); }
.vpod-faq__a { font-size: var(--vpod-fs-text-m); line-height: 1.6; }
.vpod-faq__a p + p { margin-top: 12px; }
.vpod-faq__a[hidden] { display: none; }

.vpod-interviews { display: flex; flex-direction: column; }
.vpod-interview {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--vpod-line);
}
.vpod-interview__info { flex: 1 0 0; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }

/* Columnas de la fila contenido + barra lateral como en el Figma (865 / 311) */
@media (min-width: 1025px) {
	.g-cols.via_grid.cols_3-1:has(.vpod) { grid-template-columns: 865fr 311fr; }
}

/* Otros episodios (fila a sangre gris) */
.l-section.vpod-row-gris { background: #F9F9FC; }
.vpod-related { display: flex; flex-direction: column; gap: 32px; }
.vpod-related__grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
.vpod-card { flex: 1 0 0; min-width: 285px; max-width: 520px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vpod-card > a:not(.vpod-link) { display: block; width: 100%; }
.vpod .vpod-card__cover { width: 100%; height: 220px; }
@media (max-width: 1024px) {
	/* 3 columnas no caben con min 285: la tarjeta huérfana no se estira */
	.vpod-card { max-width: calc((100% - 32px) / 2); }
}
@media (max-width: 680px) {
	.vpod-card { max-width: none; flex-basis: 100%; min-width: 0; }
	.vpod .vpod-card__cover { height: auto; aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
	.vpod-listen { padding: 16px; }
	.vpod .vpod-listen__cover { max-width: none; flex-basis: 100%; height: auto; aspect-ratio: 16 / 9; }
	.vpod .vpod-faq__q button { flex-wrap: nowrap; align-items: flex-start; }
	.vpod-faq__text { min-width: 0; flex: 1 1 auto; padding-top: 6px; }
	.vpod-faq .vpod-ico--chevron { margin-top: 8px; }
	.vpod-guest__info { min-width: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.vpod * { transition: none !important; }
}