/* essencial.css: o desenho 05, "Só o essencial". Branco, texto preto, uma cor de link, a letra do sistema.
   Depende de: ../comum/modal.css carregado antes (a parte 5 ajusta o modal a este desenho).

   A regra da casa: azul leva a algum lugar; preto é onde você está (aba, página, capítulo que toca).
   Partes: 1 medidas e cores · 2 base · 3 peças (topo, rodapé, rótulo, abas, avatar, onde ouvir, player,
   linha de episódio) · 4 páginas (moldura de duas colunas, início, lista, episódio, pessoa, sobre) ·
   5 modal e compartilhar · 6 menos movimento · 7 computador (o único @media de largura, sempre no fim). */


/* ============================================================ 1. medidas e cores */

:root {
  /* o modal do comum lê estas seis */
  --fundo: #ffffff;
  --cartao: #ffffff;
  --texto: #111111;
  --texto-fraco: #5e5e5e;
  --linha: #e3e3e3;
  --raio: 6px;

  --texto-medio: #333333;
  --link: #1a4fd0;
  --link-escuro: #123a9c;
  --link-claro: #f1f4fd;
  --trilho: #bdbdbd;
  --borda-campo: #8a8a8a;

  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-fixa: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --margem: 16px;
  --respiro: 36px;
  --coluna-fixa: 320px;
  --vao: 72px;
  --largura-pagina: 1200px;
}


/* ============================================================ 2. base */

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

/* O comum esconde bloco com o atributo hidden; nenhuma regra de display daqui pode trazer ele de volta. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-escuro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* link no meio de um parágrafo: sublinhado, porque o azul sozinho não se separa bem do preto */
.texto-corrido a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 2px; }
::selection { background: #d9e3ff; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; left: var(--margem); top: 8px; z-index: 20;
  padding: 10px 14px; background: var(--texto); color: #fff; font-weight: 600;
  transform: translateY(-200%);
}
.pular:focus { transform: none; color: #fff; }

/* O sinal: um ponto azul antes do nome. É a marca inteira do programa. */
.marca-sinal::before {
  content: ""; display: inline-block;
  width: .42em; height: .42em; margin-right: .36em;
  border-radius: 50%; background: var(--link); vertical-align: .1em;
}

/* Ação em texto: botão que se escreve como link (azul, sem caixa em volta). */
.acao {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--link); font-weight: 600;
}
.acao:hover { color: var(--link-escuro); text-decoration: underline; text-underline-offset: .18em; }

/* Título que mora numa lista: uma linha só, no mesmo tamanho; o inteiro fica no title. */
.uma-linha { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.numeros { font-variant-numeric: tabular-nums; }


/* ============================================================ 3. peças */

/* ---------- topo do site */

.topo { border-bottom: 1px solid var(--linha); }

.topo__dentro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  min-height: 56px; padding: 0 var(--margem);
}

.topo__marca { color: var(--texto); font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.topo__marca:hover { color: var(--texto); }

/* No início o nome já está grande logo abaixo: o topo fica só com a navegação. */
[data-pagina="inicio"] .topo__marca { display: none; }

.topo__nav ul { display: flex; gap: 0 20px; }
.topo__nav a { display: inline-block; padding: 14px 0; font-size: 15px; }
.topo__nav a[aria-current="page"] {
  color: var(--texto); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
}

/* ---------- rodapé */

.rodape { margin-top: 56px; border-top: 1px solid var(--linha); color: var(--texto-fraco); font-size: 14px; }

.rodape__dentro { display: grid; gap: 14px; padding: 24px var(--margem) 36px; }

.rodape__nome { color: var(--texto); font-weight: 700; }
.rodape__ritmo { display: block; color: var(--texto-fraco); font-weight: 400; }

.rodape__ouvir, .rodape__feed { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.rodape__ouvir ul { display: contents; }
.rodape__ouvir a { display: inline-flex; align-items: center; min-height: 40px; }
.rodape__ouvir .rotulo, .rodape__feed .rotulo { flex-basis: 100%; }

.rodape__feed code { color: var(--texto); font-family: var(--letra-fixa); font-size: 13px; overflow-wrap: anywhere; }

.rodape__aviso { max-width: 70ch; font-size: 13px; }

/* ---------- rótulo de seção: caixa alta pequena, espaçada, cinza */

.rotulo {
  color: var(--texto-fraco);
  font-size: 12px; line-height: 1.4; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
}

/* A cabeça de uma seção: o rótulo, uma ação à direita (se houver) e um fio preto embaixo. */
.secao__cabeca {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--texto);
}
.secao__cabeca .acao { min-height: 0; font-size: 14px; }

.secao__nota { margin-top: 12px; color: var(--texto-fraco); font-size: 15px; }

/* ---------- abas (só valem no telefone; no computador tudo fica à vista) */

/* o fio cinza da barra é um fundo de 1px, pra a barra poder rolar de lado sem cortar o traço da aba ativa */
.abas {
  display: flex; gap: 0 18px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(var(--linha), var(--linha)) left bottom / 100% 1px no-repeat;
}

.abas [data-aba] {
  flex: none; padding: 12px 0 9px;
  border-bottom: 2px solid transparent;
  color: var(--link); font-size: 15px; font-weight: 600; white-space: nowrap;
}
.abas [data-aba][data-ativa] { border-bottom-color: var(--texto); color: var(--texto); }

[data-abas] [data-painel]:not([data-ativa]) { display: none; }

/* ---------- avatar com as iniciais (o lugar da foto) */

.avatar {
  flex: none; display: inline-grid; place-items: center;
  width: 46px; height: 46px; border: 1.5px solid var(--texto); border-radius: 50%;
  color: var(--texto); font-size: 18px; font-weight: 700; line-height: 1;
}
.avatar--grande { width: 88px; height: 88px; border-width: 2px; font-size: 36px; }

/* ---------- pessoa em linha: avatar, nome, papel e bio */

.quem { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.quem .avatar { grid-row: span 3; }
.quem__nome { font-weight: 600; }
.quem__papel { color: var(--texto-fraco); font-size: 14px; }
.quem__bio { margin-top: 6px; color: var(--texto-medio); font-size: 14px; line-height: 1.55; }

/* ---------- onde ouvir: três botões e o "mais opções" */

.ouvir { display: grid; gap: 12px; }
.ouvir__lista { display: grid; gap: 8px; }

.ouvir__botao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--link); border-radius: var(--raio);
  font-weight: 600;
}
.ouvir__botao::after { content: "↗"; font-weight: 400; }
.ouvir__botao:hover { background: var(--link-claro); text-decoration: none; }

.ouvir__mais { justify-self: start; }

/* ---------- player */

.player { display: grid; gap: 8px; }

.player__principal { display: flex; align-items: center; gap: 14px; }

.player__tocar {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--link); color: #fff;
}
.player__tocar:hover { background: var(--link-escuro); }
.player__tocar svg { width: 24px; height: 24px; fill: currentColor; }

.icone--pausar { display: none; }
[data-tocador="tocando"] .icone--tocar { display: none; }
[data-tocador="tocando"] .icone--pausar { display: block; }

.player__trilho { flex: 1; min-width: 0; }

.player__agora { min-height: 1.5em; color: var(--texto-fraco); font-size: 13px; }

.player__barra {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 22px; margin: 0;
  background: transparent; cursor: pointer;
}
.player__barra::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--texto) calc(var(--progresso, 0) * 100%), var(--trilho) 0);
}
.player__barra::-moz-range-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to right, var(--texto) calc(var(--progresso, 0) * 100%), var(--trilho) 0);
}
.player__barra::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5.5px; border: 0; border-radius: 50%; background: var(--texto);
}
.player__barra::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--texto); }
.player__barra:focus-visible { outline-offset: 2px; }

.player__relogios { display: flex; justify-content: space-between; color: var(--texto-fraco); font-size: 13px; }

.player__comandos { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; font-size: 14px; }
.player__comandos > * {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--link); font-weight: 600; white-space: nowrap;
}
.player__comandos > *:hover { color: var(--link-escuro); text-decoration: underline; text-underline-offset: .18em; }

.player__retomar { color: var(--texto-fraco); font-size: 13px; }

/* ---------- linha de episódio (lista do início, lista inteira, do mesmo tema, da pessoa) */

.lista-ep > li + li { border-top: 1px solid var(--linha); }

.ep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "numero meta" "titulo titulo" "resumo resumo" "atalhos atalhos";
  column-gap: 10px; align-items: baseline;
  padding: 16px 0;
}
.ep__numero { grid-area: numero; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ep__numero::before { content: "Ep. "; }
.ep__meta { grid-area: meta; color: var(--texto-fraco); font-size: 14px; font-variant-numeric: tabular-nums; }

.ep__titulo { grid-area: titulo; margin-top: 2px; font-size: 17px; line-height: 1.35; font-weight: 600; }
.ep__titulo a { color: var(--texto); }

.ep__resumo {
  grid-area: resumo; margin-top: 4px;
  color: var(--texto-medio); font-size: 15px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

.ep__atalhos { grid-area: atalhos; display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 2px; font-size: 14px; font-weight: 600; }
.ep__atalhos a { display: inline-flex; align-items: center; min-height: 36px; }

/* a linha curta: número, título e duração, tudo numa linha */
.ep--curto {
  grid-template-columns: 1.8em minmax(0, 1fr) auto;
  grid-template-areas: "numero titulo meta";
  column-gap: 12px; padding: 11px 0;
}
.ep--curto .ep__numero { color: var(--texto-fraco); font-weight: 600; }
.ep--curto .ep__numero::before { content: none; }
.ep--curto .ep__titulo { margin: 0; font-size: 16px; }
.ep--curto .ep__titulo a { color: var(--link); font-weight: 500; }
.ep--curto .ep__titulo a:hover { color: var(--link-escuro); }

/* ---------- lista de temas: nome à esquerda, quantos à direita */

.temas > li + li { border-top: 1px solid var(--linha); }
.tema { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; font-weight: 500; }
.tema__quantos { color: var(--texto-fraco); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }


/* ============================================================ 4. páginas */

/* ---------- a moldura de duas colunas.
   No telefone as duas colunas se desfazem (display: contents) e cada bloco entra na fila pela ordem
   que faz sentido numa tela estreita; no computador viram a coluna fixa e a coluna do texto. */

.dupla { display: flex; flex-direction: column; gap: var(--respiro); padding: 28px var(--margem) 0; }
.dupla__fixa, .dupla__texto { display: contents; }

.titulo-pagina { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }

.texto-grande { font-size: 20px; line-height: 1.5; letter-spacing: -.005em; }

/* ---------- início */

.programa__nome { font-size: 36px; line-height: 1.05; font-weight: 750; letter-spacing: -.03em; }
.programa__frase { margin-top: 12px; font-size: 19px; line-height: 1.4; }
.programa__ritmo { margin-top: 12px; color: var(--texto-fraco); font-size: 15px; }

.destaque { display: grid; gap: 10px; }
.destaque__meta { color: var(--texto-fraco); font-size: 14px; font-variant-numeric: tabular-nums; }
.destaque__titulo { font-size: 25px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.destaque__titulo a { color: var(--texto); }
.destaque__resumo { color: var(--texto-medio); font-size: 17px; line-height: 1.6; max-width: 62ch; }
.destaque .player { margin-top: 10px; }
.destaque__links { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 14px; font-weight: 600; }
.destaque__links a { display: inline-flex; align-items: center; min-height: 36px; }

.inicio__secoes { display: grid; gap: 18px; }
.inicio__secoes > section { display: grid; gap: 4px; align-content: start; }

/* a fila do telefone no início */
.inicio .programa { order: 1; }
.inicio .destaque { order: 2; }
.inicio .ouvir { order: 3; }
.inicio .inicio__secoes { order: 4; }
.inicio .quem-faz { order: 5; }

.quem-faz { display: grid; gap: 14px; }

/* ---------- lista de episódios */

.lista__cabeca { display: grid; gap: 4px; }
.lista__contagem { color: var(--texto-fraco); font-size: 15px; font-variant-numeric: tabular-nums; }

.busca { display: grid; gap: 6px; }
.busca input {
  width: 100%; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--borda-campo); border-radius: var(--raio);
  background: #fff; color: var(--texto); font: inherit;
}
.busca input::placeholder { color: #767676; }
.busca input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-color: var(--link); }

.filtros { display: grid; gap: 18px; }
.filtro { display: grid; gap: 4px; }
.filtro__opcoes { display: flex; flex-wrap: wrap; gap: 0 18px; }
.filtro__opcoes > [data-lista] { display: contents; }

.filtro__opcao {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 38px; color: var(--link); font-weight: 500; text-align: left;
}
.filtro__opcao:hover { color: var(--link-escuro); }
.filtro__opcao[aria-pressed="true"] {
  color: var(--texto); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.filtro__quantos { display: none; color: var(--texto-fraco); font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; }

.lista__vazio { padding: 24px 0; color: var(--texto-fraco); }

.paginacao { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.paginacao button {
  min-width: 42px; min-height: 42px; border-radius: var(--raio);
  color: var(--link); font-weight: 600; font-variant-numeric: tabular-nums;
}
.paginacao button:hover { background: var(--link-claro); }
.paginacao button[aria-current="page"] {
  color: var(--texto);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

.lista .lista__cabeca { order: 1; }
.lista .busca { order: 2; }
.lista .filtros { order: 3; }
.lista .lista__resultado { order: 4; }

/* ---------- página do episódio */

.ep-cabeca__meta { color: var(--texto-fraco); font-size: 14px; font-variant-numeric: tabular-nums; }
.ep-cabeca__numero { color: var(--texto); font-weight: 600; }
.ep-cabeca__titulo { margin-top: 8px; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }

.ep-resumo { font-size: 18px; line-height: 1.6; max-width: 62ch; }

.bloco { display: grid; gap: 4px; align-content: start; }
.bloco--texto { gap: 28px; }

.aviso-audio { padding-top: 14px; border-top: 1px solid var(--texto); color: var(--texto-medio); font-size: 15px; }

.temas-ep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.temas-ep [data-lista] { display: contents; }
.temas-ep .rotulo { margin-right: 4px; }

.capitulos > li + li, .citados > li + li { border-top: 1px solid var(--linha); }

.capitulo__botao {
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  width: 100%; padding: 7px 0; text-align: left; color: var(--link);
}
.capitulo__tempo { color: var(--texto-fraco); font-size: 14px; font-variant-numeric: tabular-nums; }
.capitulo__titulo { font-weight: 500; }
.capitulo__botao:hover .capitulo__titulo { color: var(--link-escuro); text-decoration: underline; text-underline-offset: .18em; }
.capitulo[data-agora] .capitulo__titulo { color: var(--texto); font-weight: 600; }

.citado { padding: 10px 0; }
.citado a { font-weight: 500; }
.citado__fonte { display: block; color: var(--texto-fraco); font-size: 13px; }

.creditos { display: grid; gap: 10px; padding-top: 10px; }
.credito__funcao { display: block; color: var(--texto-fraco); font-size: 13px; }

.transcricao__nota { margin-top: 10px; color: var(--texto-fraco); font-size: 14px; }

/* No telefone a transcrição é uma caixa com rolagem própria que acompanha o áudio:
   assim a aba não vira uma tripa de dez telas. */
.transcricao {
  display: grid; gap: 16px;
  max-height: min(62vh, 30rem); overflow-y: auto; overscroll-behavior: contain;
  margin-top: 8px; padding: 14px 4px 14px 2px;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}

/* relative: o texto escondido pro leitor de tela fica preso na linha e não estica a página pra fora da caixa */
.fala {
  position: relative;
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 10px;
  margin-left: -2px; padding-left: 0; border-left: 2px solid transparent;
}
.fala__tempo {
  align-self: start; justify-self: start; padding: 1px 0 0 4px;
  color: var(--link); font-size: 13px; font-weight: 600; line-height: 1.75; font-variant-numeric: tabular-nums;
}
.fala__tempo:hover { color: var(--link-escuro); text-decoration: underline; }
.fala__texto { font-size: 15.5px; line-height: 1.65; }
.fala[data-agora] .fala__tempo { color: var(--texto); }
[data-tocador="tocando"] .fala[data-agora] { border-left-color: var(--link); }

.vizinhos { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--texto); }
.vizinhos__link { display: grid; gap: 2px; min-width: 0; padding: 4px 0; }
.vizinhos__numero { color: var(--texto-fraco); font-weight: 500; font-variant-numeric: tabular-nums; }
.vizinhos__link:hover { text-decoration: none; }
.vizinhos__link:hover .vizinhos__titulo { text-decoration: underline; text-underline-offset: .18em; }
.vizinhos__titulo { font-weight: 600; }

.ep-ouvir .ouvir__lista { grid-template-columns: 1fr; }

/* a fila do telefone na página do episódio; as abas encostam no painel que mostram */
.pagina-ep .ep-cabeca { order: 1; }
.pagina-ep .ep-player { order: 2; }
.pagina-ep .abas { order: 3; margin-top: -8px; margin-bottom: calc(18px - var(--respiro)); }
/* no telefone a aba já diz "Transcrição": o rótulo repetido sai */
.pagina-ep .bloco--transcricao > .secao__cabeca { display: none; }
.pagina-ep .indice__rolagem { display: contents; }
.pagina-ep .bloco--resumo { order: 4; }
.pagina-ep .bloco--capitulos { order: 5; }
.pagina-ep .bloco--vizinhos { order: 7; }
.pagina-ep .bloco--do-tema { order: 8; }
.pagina-ep .bloco--transcricao { order: 9; }
.pagina-ep .bloco--links { order: 10; }
.pagina-ep .bloco--onde { order: 10; }
.pagina-ep .bloco--quem { order: 11; }
.pagina-ep .bloco--creditos { order: 12; }

/* ---------- pessoa */

.pessoa-ficha { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
.pessoa-ficha .avatar { grid-row: span 3; }
.pessoa-ficha__papel { color: var(--texto-fraco); font-size: 15px; }
.pessoa-ficha__quantos { color: var(--texto-fraco); font-size: 14px; font-variant-numeric: tabular-nums; }

.links-pessoa > li { padding: 6px 0; }

.pessoa .pessoa-ficha { order: 1; }
.pessoa .pessoa-bio { order: 2; }
.pessoa .pessoa-links { order: 3; }
.pessoa .pessoa-episodios { order: 4; }

/* ---------- sobre */

.ficha { display: grid; gap: 14px; }
.ficha dt { color: var(--texto-fraco); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.ficha dd { margin-top: 2px; }

.feed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.feed code { color: var(--texto); font-family: var(--letra-fixa); font-size: 13px; overflow-wrap: anywhere; }

.sobre .sobre__cabeca { order: 1; }
.sobre .sobre__texto { order: 2; }
.sobre .ficha { order: 3; }
.sobre .ouvir { order: 4; }
.sobre .sobre__quem { order: 5; }
.sobre .sobre__pauta { order: 6; }
.sobre .sobre__temas { order: 7; }

.sobre__texto { display: grid; gap: 16px; max-width: 62ch; }
.sobre__descricao { color: var(--texto-medio); font-size: 17px; line-height: 1.65; }


/* ============================================================ 5. modal e compartilhar */

/* O casco do comum, vestido deste desenho: folha branca com fio preto, véu branco atrás, sem sombra. */
.modal { border: 1px solid var(--texto); box-shadow: none; }
.modal-fundo { background: rgba(255, 255, 255, .86); }
.modal-titulo { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.modal .ouvir__lista { margin-bottom: 20px; }
.modal .rotulo { margin-bottom: 6px; }

.botao-linha {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--link); border-radius: var(--raio);
  color: var(--link); font-size: 14px; font-weight: 600;
}
.botao-linha:hover { background: var(--link-claro); }

.compartilhar { display: grid; gap: 14px; }
.compartilhar__minuto { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.compartilhar__minuto input { width: 18px; height: 18px; margin: 0; accent-color: var(--link); }
.compartilhar__endereco {
  width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--borda-campo); border-radius: var(--raio);
  background: #fff; color: var(--texto); font-family: var(--letra-fixa); font-size: 13px;
}
.compartilhar__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.compartilhar__botao {
  flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--link); border-radius: var(--raio);
  background: #fff; color: var(--link); font-size: 15px; font-weight: 600;
}
.compartilhar__botao:hover { background: var(--link-claro); text-decoration: none; }
.compartilhar__botao--zap { background: var(--link); color: #fff; }
.compartilhar__botao--zap:hover { background: var(--link-escuro); color: #fff; }


/* ============================================================ 6. menos movimento */

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


/* ============================================================ 7. computador (sempre no fim) */

@media (min-width: 900px) {
  :root { --margem: 48px; }

  /* topo e rodapé no mesmo esquadro das duas colunas */
  .topo__dentro, .rodape__dentro, .dupla {
    display: grid;
    grid-template-columns: var(--coluna-fixa) minmax(0, 1fr);
    column-gap: var(--vao);
    max-width: var(--largura-pagina); margin: 0 auto;
    padding-left: var(--margem); padding-right: var(--margem);
  }
  .topo__dentro { min-height: 64px; align-items: center; }
  .topo__marca { grid-column: 1; }
  .topo__nav { grid-column: 2; }
  .topo__nav ul { gap: 0 28px; }

  .rodape__dentro { row-gap: 14px; padding-top: 32px; padding-bottom: 48px; }
  .rodape__nome { grid-column: 1; grid-row: 1 / span 3; }
  .rodape__ouvir, .rodape__feed, .rodape__aviso { grid-column: 2; }
  .rodape__ouvir .rotulo, .rodape__feed .rotulo { flex-basis: auto; margin-right: 4px; }

  /* a moldura: coluna fixa à esquerda, texto à direita */
  .dupla { align-items: start; row-gap: 0; padding-top: 48px; }

  .dupla__fixa {
    grid-column: 1; grid-row: 1 / span 2;
    display: flex; flex-direction: column; gap: 36px;
    position: sticky; top: 0;
    max-height: 100vh; overflow-y: auto; scrollbar-width: thin;
    margin: -24px -8px 0; padding: 24px 8px 24px;
  }
  .dupla__texto { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 56px; min-width: 0; }

  /* a fila do telefone (order) não vale aqui: cada coluna segue a ordem do HTML */
  .dupla .dupla__fixa > *, .dupla .dupla__texto > *, .dupla .indice__rolagem > * { order: 0; }

  /* no computador não há abas: todos os painéis à vista */
  .abas { display: none; }
  [data-abas] [data-painel]:not([data-ativa]) { display: block; }

  .titulo-pagina { font-size: 40px; }
  .texto-grande { font-size: 23px; line-height: 1.45; }

  /* início */
  .programa__nome { font-size: 46px; }
  .programa__frase { font-size: 21px; line-height: 1.38; }
  .inicio .dupla__texto { grid-row: 1 / span 2; }
  .destaque__titulo { font-size: 32px; line-height: 1.15; }
  .destaque__resumo { font-size: 18px; }
  .destaque .player { max-width: 640px; }

  .inicio__secoes { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 48px; row-gap: 56px; }
  .inicio__secoes > [data-painel="episodios"] { grid-column: 1 / -1; }

  /* a linha de episódio larga: o número pendurado na margem, a data à direita do título */
  .ep {
    grid-template-columns: 2.6em minmax(0, 1fr) auto;
    grid-template-areas: "numero titulo meta" ". resumo resumo" ". atalhos atalhos";
    column-gap: 16px; padding: 18px 0;
  }
  .ep__numero { color: var(--texto-fraco); font-size: 17px; font-weight: 600; text-align: right; }
  .ep__numero::before { content: none; }
  .ep__titulo { margin: 0; font-size: 18px; }
  .ep__meta { text-align: right; }
  .ep--curto { grid-template-columns: 2.6em minmax(0, 1fr) auto; grid-template-areas: "numero titulo meta"; padding: 11px 0; }
  .ep--curto .ep__numero { font-size: 15px; }
  .ep--curto .ep__titulo { font-size: 16px; }

  /* lista */
  .lista .dupla__texto { grid-row: 1 / span 2; }
  .filtro__opcoes { flex-direction: column; gap: 0; }
  .filtro__opcao { width: 100%; min-height: 40px; border-bottom: 1px solid var(--linha); }
  .filtro__quantos { display: inline; }

  /* episódio: título no alto da coluna do texto, índice fixo à esquerda */
  .ep-cabeca { grid-column: 2; grid-row: 1; padding-bottom: 40px; }
  .ep-cabeca__titulo { font-size: 38px; line-height: 1.12; }
  /* o índice do episódio: o player parado no alto, capítulos, links e créditos rolando por dentro */
  .pagina-ep .dupla__fixa { gap: 24px; overflow: hidden; }
  .pagina-ep .ep-player { flex: none; padding-bottom: 20px; border-bottom: 1px solid var(--linha); }
  .pagina-ep .bloco--transcricao > .secao__cabeca { display: flex; }
  .pagina-ep .indice__rolagem {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; gap: 32px;
    overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
    margin: 0 -6px; padding: 0 6px 8px;
  }
  .vizinhos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .vizinhos__link--proximo { grid-column: 2; text-align: right; }
  .ep-resumo { font-size: 19px; }
  .ep-ouvir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .ep-ouvir .ouvir__lista { flex: 1 1 420px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capitulo__botao { padding: 7px 0; }
  .capitulo__titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* a transcrição no computador é texto corrido; quem fica parado é o índice à esquerda */
  .transcricao { max-height: none; overflow: visible; gap: 18px; padding: 18px 0 0; border-bottom: 0; }
  .fala { grid-template-columns: 3.2em minmax(0, 1fr); column-gap: 14px; }
  .player__comandos { gap: 0 16px; }
  .compartilhar__botao { flex-basis: 150px; }
  .fala__texto { font-size: 17px; line-height: 1.7; max-width: 66ch; }

  /* pessoa */
  .pessoa .dupla__texto { grid-row: 1 / span 2; }
  .pessoa-ficha { grid-template-columns: 1fr; row-gap: 6px; }
  .pessoa-ficha .avatar { grid-row: auto; margin-bottom: 10px; }

  /* sobre */
  .sobre .dupla__texto { grid-row: 1 / span 2; }
  .sobre__texto { gap: 20px; }
  .sobre__descricao { font-size: 18px; }
}