/* EchoFather Familias · capítulo «Voces» (v7.2)
   Una sola tarjeta para Onda Cero (la nota incluye el audio de la entrevista).
   Con foto (assets/onda-cero-por-fin.jpg): tarjeta ancha foto | texto y, debajo, los otros medios en fila.
   Sin foto: el bloque de la foto se elimina solo y vuelve el diseño de dos columnas.
   Las clases .has-photo las pone app-demo.js, sin selector de padres, para que funcione también en Firefox 115 y Safari antiguos.
   El nombre del medio va en texto, sin imitar su logotipo; con el logo oficial, sustituir .media-source por la imagen. */
.media-body { display: flex; flex-direction: column; flex: 1; }
.media-source {
  font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -.03em; color: var(--ink);
  margin: 22px 0 16px;
}
.media-source small { font-family: var(--sans); letter-spacing: .22em; margin-top: 9px; }
.media-feature h3 { font-size: 28px; }
.media-list { justify-content: center; }
.media-list > a { flex: 0 0 auto; }

/* Con foto */
.media-photo { margin: 0; position: relative; overflow: hidden; background: #dfe3d8; min-height: 100%; aspect-ratio: 16 / 9; }
.media-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.media-feature:hover .media-photo img { transform: scale(1.035); }
.media-photo figcaption {
  position: absolute; left: 12px; bottom: 10px; padding: 3px 9px; border-radius: 999px;
  font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #f4f0e6; background: #061c249e;
}
.media-grid.has-photo { grid-template-columns: 1fr; gap: 22px; }
.media-feature.has-photo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); padding: 0; }
.media-feature.has-photo .media-photo { aspect-ratio: 16 / 9; }
.media-feature.has-photo .media-body { padding: 26px 32px 24px; }
.media-feature.has-photo .media-source { margin: 16px 0 12px; }
.media-feature.has-photo h3 { font-size: 26px; margin-bottom: 10px; }
.media-feature.has-photo .media-bottom { padding-top: 16px; }
.media-grid.has-photo .media-list { flex-direction: row; gap: 34px; }
.media-grid.has-photo .media-list > a { flex: 1 1 0; min-width: 0; padding: 14px 0 16px; }
.media-grid.has-photo .media-list h3 { font-size: 24px; }

@media (max-width: 980px) {
  .media-feature.has-photo .media-body { padding: 22px 24px; }
  .media-feature.has-photo h3 { font-size: 23px; }
}
@media (max-width: 720px) {
  .media-source { margin: 20px 0 14px; }
  .media-feature.has-photo { display: flex; flex-direction: column; }
  .media-feature.has-photo .media-photo { min-height: 0; }
  .media-feature.has-photo .media-body { padding: 22px 24px 24px; }
  .media-grid.has-photo .media-list { flex-direction: column; gap: 0; }
}

/* Episodio de El Aprehendedor (v7.5): miniatura que abre YouTube y enlaces a cada plataforma */
.media-list > .media-episode { display: flex; gap: 20px; align-items: flex-start; border-bottom: 1px solid var(--line); padding: 22px 0; }
.media-list > .media-episode:first-child { padding-top: 8px; }
.media-grid.has-photo .media-list > .media-episode { flex: 1 1 0; min-width: 0; padding: 14px 0 16px; }
.media-episode > div { min-width: 0; }
.media-episode h3 { font-size: 24px; margin-bottom: 6px; }
.episode-thumb {
  position: relative; flex: 0 0 auto; width: 176px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: block;
  border: 1px solid #ffffff26; box-shadow: 0 10px 26px #0005;
}
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.episode-thumb:hover img { transform: scale(1.05); }
.episode-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.episode-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.episode-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--paper); text-decoration: none;
  border: 1px solid #dfbd7655; background: #dfbd760f; transition: background .25s, border-color .25s, color .25s;
}
.episode-links a:hover { background: #dfbd7626; border-color: var(--gold); color: var(--bright); }
.episode-links .episode-special { border-color: transparent; background: none; color: var(--gold); padding: 0 4px; }
@media (max-width: 1180px) { .episode-thumb { width: 150px; } }
@media (max-width: 520px) {
  .media-list > .media-episode { flex-direction: column; gap: 14px; }
  .episode-thumb { width: 100%; }
}

/* ── Lecturas (v7.7): acceso a las reflexiones publicadas en LinkedIn ── */
/* Va en la cabecera de Voces, a la derecha del titular: no añade altura al capítulo */
#voces .section-heading { gap: 16px 32px; }
.reading-trigger { flex-shrink: 0; }
.reading-trigger {
  display: inline-flex; align-items: center; gap: 14px; padding: 9px 18px 9px 9px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid #dfbd7655; color: var(--paper);
  background: linear-gradient(145deg, #dfbd761f, #dfbd7604), #0b2b3580; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.reading-trigger:hover { border-color: #dfbd76aa; transform: translateY(-2px); box-shadow: 0 14px 30px #0005; }
.reading-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.reading-count { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--gold); color: var(--night); font-family: var(--serif); font-size: 21px; }
.reading-label { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.reading-label b { font-size: 15px; font-weight: 650; }
.reading-label small { font-size: 13px; color: #a9c1bd; }
.reading-arrow { font-size: 20px; color: var(--gold); margin-left: 4px; }

.reading-dialog { background: var(--night); color: var(--paper); max-width: 1100px; }
.reading-dialog .close-dialog { color: var(--paper); border-color: #dfbd7640; }
.reading-dialog .eyebrow { color: var(--gold); }
.reading-dialog h2 em { color: var(--gold); }
.reading-dialog .dialog-lead { color: #b4cac5; font-size: 15px; }
.reading-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.reading-filters button { min-height: 38px; padding: 8px 16px; border-radius: 999px; border: 1px solid #ffffff26; background: #ffffff08; color: #c7d6d2; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.reading-filters button:hover { border-color: #dfbd7680; }
.reading-filters button[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: var(--night); }
.reading-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.reading-card {
  display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 16px; text-decoration: none; color: var(--paper);
  border: 1px solid #ffffff1c; background: linear-gradient(145deg, #ffffff0d, #ffffff02), #0f3540; transition: border-color .25s, transform .25s;
}
.reading-card:hover { border-color: #dfbd7690; transform: translateY(-3px); }
.reading-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.reading-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.reading-meta > span { color: #9bb7b0; }
.reading-card blockquote { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.3; color: #f3efe2; }
.reading-go { margin-top: auto; font-size: 13px; font-weight: 600; color: #c7d6d2; }
.reading-go b { color: var(--gold); font-weight: 400; margin-left: 4px; }
.reading-note { margin-top: 18px; font-size: 13px; color: #9bb7b0; }
@media (max-width: 720px) {
  .reading-card blockquote { font-size: 19px; }
  #voces .section-heading { flex-direction: column; align-items: stretch; }
  .reading-trigger { width: 100%; }
}
@media (hover: none) { .reading-trigger:hover, .reading-card:hover { transform: none; } }