/* Podcast · la playlist
   Sólo lo PROPIO de esta sección. Lo compartido —fichas de color, menú,
   portada, cifras, hitos, pilares, mosaico, aliados, prensa, eventos,
   contacto, carrusel, video, pie— vive en v2.css, que se carga antes.
   La carga el layout a partir de `hojaSeccion` (ver views/layouts/v2.hbs). */

/* ─── Podcast ─────────────────────────────────────────────────────── */
/* La portada del podcast no lleva foto, así que tampoco necesita el alto de
   las demás: se recorta para que el reproductor entre casi en la primera
   pantalla, que es a lo que se viene. El velo de .portada sigue encima y
   funde el bloque con el fondo. */
.portada--podcast { background: var(--superficie); min-height: clamp(300px, 44vh, 420px); }
.portada--podcast .portada__cuerpo { padding-top: 124px; }

/* Reproductor a la izquierda, lista de episodios a la derecha, como una
   playlist. La lista mide lo que mide la columna del video y hace su propio
   desplazamiento: así la página no crece veinte filas hacia abajo y siempre
   se ve qué viene después. */
.reproductor {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--lista-ancho, 390px);
  gap: 18px; align-items: stretch;
  /* El alto de la fila lo manda el video, no la lista. Si no se le pone
     tope, las veinte filas estiran la fila a 2000 px y el video queda
     diminuto arriba a la izquierda. Esto calcula el alto del reproductor:
     la columna izquierda es el ancho de lectura menos la lista y el hueco,
     y el video es 9/16 de eso. El `+ 54px` es el pie con el título. */
  --lista-ancho: 390px;
  --izquierda: calc(min(var(--ancho), 100vw - var(--gutter) * 2) - var(--lista-ancho) - 18px);
  --alto-video: calc(var(--izquierda) * 0.5625);
}
.reproductor__video { min-width: 0; display: flex; flex-direction: column; }

.video__pie { margin-top: 14px; font-size: 17px; font-weight: 700; line-height: 1.4; }
.video__num { display: block; margin-bottom: 6px; color: var(--acento-chico); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.lista {
  display: flex; flex-direction: column; min-height: 0;
  /* El tope la deja a la altura del reproductor; dentro, su propio scroll. */
  max-height: calc(var(--alto-video, 420px) + 54px);
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); overflow: hidden;
}
.lista__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--linea); flex: none;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.lista__cuenta { color: var(--acento-chico); }
/* `min-height: 0` es lo que deja que el hijo con scroll se encoja dentro
   del flex; sin eso la lista empuja la página hacia abajo. */
.lista__pista { list-style: none; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.fila-ep {
  display: flex; gap: 12px; padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
  transition: background .15s;
}
.fila-ep:hover { background: rgba(255,255,255,.05); }
/* El estado se lee por la barra lateral del color y un velo neutro. Antes
   el velo era verde escrito a mano —se quedó del acento viejo— y además
   teñía el fondo lo justo para tumbar el contraste del título. */
.fila-ep.is-activa { background: rgba(255,255,255,.06); box-shadow: inset 3px 0 0 var(--acento); }
.fila-ep__mini { position: relative; flex: none; width: 120px; }
.fila-ep__mini img { width: 120px; height: 68px; object-fit: cover; border-radius: 9px; background: var(--fondo); }
.fila-ep__reloj {
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(22,24,27,.88); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px 5px; border-radius: 5px;
}
.fila-ep__texto { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fila-ep__meta { font-size: 11px; font-weight: 700; color: var(--tinta-2); }
/* Dos líneas y corta: los títulos del canal son largos y si no, cada fila
   mediría distinto y la lista se vería rota. */
.fila-ep__titulo {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fila-ep.is-activa .fila-ep__titulo { color: var(--tinta); }
.fila-ep__canal { font-size: 12px; color: var(--tinta-2); }

@media (max-width: 1040px) {
  /* En una columna: el video arriba y la lista debajo, con su propio
     desplazamiento acotado para que no se coma la página. */
  .reproductor { grid-template-columns: 1fr; }
  /* En una columna el cálculo de arriba ya no aplica: tope fijo. */
  .lista { max-height: 460px; }
}

/* ─── Invitados destacados ────────────────────────────────────────── */
/* La pista es la misma de las opiniones (v2.css); aquí, la tarjeta. */
.invitado {
  flex: 0 0 min(280px, 76%); scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
}
.invitado__foto {
  aspect-ratio: 16 / 10; background: var(--fondo) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.invitado__inicial { font-size: 56px; font-weight: 900; color: var(--acento); }
.invitado__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.invitado__nombre { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.invitado__desc { font-size: 14px; color: var(--tinta-2); flex: 1; }
.invitado__ver { align-self: flex-start; margin-top: 10px; }

/* ─── Patrocinadores ──────────────────────────────────────────────── */
/* Sin logo, el nombre en letra; la pastilla de muestra va debajo. */
.aliado--texto { flex-direction: column; gap: 8px; }
.aliado__nombre { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--tinta); }

/* Botón con ícono de red (YouTube, Spotify, Instagram del podcast). */
.boton--icono { display: inline-flex; align-items: center; gap: 8px; }
.boton--icono svg { width: 18px; height: 18px; flex: none; }

/* ─── Dónde escuchar, en el teléfono ──────────────────────────────── */
/* Tres píldoras apiladas de ancho distinto se leían como una lista, no
   como acciones. En una fila: las dos plataformas a partes iguales y el
   Instagram como círculo de 44. Sin «Escuchar en» ni flecha: el ícono y
   el nombre ya lo dicen. */
@media (max-width: 900px) {
  .escucha { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; width: 100%; max-width: 420px; }
  .cierre .escucha { margin-inline: auto; }
  .escucha .boton { justify-content: center; padding: 0 12px; }
  .escucha .escucha__largo { display: none; }
  .escucha .escucha__red { width: 44px; padding: 0; }
  /* Si sólo hay una plataforma, que no quede un hueco en medio. */
  .escucha:has(> .boton:nth-child(2).escucha__red) { grid-template-columns: 1fr 44px; }
}

/* El patrocinador del podcast (Caliente) se lee como patrocinador, no como
   un logo más de una lista: más alto y con su proporción. El archivo va
   recortado a su área visible; el original traía tanto margen transparente
   que a 38 px el logo quedaba en 15. */
.aliado--patrocinador { flex: 0 1 420px; min-height: 140px; padding: 28px 40px; }
.aliado--patrocinador img { max-height: 84px; max-width: 100%; height: auto; }
@media (max-width: 640px) {
  .aliado--patrocinador { flex-basis: 100%; min-height: 112px; padding: 22px 28px; }
  .aliado--patrocinador img { max-height: 60px; }
}

/* Las cifras del podcast son más largas que las demás («84.8 mil h»,
   «+35.3 mil»): en un solo renglón y del tamaño que permite el ancho de su
   recuadro (unidades cqi), para que nunca se salgan, en ningún equipo. */
.cifra { container-type: inline-size; }
.cifra__valor { white-space: nowrap; font-size: clamp(26px, 16cqi, 44px); }