/* Podcast "Conversar es Natural".
   Figma (lienzo 1512): logotipo de 368x131 en 82/499, panel de 962x227 en
   504/413 y filas de 501x282 desde 803. */

/* ---------------- Cabecera ---------------- */

.agn-hero-pagina--podcast .agn-hero-pagina__interior {
	align-items: end;
	gap: 0;
}

/* El panel llega hasta 1466: 43 más allá del contenedor. */
.agn-hero-pagina--podcast .agn-hero-pagina__panel {
	width: calc(100% + clamp(0px, 2.84vw, 43px));
	gap: clamp(1rem, 1.52vw, 23px);
	min-height: clamp(9rem, 15.01vw, 227px);
	padding: clamp(1.25rem, 3.51vw, 53px) clamp(1.25rem, 4.3vw, 65px)
		clamp(1rem, 2.45vw, 37px);
}

.agn-hero-pagina__logo {
	max-width: clamp(14rem, 24.34vw, 368px);
	margin: 0 0 clamp(0px, .66vw, 10px);
}

.agn-hero-pagina__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.agn-hero-pagina--podcast .agn-hero-pagina__acciones {
	gap: clamp(1rem, 1.72vw, 26px);
}

.agn-hero-pagina__escuchar {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 1.79vw, 27px);
	margin: 0;
	font-size: var(--agn-fs-body);
	font-style: italic;
	font-weight: var(--agn-peso-bold);
	color: var(--agn-blanco);
}

.agn-rrss--podcast a {
	width: 33px;
	height: 33px;
}

/* Figma: sobre la fotografía los íconos van en blanco. */
.agn-rrss--podcast svg [stroke]:not([stroke="none"]) {
	stroke: var(--agn-blanco);
}

.agn-rrss--podcast svg [fill]:not([fill="none"]) {
	fill: var(--agn-blanco);
}

@media (max-width: 860px) {
	.agn-hero-pagina--podcast .agn-hero-pagina__interior {
		gap: 1.5rem;
	}

	.agn-hero-pagina--podcast .agn-hero-pagina__panel {
		width: 100%;
	}
}

/* ---------------- Temporadas ---------------- */

/* De la fotografía a la primera fila hay 83. */
.agn-temporadas {
	padding-block: clamp(2rem, 5.49vw, 83px) clamp(3rem, 6.22vw, 94px);
}

.agn-temporadas__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Miniatura de 501 y columna de texto en 661: 71 de separación. */
.agn-temporada {
	display: grid;
	grid-template-columns: minmax(0, 501fr) minmax(0, 762fr);
	gap: clamp(1.25rem, 4.7vw, 71px);
	align-items: start;
	margin: 0;
	padding-bottom: clamp(1.5rem, 3.24vw, 49px);
	border-bottom: 2px solid #e5e5e5;
}

.agn-temporada + .agn-temporada {
	margin-top: clamp(1.5rem, 3.11vw, 47px);
}

.agn-temporada:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.agn-temporada__medio {
	aspect-ratio: 501 / 282;
	border-radius: var(--agn-r-xs);
	overflow: hidden;
	background: var(--agn-gris-claro);
}

.agn-temporada__medio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agn-temporada__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	/* El titular arranca 18 bajo el borde superior de la miniatura. */
	padding-top: clamp(.5rem, 1.19vw, 18px);
}

.agn-temporada__titulo {
	margin: 0 0 clamp(.75rem, 1.32vw, 20px);
	font-size: var(--agn-fs-xxl);
	font-weight: var(--agn-peso-bold);
	line-height: 1.167;
	color: var(--agn-gris);
}

.agn-temporada__texto {
	max-width: 592px;
	margin-bottom: clamp(1.25rem, 3.24vw, 49px);
	font-size: var(--agn-fs-body);
	line-height: 1.22;
	color: var(--agn-gris);
}

.agn-temporada__texto p {
	margin: 0;
}

/* Los botones salen 6 a la izquierda del texto, como en el Figma. */
.agn-temporada__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.75rem, 1.65vw, 25px);
	margin-left: -6px;
}

.agn-temporada__acciones .agn-btn {
	min-width: 189px;
}

@media (max-width: 760px) {
	.agn-temporada {
		grid-template-columns: minmax(0, 1fr);
	}

	.agn-temporada__acciones {
		margin-left: 0;
	}
}

/* Los botones de temporada van en gris claro; el verde es el estado hover. */
.agn-temporada__acciones .agn-btn:hover,
.agn-temporada__acciones .agn-btn:focus-visible {
	background: var(--agn-verde);
	--agn-btn-texto: var(--agn-gris);
}