/* Tokens de docs/marca.md. Contraste verificado contra WCAG AA. */
:root {
  --negro-azulado: #12161D;
  --naranja: #FF6B2C;
  --naranja-texto: #B84412;
  --blanco-roto: #F4F1EC;
  --gris-azulado: #5A6270;
  --gris-claro: #96A0B0;
  --borde: #8A8378;
  --borde-suave: #DCD6CC;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ancho: 46rem;
  --paso: 1.5rem;
  --radio: 10px;
  --sombra: 0 10px 30px rgba(18, 22, 29, 0.16), 0 2px 6px rgba(18, 22, 29, 0.1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Ningun hijo puede ensanchar el documento y provocar scroll lateral */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--blanco-roto);
  color: var(--negro-azulado);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--negro-azulado);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--naranja-texto); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--negro-azulado); }

img { max-width: 100%; height: auto; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--paso); }

/* Cabecera ------------------------------------------------------------- */
.cabecera { border-bottom: 1px solid var(--borde-suave); padding: 1rem 0; }
.cabecera__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--paso);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
}
.cabecera__marca {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--negro-azulado);
  text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.125rem; font-size: 0.9375rem; }
.nav a { color: var(--gris-azulado); text-decoration: none; }
.nav a:hover { color: var(--naranja-texto); }

/* Portada -------------------------------------------------------------- */
.hero { padding: 3rem 0 2rem; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: 2.5rem;
  align-items: center;
}
.hero h1 { font-size: clamp(1.875rem, 6vw, 2.75rem); margin: 0 0 0.75rem; }
.hero p { color: var(--gris-azulado); margin: 0 0 1.5rem; font-size: 1.0625rem; }

.hero__portada {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: block;
}

.boton {
  display: inline-block;
  padding: 0.8125rem 1.5rem;
  background: var(--naranja);
  color: var(--negro-azulado);
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
}
.boton:hover { background: var(--naranja-texto); color: var(--blanco-roto); }

/* Etiquetas de formato -------------------------------------------------- */
.etiqueta {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--borde-suave);
  background: #fff;
  color: var(--gris-azulado);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etiqueta--video {
  border-color: var(--naranja);
  background: var(--naranja);
  color: var(--negro-azulado);
}
.entrada__etiquetas { margin: 0 0 1.25rem; }
.entrada__etiquetas .etiqueta { margin-left: 0; margin-right: 0.375rem; }

/* Listado de episodios ------------------------------------------------- */
.episodios { list-style: none; margin: 0; padding: 0; }
.episodio { padding: 1.75rem 0; border-top: 1px solid var(--borde-suave); }
.episodio__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: var(--gris-azulado);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.episodio__titulo { font-size: 1.3125rem; margin: 0 0 0.5rem; }
.episodio__titulo a { color: var(--negro-azulado); text-decoration: none; }
.episodio__titulo a:hover { color: var(--naranja-texto); }
.episodio__resumen { color: var(--gris-azulado); margin: 0 0 1rem; font-size: 0.9375rem; }


.ver-todos { padding: 1.5rem 0 0; }

/* Episodio ------------------------------------------------------------- */
/* Solo vertical: la taquigrafia 'padding' pisaria el lateral de
   .contenedor, que va en el mismo elemento. Era la causa de que en
   movil el texto saliera pegado al borde y la imagen desbordara. */
.entrada { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.entrada h1 { font-size: clamp(1.625rem, 5.5vw, 2.25rem); margin: 0 0 0.75rem; }
.entrada__intro { color: var(--gris-azulado); margin: 0 0 1rem; }
.entrada__cuerpo p { margin: 0 0 1rem; }
.entrada__cuerpo strong, .entrada__cuerpo b { color: var(--negro-azulado); }

.episodio__arte {
  display: block;
  width: 100%;
  max-width: 18rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin: 0 0 1.75rem;
}

.entrada__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde-suave);
  font-size: 0.9375rem;
}
/* Debajo de la navegacion entre episodios, que es la que manda: sin borde
   propio y mas discreto. */
.entrada__pie--secundario {
  margin-top: 1.25rem;
  padding-top: 0;
  border-top: 0;
  font-size: 0.875rem;
}
.entrada__pie--secundario a { color: var(--gris-azulado); }
.entrada__pie--secundario a:hover { color: var(--naranja-texto); }

/* Ver en video ----------------------------------------------------------
   Fachada: miniatura propia y boton de play. El iframe de YouTube solo
   aparece cuando el visitante pulsa, y lo mete video.js. */
/* Sin margen arriba: el reproductor de audio ya deja 2rem por debajo. */
.ver-video { margin: 0 0 2rem; }
.ver-video__titulo { font-size: 1.125rem; margin: 0 0 0.75rem; }
.ver-video__nota {
  margin: 0.625rem 0 0;
  color: var(--gris-azulado);
  font-size: 0.8125rem;
}

.video-fachada {
  display: block;
  position: relative;
  /* 16:9 fluido: la caja manda sobre la imagen, asi que da igual lo que mida
     la miniatura que devuelva YouTube. */
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--negro-azulado);
  box-shadow: var(--sombra);
}
.video-fachada__miniatura {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-fachada__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  /* Relleno naranja con el triangulo en negro azulado: 6.38:1. El naranja con
     blanco encima se queda en 2.84:1 y no pasa AA. */
  background: var(--naranja);
  color: var(--negro-azulado);
  box-shadow: 0 6px 20px rgba(18, 22, 29, 0.45);
  transition: transform .15s ease;
}
.video-fachada__play svg {
  width: 1.875rem;
  height: 1.875rem;
  /* El triangulo tira a la derecha; se recentra a ojo. */
  margin-left: 0.1875rem;
  fill: currentColor;
  display: block;
}
.video-fachada:hover .video-fachada__play,
.video-fachada:focus-visible .video-fachada__play { transform: translate(-50%, -50%) scale(1.08); }

/* Ya con el iframe dentro. La advertencia sobraba: el reproductor ya esta
   cargado, avisar de que se va a cargar despista. */
.video-fachada--cargado { background: #000; }
.video-fachada--cargado + .ver-video__nota { display: none; }
.video-fachada__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Anterior y siguiente -------------------------------------------------- */
.entre-episodios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde-suave);
}
.entre-episodios__enlace {
  flex: 1 1 14rem;
  /* Sin par al otro lado (episodios 1 y 47) no se deja el hueco: el unico
     que hay ocupa su mitad y se alinea a su lado. */
  max-width: 100%;
  min-width: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.entre-episodios__enlace:hover {
  border-color: var(--naranja);
  box-shadow: var(--sombra);
}
.entre-episodios__enlace--siguiente { margin-left: auto; text-align: right; }
.entre-episodios__rotulo {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--naranja-texto);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.entre-episodios__titulo {
  display: block;
  color: var(--negro-azulado);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.entre-episodios__enlace:hover .entre-episodios__titulo { color: var(--naranja-texto); }

@media (prefers-reduced-motion: reduce) {
  .entre-episodios__enlace, .video-fachada__play { transition: none; }
  .video-fachada:hover .video-fachada__play,
  .video-fachada:focus-visible .video-fachada__play { transform: translate(-50%, -50%); }
}

/* Tarjetas de plataforma ------------------------------------------------ */
.plataformas {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.875rem;
}
.plataformas a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  background: #fff;
  color: var(--negro-azulado);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.plataformas a:hover {
  border-color: var(--naranja);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}
.plataformas__logo {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--naranja-texto);
}
.plataformas__logo svg { width: 100%; height: 100%; display: block; }
.plataformas__nombre { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }

@media (prefers-reduced-motion: reduce) {
  .plataformas a { transition: none; }
  .plataformas a:hover { transform: none; }
}

.aviso-rss {
  margin-top: 2rem;
  padding: 1.25rem;
  background: var(--negro-azulado);
  border-left: 4px solid var(--naranja);
  border-radius: var(--radio);
  color: var(--gris-claro);
  font-size: 0.9375rem;
}
.aviso-rss p { margin: 0 0 0.5rem; }
.aviso-rss code { color: #fff; word-break: break-all; font-size: 0.875rem; }

/* Pie ------------------------------------------------------------------ */
.pie {
  margin-top: 3rem;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--borde-suave);
  color: var(--gris-azulado);
  font-size: 0.875rem;
}
.pie p { margin: 0; }
.pie a { color: var(--gris-azulado); }
.pie__continuidad { margin-top: 0.5rem; }

/* Movil ----------------------------------------------------------------- */
@media (max-width: 46rem) {
  :root { --paso: 1rem; }

  body { font-size: 1rem; }

  .hero { padding: 1.75rem 0 1.25rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  /* La portada va primero y contenida: a pantalla completa domina demasiado */
  .hero__portada { order: -1; max-width: 10rem; }
  .hero__texto { min-width: 0; }
  .boton { display: block; text-align: center; }

  .cabecera__interior { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .nav { width: 100%; gap: 0.375rem 1rem; font-size: 0.875rem; }

  .entrada { padding-top: 1.75rem; padding-bottom: 1.75rem; }
  .entrada h1 { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }

  .episodio { padding: 1.25rem 0; }
  .episodio__titulo { font-size: 1.0625rem; line-height: 1.3; }
  .episodio__meta { font-size: 0.6875rem; gap: 0.25rem 0.625rem; }

  /* La imagen del episodio ocupa el ancho util y nunca mas */
  .episodio__arte { max-width: 100%; margin-bottom: 1.25rem; }

  /* El boton de play encoge con la caja: a 375 px, uno de 72 px se comia
     media miniatura. */
  .video-fachada__play { width: 3.5rem; height: 3.5rem; }
  .video-fachada__play svg { width: 1.5rem; height: 1.5rem; }

  /* Reproductor: el boton sigue siendo comodo de pulsar con el pulgar */
  .reproductor { gap: 0.875rem; padding: 0.875rem 1rem; border-radius: 12px; }
  .reproductor__play { width: 3.5rem; height: 3.5rem; }
  .reproductor__icono { width: 1.5rem; height: 1.5rem; }
  .reproductor__tiempos { font-size: 0.75rem; }

  .entrada__pie { flex-direction: column; gap: 0.625rem; }

  /* Apilados y los dos alineados igual: en columna, el siguiente pegado a la
     derecha se leia como un error de maquetacion. */
  .entre-episodios { flex-direction: column; }
  .entre-episodios__enlace--siguiente { margin-left: 0; text-align: left; }

  .plataformas { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .plataformas a { padding: 0.875rem; }
  .plataformas__logo { width: 1.5rem; height: 1.5rem; }
  .plataformas__nombre { font-size: 0.875rem; }

  .aviso-rss { padding: 1rem; }
}

@media (max-width: 26rem) {
  .plataformas { grid-template-columns: 1fr; }
}

/* Reproductor ----------------------------------------------------------
   El <audio controls> nativo no deja estilar el boton de play (shadow DOM),
   asi que se monta uno propio. Sin JS, reproductor.js no arranca y el
   partial deja el <audio> visible con sus controles de siempre. */
.reproductor {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--negro-azulado);
  border-radius: 14px;
  box-shadow: var(--sombra);
}
.reproductor audio { width: 100%; }
.reproductor--listo audio { display: none; }

/* Hasta que el JS no monta, se esconden los controles propios para no
   mostrar dos reproductores a la vez */
.reproductor:not(.reproductor--listo) .reproductor__play,
.reproductor:not(.reproductor--listo) .reproductor__barra { display: none; }

.reproductor__play {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  border: 0;
  border-radius: 50%;
  background: var(--naranja);
  color: var(--negro-azulado);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .12s ease, background .12s ease;
}
.reproductor__play:hover { background: #FF8348; }
.reproductor__play:active { transform: scale(0.94); }
.reproductor__play:focus-visible {
  outline: 3px solid var(--blanco-roto);
  outline-offset: 3px;
}

.reproductor__icono { width: 1.75rem; height: 1.75rem; fill: currentColor; }
/* El icono de play se desplaza un pelo: un triangulo centrado geometricamente
   se ve descentrado */
.reproductor__icono--play { margin-left: 3px; }
.reproductor__icono--pausa { display: none; }
.reproductor--sonando .reproductor__icono--play { display: none; }
.reproductor--sonando .reproductor__icono--pausa { display: block; }

.reproductor__barra { flex: 1 1 auto; min-width: 0; }

.reproductor__progreso {
  --avance: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.reproductor__progreso::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--naranja) 0 var(--avance), rgba(244, 241, 236, 0.25) var(--avance) 100%);
}
.reproductor__progreso::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(244, 241, 236, 0.25);
}
.reproductor__progreso::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--naranja);
}
.reproductor__progreso::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: var(--blanco-roto);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.reproductor__progreso::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--blanco-roto);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.reproductor__progreso:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; }

.reproductor__tiempos {
  display: flex;
  justify-content: space-between;
  margin-top: 0.125rem;
  color: var(--gris-claro);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.episodio__etiquetas { margin: 0 0 0.5rem; }
.episodio__etiquetas .etiqueta { margin-left: 0; margin-right: 0.375rem; }
.episodio__escuchar { font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.episodio__escuchar:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .reproductor__play { transition: none; }
  .reproductor__play:active { transform: none; }
}