/* Estilos del sitio Laboratorio de Psicología.

   Colores (tabla 6.2 del brief). Reglas de uso:
   - Texto: --texto, --cafe, --azul-oscuro; blanco solo sobre --azul-oscuro.
   - --azul-medio, --azul-claro y --dorado: nunca como color de texto; solo fondos, líneas y acentos.
   Las pruebas (tests/test_contraste.py y tests/test_estilos.py) verifican estas reglas. */

/* ---------- Fuente: Figtree, autoalojada (licencia OFL en /licencias.txt) ---------- */

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --texto: #1f2d3a;
  --cafe: #5f4c27;
  --azul-oscuro: #4c738f;
  --azul-medio: #5790ab;
  --azul-claro: #60a5c0;
  --dorado: #b89854;
  --beige: #ddd0b3;
  --blanco: #ffffff;

  --fuente: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-titulo: 500;
  --peso-fuerte: 700;
  --espaciado: 0.14em; /* mayúsculas espaciadas, como el logotipo */

  /* Escala tipográfica: pocos tamaños, cada uno con un papel (valores de computadora). */
  --tam-titulo-tarjeta: 1.2rem; /* títulos de recientes, nombres de temas, título del último episodio */
  --tam-secundario: 0.85rem;    /* invitados, número de episodios, línea de datos */
  --tam-normal: 1rem;           /* párrafos */

  --ancho-texto: 70ch;
  --ancho-pagina: 72rem;
  --margen-lateral: clamp(1rem, 4vw, 2rem);
}

/* ---------- Base ---------- */

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

html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
}

/* En celular, la escala toma exactamente los tamaños que ya tenía el sitio ahí. */
@media (max-width: 47.99rem) {
  :root {
    --tam-titulo-tarjeta: 1rem;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente);
  font-size: var(--tam-normal);
  line-height: 1.6;
  color: var(--texto);
  background: var(--blanco);
}

main {
  flex: 1;
}

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

/* Lo que el filtro del archivo oculta debe ocultarse aunque su clase defina otro display. */
[hidden] {
  display: none !important;
}

/* Texto que no se ve pero sí leen los lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a {
  color: var(--azul-oscuro);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--texto);
}

:focus-visible {
  outline: 3px solid var(--azul-oscuro);
  outline-offset: 3px;
  border-radius: 2px;
}

h1 {
  max-width: 22ch;
  margin: 0 0 1rem;
  font-size: clamp(1.85rem, 2.6vw + 1rem, 2.6rem);
  font-weight: var(--peso-titulo);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance; /* renglones parejos: que no quede "de lo" suelto al final */
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-pagina);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.saltar {
  position: absolute;
  left: var(--margen-lateral);
  top: -10rem;
  z-index: 30;
  padding: 0.5rem 1rem;
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.saltar:focus {
  top: 0.5rem;
}

/* ---------- Mayúsculas espaciadas: solo en el menú y en las etiquetas ---------- */

.menu a:not(.boton),
.etiqueta {
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado);
  text-transform: uppercase;
}

/* ---------- Encabezado y menú ---------- */

.encabezado__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  --relleno-encabezado: 1.1rem;
  padding-block: var(--relleno-encabezado);
}

.encabezado__logo img {
  width: auto;
  height: clamp(3.4rem, 5vw + 1rem, 4.4rem);
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a:not(.boton) {
  display: inline-block;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  font-size: 0.78rem;
  text-decoration: none;
}

.menu a:not(.boton):hover {
  border-bottom-color: var(--dorado);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-block;
  padding: 0.7em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.boton--menu {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.boton--menu:hover {
  background: var(--texto);
  color: var(--blanco);
}

.boton--beige {
  background: var(--beige);
  color: var(--texto);
}

.boton--beige:hover {
  background: var(--blanco);
  color: var(--texto);
}

/* ---------- Etiquetas (mayúsculas espaciadas) ---------- */

.etiqueta {
  display: inline-block;
  padding: 0.35em 0.9em 0.3em;
  font-size: 0.72rem;
  line-height: 1.3;
}

.etiqueta--azul {
  padding-inline: 1.4em;
  background: var(--azul-oscuro);
  color: var(--blanco);
}

/* ---------- Títulos de sección ---------- */

/* Peso 600: con trazos más delgados el azul oscuro se ve más claro de lo que es. */
.titulo-seccion {
  margin: 0 0 1.75rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--azul-oscuro);
}

/* ---------- Episodio ---------- */

.episodio__portada {
  width: 100%;
  border-radius: 0.5rem;
}

/* Tarjetas clicables completas (recientes, archivo, temas e invitados): un solo enlace por
   tarjeta, cuya área se extiende a toda ella, portada incluida. Es la misma técnica que la
   tarjeta del último episodio. */
.tarjeta-clicable {
  position: relative;
}

.tarjeta-clicable__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* El foco se marca alrededor de toda la tarjeta, no solo del enlace. El contorno del enlace solo
   se quita en navegadores que entienden :has(); en los demás, el enlace conserva el suyo y el
   foco nunca queda invisible. Lo mismo en la tarjeta del último episodio y en el video. */
@supports selector(:has(*)) {
  .tarjeta-clicable__enlace:focus-visible {
    outline: none;
  }
}

/* Si la tarjeta tiene más enlaces (una persona con varios episodios en /invitados), quedan por
   encima del área del enlace principal y cada uno lleva a su propio episodio. */
.tarjeta-clicable__otro {
  position: relative;
  z-index: 1;
}

.tarjeta-clicable:has(.tarjeta-clicable__enlace:focus-visible) {
  outline: 3px solid var(--azul-oscuro);
  outline-offset: 3px;
}

/* Subrayado al pasar el cursor por cualquier parte de la tarjeta, solo en dispositivos con
   cursor: en pantallas táctiles ese estado se activa al tocar y puede quedarse pegado. */
@media (hover: hover) {
  .tarjeta-clicable:hover .tarjeta-clicable__enlace {
    text-decoration: underline;
  }
}

.enlace-flecha {
  display: inline-block;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--dorado);
  font-size: 0.95rem;
  font-weight: var(--peso-fuerte);
  text-decoration: none;
}

.enlace-flecha::after {
  content: " →" / "";
}

/* ---------- Ejes temáticos ---------- */

.ejes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eje a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  color: var(--texto);
  text-decoration: none;
}

.eje__nombre {
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.3;
}

.eje__cuenta {
  font-size: var(--tam-secundario);
  font-weight: 600;
  color: var(--cafe);
}

/* ---------- Cómo hacemos este podcast ---------- */

.como {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.como__titulo {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: var(--peso-fuerte);
  line-height: 1.3;
}

.como p {
  margin: 0;
  max-width: var(--ancho-texto);
}

.como-seccion__mas {
  margin: 2.5rem 0 0;
}

/* ---------- Pie ---------- */

.pie ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie li + li {
  margin-top: 0.35rem;
}

.pie__titulo {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: var(--peso-fuerte);
}

.pie__columnas {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3.5rem;
}

.pie__leyenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: 0.85rem;
}

.pie__leyenda p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================== */

/* ---------- Encabezado ---------- */

.encabezado {
  --alto-logo: clamp(3.4rem, 5vw + 1rem, 4.4rem);
  background: var(--blanco);
}

.encabezado__logo img {
  height: var(--alto-logo);
}

/* Menú en proporción al logo: sus mayúsculas miden lo mismo que las de "DE" en el
   logotipo (15.1 % del alto del logo). La mayúscula de Figtree mide 0.724 del tamaño
   de letra; de ahí la división. Espaciado entre letras cercano al del logo. */
.menu ul {
  gap: 0.5rem clamp(1.25rem, 2.5vw, 2.25rem);
}

.menu a:not(.boton) {
  color: var(--azul-oscuro);
  font-size: calc(var(--alto-logo) * 0.151 / 0.724);
  letter-spacing: 0.08em;
}

/* Línea dorada delgada solo bajo la sección actual y al pasar el cursor. */
.menu a:not(.boton):hover,
.menu a[aria-current="page"] {
  border-bottom-color: var(--dorado);
  text-decoration: none;
}

/* En un episodio o un tema, la misma línea marca la sección "Episodios" a la que pertenecen. */
.menu a[aria-current="true"] {
  border-bottom-color: var(--dorado);
}

.menu-movil {
  display: none;
}

/* Hasta 1083 px (celular, tableta y computadoras angostas): una sola línea con el logo y el
   botón "Menú". Desde 1084 px el menú completo y el botón de suscripción caben junto al logo
   en todas las páginas; más angosto, bajarían a un segundo renglón. En las condiciones de
   ancho (@media), 1 rem vale siempre 16 px aunque la letra base sea de 18 px: 67.7 rem = 1083.2 px. */
@media (max-width: 67.7rem) {
  .menu {
    display: none;
  }

  /* El menú desplegado ocupa su propio renglón debajo del logo, dentro de la página: empuja el
     contenido hacia abajo en lugar de taparlo. Así, al seguir con Tab después de la última
     opción, lo que recibe el foco nunca queda oculto detrás del menú (WCAG 2.4.11, decisión
     de Juan en la etapa 8). Cerrado no ocupa espacio. */
  .menu-movil {
    display: block;
    flex-basis: 100%;
  }

  .encabezado__fila {
    position: relative; /* referencia para el botón "Menú" */
    row-gap: 0;
  }

  /* Botón discreto: contorno delgado y letras chicas, sin bajar de 24 px de alto para el dedo.
     Va a la derecha del logo, centrado con él, aunque el menú desplegado esté en otro renglón. */
  .menu-movil__boton {
    position: absolute;
    top: calc(var(--relleno-encabezado) + var(--alto-logo) / 2);
    right: var(--margen-lateral);
    transform: translateY(-50%);
    display: block;
    min-height: 24px;
    padding: 0.5em 0.9em;
    border: 1px solid var(--azul-oscuro);
    border-radius: 999px;
    color: var(--azul-oscuro);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    list-style: none; /* quita el triángulo de <summary> */
    cursor: pointer;
  }

  .menu-movil__boton::-webkit-details-marker {
    display: none;
  }

  .menu-movil[open] .menu-movil__boton {
    background: var(--azul-oscuro);
    color: var(--blanco);
  }

  /* De orilla a orilla de la pantalla, empezando donde termina el encabezado (los márgenes
     compensan el relleno del renglón del logo). */
  .menu-movil nav {
    margin: var(--relleno-encabezado) calc(-1 * var(--margen-lateral)) calc(-1 * var(--relleno-encabezado));
    border-top: 1px solid var(--beige);
    border-bottom: 1px solid var(--beige);
  }

  .menu-movil ul {
    margin: 0;
    padding: 0.25rem var(--margen-lateral) 0.25rem;
    list-style: none;
  }

  .menu-movil a {
    display: block;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--beige);
    color: var(--azul-oscuro);
    font-size: 0.85rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .menu-movil li:last-child a {
    border-bottom: 0;
  }

  /* "Suscríbete en YouTube" como una opción más, debajo de las secciones y separada por una
     línea delgada: mismo tamaño de letra, sin fondo, con el ícono pequeño (20 px de alto,
     el mínimo de las guías de YouTube) en casi negro sobre el fondo blanco. */
  .menu-movil__suscripcion {
    margin: 0 var(--margen-lateral);
    padding-block: 0.25rem 0.5rem;
    border-top: 1px solid var(--azul-claro);
  }

  .menu-movil .menu-movil__suscripcion a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 0;
  }

  .menu-movil a[aria-current="page"],
  .menu-movil a[aria-current="true"] {
    text-decoration: underline;
    text-decoration-color: var(--dorado);
    text-decoration-thickness: 2px;
  }
}

/* En celular: encabezado más bajo; el logo es lo primero que se ve, lo más grande que cabe
   junto al botón "Menú". */
@media (max-width: 47.99rem) {
  .encabezado__fila {
    /* También las usan el botón "Menú" (para centrarse con el logo) y el menú desplegado. */
    --relleno-encabezado: 0.7rem;
    --alto-logo: clamp(2.8rem, 15vw, 3.6rem);
  }
}

/* ---------- Franjas de color ---------- */

/* Dos franjas de color (azul o beige, de lado a lado) nunca se tocan, en ninguna página ni
   ancho de pantalla: la que va arriba deja espacio en blanco debajo. Esto incluye la última
   franja de la página, que si no quedaría pegada al pie. Cada franja lleva la clase "franja".
   Una franja oculta (por ejemplo, la de suscripción en computadora) no ocupa ese espacio. */
.franja:has(+ .franja),
main > .franja:last-child {
  margin-bottom: 2.5rem;
}

/* ---------- Franja azul oscuro (portada y pie) ---------- */

.banda {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

/* Enlaces de texto que van directo sobre el azul. Los botones y la tarjeta blanca
   del episodio conservan sus propios colores. */
.portada__otras a,
.portada__otras a:hover,
.suscripcion__otras a,
.suscripcion__otras a:hover,
.pie a,
.pie a:hover {
  color: var(--blanco);
}

.banda :focus-visible {
  outline-color: var(--blanco);
}

/* ---------- Portada: texto a la izquierda, último episodio a la derecha ---------- */

.portada {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.portada__rejilla {
  display: grid;
  gap: 2rem 4rem;
  align-items: center;
}

/* Dos columnas solo si hay tarjeta del último episodio y cabe en horizontal con su portada de
   280 px; en pantallas más angostas la tarjeta va debajo del texto para no apretarla. */
@media (min-width: 70rem) {
  .portada__rejilla--con-episodio {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Etiqueta de frecuencia: contorno dorado sobre el azul oscuro, arriba del título. */
.etiqueta--frecuencia {
  margin: 0 0 1.5rem;
  padding: 0.45em 1.1em 0.4em;
  border: 2px solid var(--dorado);
  color: var(--blanco);
}

.portada__descriptor {
  max-width: 48ch;
  margin: 0 0 1.5rem;
  font-size: 1.05rem;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.boton--contorno {
  border-color: var(--blanco);
  color: var(--blanco);
}

/* Al pasar el cursor se oscurece en lugar de volverse blanco: el logo de Spotify va en blanco
   y sobre fondo blanco desaparecería. */
.boton--contorno:hover {
  background: var(--texto);
  color: var(--blanco);
}

/* Logo de la plataforma dentro del botón. Tamaños mínimos de las guías de marca:
   ícono de YouTube de 20 px de alto, ícono de Spotify de 21 px. La separación con el
   texto (13.5 px) supera el espacio libre que piden ambas (triángulo de YouTube y
   media altura del ícono de Spotify). */
.boton--marca {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.icono-marca {
  flex: none;
  display: block;
}

.icono-marca--youtube {
  height: 20px;
  aspect-ratio: 24 / 16.91;
}

.icono-marca--spotify {
  width: 21px;
  height: 21px;
}

.portada__otras {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
}

/* Qué se ve en cada tamaño de pantalla. */
@media (max-width: 47.99rem) {
  .solo-escritorio {
    display: none;
  }
}

@media (min-width: 48rem) {
  .solo-movil {
    display: none;
  }
}

/* ---------- Tarjeta blanca del último episodio (horizontal) ---------- */

/* Portada a la izquierda; etiqueta y texto a la derecha, centrados verticalmente con ella.
   Toda la tarjeta es clicable: el área del enlace del título se extiende a la tarjeta. */
.tarjeta-ultimo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 38rem;
  padding: 1.25rem;
  border-radius: 0.5rem;
  background: var(--blanco);
  color: var(--texto);
}

/* Unos 280 px en computadora: la portada más grande de la página. */
.tarjeta-ultimo__portada {
  flex: none;
  width: 15.5rem;
  border-radius: 0.35rem;
}

.tarjeta-ultimo__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.tarjeta-ultimo__texto p {
  margin: 0;
}

.tarjeta-ultimo__etiqueta {
  margin: 0 0 0.25rem;
}

.tarjeta-ultimo__datos {
  font-size: var(--tam-secundario);
  color: var(--cafe);
}

.tarjeta-ultimo__titulo {
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.25;
}

.tarjeta-ultimo__titulo a {
  color: var(--texto);
  text-decoration: none;
}

/* Subrayado al pasar el cursor, solo en dispositivos con cursor: en pantallas táctiles
   ese estado se activa al tocar y puede quedarse pegado. */
@media (hover: hover) {
  .tarjeta-ultimo:hover .tarjeta-ultimo__titulo a {
    text-decoration: underline;
  }
}

.tarjeta-ultimo__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
}

/* El foco se marca alrededor de toda la tarjeta, no solo del título (solo con :has(), ver arriba). */
@supports selector(:has(*)) {
  .tarjeta-ultimo__titulo a:focus-visible {
    outline: none;
  }
}

.tarjeta-ultimo:has(a:focus-visible) {
  outline: 3px solid var(--blanco);
  outline-offset: 3px;
}

.tarjeta-ultimo__invitado {
  font-size: var(--tam-secundario);
  font-weight: 400;
  color: var(--texto);
}

.tarjeta-ultimo__ver {
  margin-top: 0.35rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--dorado);
  color: var(--azul-oscuro);
  font-size: 0.95rem;
  font-weight: var(--peso-fuerte);
}

.tarjeta-ultimo__ver::after {
  content: " →";
}

/* ---------- Presentación en celular ---------- */

/* Más compacta: menos espacio entre bloques y un descriptor más chico para que el título domine.
   Solo texto y tarjeta: los botones van en su propia franja después de los recientes. */
@media (max-width: 47.99rem) {
  .portada {
    padding-block: 1rem 1.25rem;
  }

  /* Agrupación por proximidad: etiqueta, título y descriptor juntos; más aire antes de la tarjeta. */
  .portada__rejilla {
    gap: 1.75rem;
  }

  /* Etiqueta más compacta para que no ocupe todo el ancho. */
  .etiqueta--frecuencia {
    margin-bottom: 0.45rem;
    padding-inline: 0.8em;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }

  .portada h1 {
    margin-bottom: 0.25rem;
    font-size: 1.7rem;
  }

  .portada__descriptor {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Botón más compacto: letra más chica y menos alto, sin bajar de 44 px de zona tocable. */
  .portada .boton {
    min-height: 44px;
    padding: 0.35em 1.1em;
    font-size: 0.88rem;
  }

  /* Tarjeta compacta: portada pequeña y textos un poco más chicos para no opacarla. */
  .tarjeta-ultimo {
    gap: 0.9rem;
    max-width: none;
    padding: 0.75rem;
  }

  .tarjeta-ultimo__portada {
    width: 5.5rem;
  }

  .tarjeta-ultimo__texto {
    gap: 0.15rem;
  }

  .tarjeta-ultimo__etiqueta {
    margin-bottom: 0.2rem;
    font-size: 0.6rem;
  }

  /* Sin la línea de datos ni "Ver episodio": la tarjeta se queda compacta. */
  .tarjeta-ultimo__datos,
  .tarjeta-ultimo__ver {
    display: none;
  }

  /* Excepción de celular (tamaño previo a la escala): la tarjeta compacta usa un título
     un poco menor para no opacar la portada pequeña. */
  .tarjeta-ultimo__titulo {
    font-size: 0.92rem;
    line-height: 1.3;
  }

  .tarjeta-ultimo__invitado {
    line-height: 1.3;
  }
}

/* En pantallas muy angostas, portada un poco más chica y etiqueta más compacta
   para que "Último episodio" quepa en un renglón. */
@media (max-width: 22.5rem) {
  .tarjeta-ultimo__portada {
    width: 4.5rem;
  }

  .tarjeta-ultimo__etiqueta {
    padding-inline: 0.6em;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
}

/* ---------- Episodios recientes ---------- */

/* Computadora: cuatro columnas iguales; cada portada llena su columna y el título y el
   invitado ocupan exactamente ese mismo ancho. Ninguna supera los 280 px de la portada del
   último episodio (con el contenedor al máximo, miden lo mismo). En celular la jerarquía la
   dan la posición, la tarjeta blanca y la etiqueta. */
.recientes__lista {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .recientes__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tableta y celular: una fila que se desliza de lado y deja asomar la siguiente tarjeta. */
@media (max-width: 63.99rem) {
  .recientes__lista {
    grid-auto-flow: column;
    grid-auto-columns: 9.5rem;
    gap: 1rem;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--margen-lateral));
    padding: 0.5rem var(--margen-lateral) 0.75rem; /* arriba: deja ver el contorno de foco */
    scroll-padding-inline: var(--margen-lateral);
    scroll-snap-type: x mandatory;
  }

  .reciente {
    scroll-snap-align: start;
  }
}

/* Celular: tarjetas de unos 135 px; a 390 px se ven dos y media. */
@media (max-width: 47.99rem) {
  .recientes__lista {
    grid-auto-columns: 7.5rem;
    gap: 0.75rem;
  }
}

.reciente .episodio__portada {
  margin-bottom: 0.75rem;
}

.reciente p {
  margin: 0;
}

.reciente__numero {
  font-size: 0.8rem;
  font-weight: var(--peso-fuerte);
  color: var(--cafe);
}

/* Título al tamaño del texto normal e invitado sin negrita, como en la tarjeta del último episodio. */
.reciente__titulo {
  margin: 0.15rem 0 0.35rem;
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.35;
}

.reciente__titulo a {
  color: var(--texto);
  text-decoration: none;
}

.reciente__invitado {
  font-size: var(--tam-secundario);
  font-weight: 400;
  line-height: 1.4;
}

.reciente__institucion {
  font-size: 0.8rem;
  color: var(--cafe);
}

.recientes__todos {
  margin: 2rem 0 0;
}

/* ---------- Franja de suscripción (solo celular) ---------- */

/* Espacio en blanco debajo para que no quede pegada a la sección beige de temas. */
.suscripcion {
  padding-block: 2.25rem;
}

.suscripcion__contenido {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  text-align: center;
}

.suscripcion__frase {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--peso-titulo);
  line-height: 1.3;
}

.suscripcion .boton {
  display: flex;
  justify-content: center;
  min-height: 44px;
  padding: 0.35em 1.1em;
  font-size: 0.88rem;
}

.suscripcion__otras {
  margin: 0;
  font-size: 0.78rem;
}

/* ---------- Temas ---------- */

.temas {
  background: var(--beige);
}

/* Sobre beige, el título de sección va en color de texto (9.2:1) para distinguirse bien;
   los demás títulos de sección siguen en azul oscuro. */
.temas .titulo-seccion {
  color: var(--texto);
}

.titulo-seccion::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 0.7rem;
  background: var(--dorado);
}

/* Todas las tarjetas con la misma línea superior: mismo grosor en px enteros y misma altura por fila. */
.ejes {
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 40rem) {
  .ejes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .ejes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.eje a {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  border-top: 4px solid var(--azul-claro);
  border-radius: 0 0 0.35rem 0.35rem;
  background: var(--blanco);
}

.eje__texto {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.eje a:hover {
  border-top-color: var(--azul-oscuro);
}

.icono-eje {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--azul-oscuro);
}

/* Solo en computadora: nombre del tema más grande (peso medio), ícono más grande y más
   espacio vertical dentro de cada tarjeta. Mismas tres columnas. */
@media (min-width: 64rem) {
  .eje a {
    gap: 1.25rem;
    padding-block: 1.6rem;
  }

  .eje__nombre {
    font-weight: var(--peso-titulo);
  }

  .icono-eje {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ---------- Cómo hacemos ---------- */

.como__punto {
  padding-top: 1rem;
  border-top: 2px solid var(--azul-claro);
}

/* ---------- Pie: franja con el símbolo ---------- */

.pie {
  padding-block: 3rem 1.5rem;
}

/* Bloque de marca a la izquierda y columnas de enlaces repartidas en el resto del ancho.
   Si no cabe todo en una fila (tableta), las columnas bajan debajo de la marca. */
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.5rem 4rem;
}

.pie__marca {
  flex: 0 1 19rem;
}

.pie__logo {
  width: auto;
  height: 4rem;
}

.pie__lema {
  margin: 1rem 0 0.35rem;
  font-size: 1.15rem;
  font-weight: var(--peso-titulo);
  line-height: 1.3;
  text-wrap: balance; /* que no quede "somos" solo en el segundo renglón */
}

.pie__frecuencia {
  margin: 0;
  font-size: 0.9rem;
}

.pie__columnas {
  flex: 1 1 30rem;
  justify-content: space-between;
}

.pie__leyenda {
  border-top: 1px solid var(--azul-claro);
}

.sin-corte {
  white-space: nowrap;
}

/* En celular: composición centrada, símbolo más chico y cada grupo de enlaces en un renglón.
   En computadora sigue en columnas. */
@media (max-width: 47.99rem) {
  .pie {
    padding-block: 2.5rem 1.5rem;
    text-align: center;
  }

  .pie__fila {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }

  .pie__logo {
    height: 3rem;
  }

  .pie__columnas {
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
  }

  /* Los títulos de grupo se ocultan a la vista pero los siguen leyendo los lectores de pantalla. */
  .pie__titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pie__columna ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1.25rem;
  }

  .pie li + li {
    margin-top: 0;
  }

  .pie__marca {
    flex: none;
  }

  .pie__columnas {
    flex: none;
  }

  .pie__leyenda {
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    font-size: 0.8rem;
  }
}

/* =================================================================== */

/* ---------- Páginas interiores: archivo, episodio, temas e invitados ---------- */

.seccion--pagina {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

.titulo-pagina {
  max-width: 32ch;
  margin: 0 0 1.5rem;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.4rem);
}

/* Botones sobre fondo blanco: relleno azul oscuro (con logo blanco) o contorno azul oscuro. */
.boton--azul {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.boton--azul:hover {
  background: var(--texto);
  color: var(--blanco);
}

.boton--contorno-azul {
  border-color: var(--azul-oscuro);
  color: var(--azul-oscuro);
}

.boton--contorno-azul:hover {
  background: var(--azul-oscuro);
  color: var(--blanco);
}

/* ---------- Archivo: filtro y buscador ---------- */

.filtro {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 2rem;
}

.filtro__buscador {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 30rem;
}

.filtro__buscador label {
  font-size: var(--tam-secundario);
  font-weight: 600;
}

.filtro__buscador input {
  min-height: 44px;
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--azul-oscuro);
  border-radius: 0.35rem;
  background: var(--blanco);
  color: var(--texto);
  font: inherit;
}

.filtro__ejes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Celular: los temas en una sola fila que se desliza de lado, para que la lista empiece pronto. */
@media (max-width: 47.99rem) {
  .filtro__ejes {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--margen-lateral));
    padding: 0.5rem var(--margen-lateral); /* deja ver el contorno de foco, que la fila recortaría */
    scroll-padding-inline: var(--margen-lateral);
  }

  .filtro__boton {
    flex: none;
  }
}

.filtro__boton {
  min-height: 44px;
  padding: 0.45em 1em;
  border: 2px solid var(--azul-oscuro);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--azul-oscuro);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.filtro__boton:hover {
  border-color: var(--texto);
  color: var(--texto);
}

/* El tema elegido se marca con el relleno, no solo con el color del texto. */
.filtro__boton[aria-pressed="true"] {
  border-color: var(--azul-oscuro);
  background: var(--azul-oscuro);
  color: var(--blanco);
}

.filtro__estado {
  margin: 0;
  font-size: var(--tam-secundario);
  font-weight: 600;
  color: var(--cafe);
}

.filtro__estado:empty {
  display: none;
}

.filtro__vacio {
  margin: 1rem 0 0;
}

/* ---------- Lista de episodios (archivo y temas) ---------- */

.lista-episodios {
  display: grid;
  column-gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .lista-episodios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Portada a la izquierda y texto a la derecha. Toda la tarjeta es clicable (.tarjeta-clicable). */
.tarjeta-episodio__contenido {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  height: 100%;
  padding-block: 1.25rem;
  border-top: 1px solid var(--beige);
}

.tarjeta-episodio__portada {
  flex: none;
  width: 8rem;
  border-radius: 0.35rem;
}

.tarjeta-episodio__texto {
  min-width: 0;
}

.tarjeta-episodio__texto p {
  margin: 0;
}

.tarjeta-episodio__datos {
  font-size: var(--tam-secundario);
  color: var(--cafe);
}

.tarjeta-episodio__titulo {
  margin: 0.2rem 0 0.3rem;
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.3;
}

.tarjeta-episodio__titulo a {
  color: var(--texto);
  text-decoration: none;
}

.tarjeta-episodio__invitado {
  font-size: var(--tam-secundario);
  line-height: 1.4;
}

@media (max-width: 47.99rem) {
  .tarjeta-episodio__contenido {
    gap: 1rem;
  }

  .tarjeta-episodio__portada {
    width: 5.5rem;
  }
}

.grupo-episodios--reflexiones {
  margin-top: 3.5rem;
}

.tema__todos {
  margin: 2.5rem 0 0;
}

/* ---------- Página de tema ---------- */

.tema-cabecera {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.tema-cabecera .icono-eje {
  width: 3.5rem;
  height: 3.5rem;
}

.tema-cabecera .titulo-pagina {
  margin: 0;
}

.tema-cabecera__cuenta {
  margin: 0.25rem 0 0;
  font-size: var(--tam-secundario);
  font-weight: 600;
  color: var(--cafe);
}

/* La frase del tema, debajo de la cabecera y antes de la lista de episodios. */
.tema-cabecera__descripcion {
  max-width: var(--ancho-texto);
  margin: -0.5rem 0 2rem;
}

@media (max-width: 47.99rem) {
  .tema-cabecera {
    gap: 1rem;
  }

  .tema-cabecera .icono-eje {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ---------- Invitados ---------- */

/* Tarjetas horizontales: portada a la izquierda (unos 160 px en computadora, 108 px en celular)
   y a la derecha nombre, institución, semblanza y enlace al episodio. Dos por fila en computadora
   (desde 1024 px, como el archivo de episodios); una en tableta y celular, donde dos columnas
   dejarían muy poco espacio al texto. Toda la tarjeta es clicable (.tarjeta-clicable). */
.invitados {
  display: grid;
  column-gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64rem) {
  .invitados {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.invitado article {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  height: 100%;
  padding-block: 1.5rem;
  border-top: 1px solid var(--beige);
}

.invitado__portada {
  flex: none;
  width: 9rem;
  border-radius: 0.35rem;
}

.invitado__texto {
  min-width: 0;
}

.invitado__texto p {
  margin: 0;
}

.invitado__nombre {
  margin: 0 0 0.2rem;
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.3;
}

.invitado__institucion {
  font-size: var(--tam-secundario);
  font-weight: 600;
  color: var(--cafe);
}

.invitado__texto .invitado__semblanza {
  margin-top: 0.5rem;
  font-size: var(--tam-secundario);
  line-height: 1.5;
}

.invitado__episodios {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--tam-secundario);
  line-height: 1.4;
}

.invitado__episodio + .invitado__episodio {
  margin-top: 0.4rem;
}

.invitado__numero {
  font-weight: var(--peso-fuerte);
}

@media (max-width: 47.99rem) {
  .invitado article {
    gap: 1rem;
    padding-block: 1.25rem;
  }

  .invitado__portada {
    width: 6rem;
  }
}

/* ---------- Página de episodio ---------- */

/* Celular: datos, portada y botones, uno debajo del otro. Computadora: portada a la izquierda
   y, a la derecha, los datos arriba y los botones debajo. */
.episodio-cabecera {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 48rem) {
  .episodio-cabecera--con-portada {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "medio info" "medio plataformas";
    column-gap: 2.5rem;
    align-items: start;
  }

  .episodio-cabecera--con-portada .episodio-cabecera__info {
    grid-area: info;
  }

  .episodio-cabecera--con-portada .episodio-cabecera__medio {
    grid-area: medio;
  }

  .episodio-cabecera--con-portada .episodio-cabecera__plataformas {
    grid-area: plataformas;
  }
}

@media (min-width: 64rem) {
  .episodio-cabecera--con-portada {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    column-gap: 3.5rem;
  }
}

/* Con video: en celular y tableta, datos, video y botones uno debajo del otro. En computadora,
   el video a la izquierda (más ancho que la portada, porque es el elemento principal) y los
   datos y botones a la derecha. */
@media (min-width: 64rem) {
  .episodio-cabecera--con-video {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "medio info" "medio plataformas";
    column-gap: 3rem;
    align-items: start;
  }

  .episodio-cabecera--con-video .episodio-cabecera__info {
    grid-area: info;
  }

  .episodio-cabecera--con-video .episodio-cabecera__medio {
    grid-area: medio;
  }

  .episodio-cabecera--con-video .episodio-cabecera__plataformas {
    grid-area: plataformas;
  }
}

.episodio-cabecera p {
  margin: 0;
}

.episodio-cabecera .titulo-pagina {
  margin: 0.4rem 0 0.75rem;
}

.episodio-cabecera__numero {
  font-size: 0.85rem;
  font-weight: var(--peso-fuerte);
  color: var(--cafe);
}

.episodio-cabecera__invitado {
  font-size: 1.1rem;
}

.episodio-cabecera__institucion {
  font-size: var(--tam-secundario);
  color: var(--cafe);
}

.episodio-cabecera .episodio-cabecera__datos {
  margin-top: 0.75rem;
  font-size: var(--tam-secundario);
  color: var(--cafe);
}

.episodio-cabecera .episodio-cabecera__eje {
  margin-top: 0.75rem;
}

.episodio-cabecera__eje a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--tam-secundario);
  font-weight: 600;
}

.episodio-cabecera__eje .icono-eje {
  width: 1.25rem;
  height: 1.25rem;
}

.episodio-cabecera__portada {
  width: 100%;
  max-width: 18rem;
  border-radius: 0.5rem;
}

@media (min-width: 48rem) {
  .episodio-cabecera__portada {
    max-width: none;
  }
}

/* ---------- Reproductores (video de YouTube y Spotify al hacer clic) ---------- */

/* Ajustes a lite-yt-embed.css (que se publica sin cambios): la portada cuadrada completa,
   centrada sobre azul oscuro, sin recortar; sin la franja oscura del título de YouTube. */
.video {
  max-width: none;
  border-radius: 0.5rem;
  background-color: var(--azul-oscuro);
  background-size: contain;
  background-repeat: no-repeat;
}

.video::before {
  display: none;
}

/* Foco alrededor de todo el video, como en las tarjetas (el botón de reproducir lo cubre).
   Solo con :has(), ver las tarjetas clicables. */
@supports selector(:has(*)) {
  .video .lyt-playbtn:focus-visible {
    outline: none;
  }
}

.video:has(.lyt-playbtn:focus-visible) {
  outline: 3px solid var(--azul-oscuro);
  outline-offset: 3px;
}

.spotify-al-clic {
  margin-top: 1rem;
}

.spotify-al-clic .boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
}

.spotify-al-clic__reproductor {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
}

.episodio-cabecera .episodio-cabecera__disponible {
  margin-bottom: 0.6rem;
  font-size: var(--tam-secundario);
  font-weight: 600;
}

.plataformas-episodio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Zona tocable de al menos 44 px en todos los tamaños. */
.plataformas-episodio .boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Cuerpo: invitado, recursos y descripción en una columna de lectura. */
.episodio-cuerpo {
  display: grid;
  gap: 2.5rem;
  max-width: var(--ancho-texto);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.episodio-cuerpo .titulo-seccion {
  margin-bottom: 1.25rem;
}

.episodio-invitado p {
  margin: 0;
}

.episodio-invitado__nombre {
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.3;
}

.episodio-invitado__institucion {
  font-size: var(--tam-secundario);
  font-weight: 600;
  color: var(--cafe);
}

.episodio-invitado__persona + .episodio-invitado__persona {
  margin-top: 1.25rem;
}

.episodio-invitado .episodio-invitado__semblanza {
  margin-top: 0.5rem;
}

.episodio-invitado .episodio-invitado__todos {
  margin-top: 1.25rem;
}

/* Recursos de ayuda: sobre beige con texto oscuro (9.2:1) y una línea dorada de acento. */
.recursos {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--dorado);
  background: var(--beige);
  color: var(--texto);
}

.recursos p {
  margin: 0;
}

/* Las direcciones largas de las descripciones se parten en lugar de desbordar en celular. */
.descripcion {
  overflow-wrap: anywhere;
}

.descripcion p,
.descripcion ul,
.descripcion ol {
  margin: 0 0 1em;
}

.descripcion > :last-child {
  margin-bottom: 0;
}

/* Anterior y siguiente: al pie, en dos columnas en computadora. */
.navegacion-episodios {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--beige);
}

.navegacion-episodios ul {
  display: grid;
  gap: 1rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .navegacion-episodios ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .navegacion-episodios__siguiente {
    grid-column: 2;
    text-align: right;
  }
}

.navegacion-episodios a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-block: 0.5rem;
  color: var(--texto);
  text-decoration: none;
}

.navegacion-episodios__etiqueta {
  font-size: var(--tam-secundario);
  font-weight: var(--peso-fuerte);
  color: var(--azul-oscuro);
}

.navegacion-episodios__anterior .navegacion-episodios__etiqueta::before {
  content: "← " / "";
}

.navegacion-episodios__siguiente .navegacion-episodios__etiqueta::after {
  content: " →" / "";
}

.navegacion-episodios__titulo {
  line-height: 1.35;
}

@media (hover: hover) {
  .navegacion-episodios a:hover .navegacion-episodios__titulo {
    text-decoration: underline;
  }
}

/* ---------- Páginas de texto: Acerca de, Antes de grabar, Privacidad y 404 ---------- */

/* Una columna de lectura alineada a la izquierda, como el cuerpo del episodio. */
.texto-corrido {
  max-width: var(--ancho-texto);
}

.texto-corrido p {
  margin: 0 0 1em;
}

/* Listas del aviso de privacidad. */
.texto-corrido ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.texto-corrido li + li {
  margin-top: 0.5em;
}

/* Aviso breve junto al correo de /antes-de-grabar: secundario al texto de la página. */
.texto-corrido .aviso-contacto {
  font-size: 0.875rem;
}

/* Antes de grabar: los consejos, uno por renglón, separados por una línea azul claro
   (decorativa), como los puntos de "Cómo hacemos este podcast". */
.texto-corrido .guia {
  margin: 0;
  padding: 0;
  list-style: none;
}

.guia li {
  padding-block: 0.9rem;
  border-top: 1px solid var(--azul-claro);
}

.texto-corrido .guia li + li {
  margin-top: 0;
}

.guia li:last-child {
  padding-bottom: 0;
}

/* "Lo práctico" va antes del contacto: espacio para que no se lean como un solo bloque. */
.texto-corrido .guia-seccion + p {
  margin-top: 2.5rem;
}

/* Las ideas para pensar antes, en la franja beige: dos columnas en computadora, cada una con
   una línea superior azul oscuro (decorativa). Sobre beige, el título va en color de texto. */
.guia-pensar .titulo-seccion {
  color: var(--texto);
}

.guia-pensar__puntos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 3rem;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guia-pensar__puntos li {
  padding-top: 0.9rem;
  border-top: 2px solid var(--azul-oscuro);
}

.seccion--pagina-final {
  padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
}

.texto-corrido section + section {
  margin-top: 2rem;
}

.texto-corrido .titulo-seccion {
  margin-bottom: 0.75rem;
}

.texto-corrido .texto-corrido__mas {
  margin-top: 2rem;
}

/* Secciones del aviso de privacidad que aún no tienen texto. */
.pendiente {
  font-style: italic;
  color: var(--cafe);
}

.no-encontrada__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

/* ---------- Acerca de ---------- */

/* Celular y tableta: todo apilado. Computadora: composición alternada (más abajo). */
.acerca {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
}

.acerca p,
.acerca-alcance p {
  margin: 0 0 1em;
}

.acerca-proyecto__texto,
.acerca-juan__texto,
.acerca-alcance {
  max-width: var(--ancho-texto);
}

.acerca-proyecto__texto > :last-child,
.acerca-juan__texto > :last-child,
.acerca-alcance > :last-child {
  margin-bottom: 0;
}

.acerca .titulo-seccion,
.acerca-alcance .titulo-seccion {
  margin-bottom: 1rem;
}

/* "Lo que nos importa": el componente de "Cómo hacemos este podcast", con sus cuatro puntos
   parejos (dos por fila en tableta, los cuatro en un renglón en computadora) para que ninguno
   quede solo. Sin el margen de los párrafos de esta página. */
.acerca-importa .como {
  grid-template-columns: 1fr;
}

.acerca .como p {
  margin: 0;
}

@media (min-width: 48rem) {
  .acerca-importa .como {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .acerca-importa .como {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Frase destacada del proyecto: grande, en azul oscuro (permitido en cualquier tamaño),
   con una línea dorada de acento arriba. */
.acerca .acerca-proyecto__frase {
  max-width: 16ch;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 3px solid var(--dorado);
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2.1rem);
  font-weight: var(--peso-titulo);
  line-height: 1.2;
  color: var(--azul-oscuro);
  text-wrap: balance;
}

/* Frase de Juan: más grande, en café, con una línea dorada de acento. */
.acerca .acerca__frase {
  margin-bottom: 1.25rem;
  padding-left: 1rem;
  border-left: 4px solid var(--dorado);
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.4;
  color: var(--cafe);
}

/* Foto de Juan (4:5, en blanco y negro). En celular va arriba del texto. */
.acerca-juan__foto {
  width: 100%;
  max-width: 18rem;
  margin-bottom: 1.75rem;
  border-radius: 0.5rem;
}

/* Recuadro de muestra del tamaño final: solo existe con --serve mientras no hay foto. */
.acerca-juan__muestra {
  display: grid;
  place-content: center;
  gap: 0.25rem;
  aspect-ratio: 4 / 5;
  padding: 1rem;
  border: 2px dashed var(--cafe);
  background: var(--beige);
  color: var(--texto);
  font-size: var(--tam-secundario);
  text-align: center;
}

.acerca .acerca-juan__muestra p {
  margin: 0;
}

/* Enlaces personales en un renglón, con el logo de cada red; zona tocable de al menos 24 px.
   Guías de LinkedIn (aplicadas a los cuatro logos, para que se vean parejos): al menos 21 px de
   alto y, como espacio libre, el alto del logo hasta el texto. Entre un enlace y el siguiente
   hay más espacio que entre cada logo y su nombre, para que no se confundan. */
.acerca__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.acerca__enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 21px;
  padding-block: 0.25rem;
  font-weight: 600;
}

/* Los cuatro logos en una caja del mismo ancho (la del más ancho, LinkedIn), para que los
   nombres empiecen a la misma distancia. Cada logo conserva su proporción dentro de la caja. */
.icono-red {
  flex: none;
  width: 23px;
  height: 21px;
}

.icono-red--imagen {
  object-fit: contain;
}

/* Celular: dos columnas iguales; los nombres de cada columna empiezan a la misma altura. */
@media (max-width: 47.99rem) {
  .acerca__enlaces {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

/* Tarjeta compacta de la Reflexión 001: portada pequeña, título y "Escuchar". */
.acerca-reflexion {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 34rem;
  padding: 1rem;
  border: 1px solid var(--beige);
  border-radius: 0.5rem;
}

.acerca-reflexion__portada {
  flex: none;
  width: 7rem;
  border-radius: 0.35rem;
}

.acerca-reflexion__texto {
  min-width: 0;
}

.acerca-reflexion__titulo {
  margin: 0 0 0.4rem;
  font-size: var(--tam-titulo-tarjeta);
  font-weight: var(--peso-titulo);
  line-height: 1.3;
}

.acerca-reflexion__titulo a {
  color: var(--texto);
  text-decoration: none;
}

.acerca-reflexion__escuchar {
  display: inline-block;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--dorado);
  font-size: 0.95rem;
  font-weight: var(--peso-fuerte);
  color: var(--azul-oscuro);
}

.acerca-reflexion__escuchar::after {
  content: " →";
}

@media (max-width: 47.99rem) {
  .acerca-reflexion {
    gap: 1rem;
  }

  .acerca-reflexion__portada {
    width: 5.5rem;
  }
}

/* Franja beige a todo lo ancho (Alcance). Sobre beige, títulos y texto en color de texto (9.2:1). */
.franja--beige {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  background: var(--beige);
  color: var(--texto);
}

/* Alcance: el bloque, centrado en la página; el título y su línea dorada, también. El párrafo
   sigue la regla general: justificado en computadora, alineado a la izquierda en celular.
   Sobre beige, el título va en color de texto. */
.acerca-alcance {
  margin-inline: auto;
}

.alcance .titulo-seccion {
  text-align: center;
  color: var(--texto);
}

.alcance .titulo-seccion::after {
  margin-inline: auto;
}

/* Computadora: composición alternada y texto justificado, con división de palabras
   (el idioma lo toma de <html lang="es-MX">) para que no queden huecos entre palabras. */
@media (min-width: 64rem) {
  .acerca-proyecto {
    display: grid;
    grid-template-columns: minmax(0, var(--ancho-texto)) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: center;
  }

  .acerca .acerca-proyecto__frase {
    margin-top: 0;
  }

  .acerca-juan--con-foto {
    display: grid;
    grid-template-columns: 18rem minmax(0, var(--ancho-texto));
    column-gap: 4rem;
    align-items: start;
  }

  .acerca-juan__foto {
    margin-bottom: 0;
  }

  .texto-justificado p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  /* La frase destacada no se justifica: con pocas palabras quedaría con huecos. */
  .texto-justificado .acerca__frase {
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
}

/* ---------- Escala tipográfica: excepciones de celular ---------- */

/* En celular se conservan exactamente los tamaños que había antes de la escala. Estas piezas
   tenían un tamaño distinto al resto de su papel (en computadora ya no hay excepciones). */
@media (max-width: 47.99rem) {
  .eje__nombre {
    font-size: 1.05rem;
  }

  .reciente__invitado {
    font-size: 0.95rem;
  }
}