/* base.css: a cara comum da versão Revista (papel, tinta e um vermelho só): cabeçalho, rodapé, botões, onde ouvir, guias, player e modal.
   Depende de: ../comum/modal.css antes dele (aqui só se veste o modal); cada página carrega o CSS dela depois deste. */

/* ---------------------------------------------------------------- as cores e as letras */

:root {
  --papel: #f3ede2;
  --papel-claro: #faf7f0;
  --tinta: #1c1915;
  --tinta-media: #3b362f;
  --tinta-fraca: #5f574c;
  --fio: #d5cab8;
  --vermelho: #b2271b;
  --vermelho-escuro: #8c1d13;
  --vermelho-claro: #f5dcd4;
  /* o mesmo vermelho, mais aceso, pra aparecer em cima da tinta (o player) */
  --vermelho-no-escuro: #e4583f;

  /* os nomes que o modal do comum usa */
  --fundo: var(--papel);
  --cartao: var(--papel-claro);
  --texto: var(--tinta);
  --texto-fraco: var(--tinta-fraca);
  --linha: var(--fio);
  --raio: 2px;

  --serifa: "Newsreader", Georgia, "Times New Roman", serif;
  --sem-serifa: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --margem: 16px;
  --largura-da-pagina: 1280px;
  --desliza: cubic-bezier(.22, 1, .36, 1);
}

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

/* o que o paginas.js esconde (bloco vazio, coisa que o episódio não tem) fica escondido de verdade */
[hidden] { display: none !important; }

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

/* o papel tem um grão quase invisível, desenhado aqui mesmo (ruído em SVG) */
body {
  margin: 0;
  background-color: var(--papel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .09 0 0 0 0 .07 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--tinta);
  font-family: var(--serifa);
  font-size: 17px;
  line-height: 1.5;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--vermelho); }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }

/* pra quem lê com leitor de tela: some da vista, fica no texto */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--margem);
  top: -60px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--tinta);
  color: var(--papel);
  font: 600 14px/1 var(--sem-serifa);
  text-decoration: none;
}
.pular:focus { top: 8px; color: var(--papel); }

/* cabeçalho, conteúdo e rodapé seguem a mesma largura de página */
.cabeca, main, .rodape {
  width: 100%;
  max-width: var(--largura-da-pagina);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* ---------------------------------------------------------------- peças de texto da revista */

/* o chapéu: a linha curta em caixa alta, vermelha, em cima do título */
.chapeu {
  font: 700 12px/1.3 var(--sem-serifa);
  font-stretch: 82%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermelho);
}

/* a linha fina: o resumo em itálico embaixo do título */
.linha-fina {
  font: italic 400 19px/1.42 var(--serifa);
  color: var(--tinta-media);
  text-wrap: pretty;
}

/* o nome de cada seção da página: fio grosso em cima, caixa alta, e um complemento em itálico */
.rotulo-de-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding-top: 8px;
  border-top: 3px solid var(--tinta);
  font: 800 13px/1.3 var(--sem-serifa);
  font-stretch: 82%;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rotulo-de-secao__mais {
  font: italic 400 16px/1.3 var(--serifa);
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-fraca);
}

/* o título de episódio numa linha só, na letra de sempre; o inteiro vai no title */
.uma-linha {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vermelho);
  color: var(--papel-claro);
  font: italic 500 22px/1 var(--serifa);
}

.seta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font: 700 14px/1.2 var(--sem-serifa);
  color: var(--vermelho);
  text-decoration: none;
}
.seta::after { content: "→"; transition: transform .2s var(--desliza); }
.seta:hover { color: var(--vermelho-escuro); }
.seta:hover::after { transform: translateX(3px); }

/* a linha curta de episódio (na pessoa e no "na mesma seção"): número, título e data */
.linhas > li + li { border-top: 1px solid var(--fio); }
.linha {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas: "numero titulo" "numero meta";
  column-gap: 12px;
  row-gap: 2px;
  padding: 11px 0;
  text-decoration: none;
}
.linha__numero {
  grid-area: numero;
  font: italic 500 30px/1 var(--serifa);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.03em;
  color: var(--vermelho);
}
.linha__titulo { grid-area: titulo; font: 600 18px/1.3 var(--serifa); }
.linha:hover .linha__titulo { color: var(--vermelho); }
.linha__meta { grid-area: meta; font: 600 12.5px/1.3 var(--sem-serifa); font-variant-numeric: tabular-nums; color: var(--tinta-fraca); }

/* ---------------------------------------------------------------- botões */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--tinta);
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta);
  font: 600 14px/1.1 var(--sem-serifa);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.botao:hover { background: var(--tinta); color: var(--papel); }
.botao--vermelho { border-color: var(--vermelho); background: var(--vermelho); color: #fff; }
.botao--vermelho:hover { border-color: var(--vermelho-escuro); background: var(--vermelho-escuro); color: #fff; }

/* ---------------------------------------------------------------- cabeçalho */

.cabeca { padding-top: 10px; }

.cabeca__datas {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--tinta);
  font: 600 11px/1.3 var(--sem-serifa);
  font-stretch: 80%;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.cabeca__datas > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabeca__data-longa { display: none; }

.cabeca__linha { padding: 10px 0 8px; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta);
  text-decoration: none;
}
.marca:hover { color: var(--tinta); }
.marca__sinal { flex: none; width: 28px; height: 28px; color: var(--vermelho); }
.marca__nome {
  font: italic 500 34px/1 var(--serifa);
  font-variation-settings: "opsz" 72;
  letter-spacing: -.025em;
}

.cabeca__frase {
  display: none;
  font: italic 400 16px/1.35 var(--serifa);
  color: var(--tinta-media);
}
[data-pagina="inicio"] .cabeca__frase { display: block; padding-bottom: 10px; }

/* a navegação inteira à vista, sem menu escondido */
.navegacao {
  display: flex;
  margin-top: 10px;
  border-top: 3px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
}
.navegacao a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font: 700 13px/1 var(--sem-serifa);
  font-stretch: 85%;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.navegacao a[aria-current="page"] { color: var(--vermelho); box-shadow: inset 0 -3px 0 var(--vermelho); }

/* ---------------------------------------------------------------- onde ouvir */

.onde-ouvir { display: grid; gap: 10px; }
.onde-ouvir__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onde-ouvir__titulo {
  font: 700 12px/1.3 var(--sem-serifa);
  font-stretch: 82%;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.onde-ouvir__mais { min-height: 40px; padding: 0 12px; font-size: 13px; }

.plataformas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.plataforma {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 64px;
  padding: 8px 6px;
  border: 1.5px solid var(--tinta);
  border-radius: var(--raio);
  background: var(--papel-claro);
  font: 600 13px/1.15 var(--sem-serifa);
  text-align: center;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.plataforma:hover { background: var(--tinta); color: var(--papel); }
.plataforma__nome { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a marca de cada plataforma: um desenho simples, feito aqui, pintado na cor do texto */
.plataforma__marca {
  flex: none;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--desenho) center / contain no-repeat;
  mask: var(--desenho) center / contain no-repeat;
}
[data-plataforma="spotify"] { --desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10.4' stroke-width='1.6'/%3E%3Cpath d='M6.4 9.4c3.9-1.2 8.2-.9 11.6 1' stroke-width='2.1'/%3E%3Cpath d='M7.1 12.8c3.2-.9 6.5-.6 9.3.9' stroke-width='1.9'/%3E%3Cpath d='M7.9 16c2.5-.6 4.9-.4 7 .7' stroke-width='1.7'/%3E%3C/svg%3E"); }
[data-plataforma="apple"] { --desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='10' r='2.3' fill='black' stroke='none'/%3E%3Cpath d='M12 14v7.5'/%3E%3Cpath d='M8.1 14.4a5.6 5.6 0 1 1 7.8 0'/%3E%3Cpath d='M5.2 17.5a9.6 9.6 0 1 1 13.6 0'/%3E%3C/svg%3E"); }
[data-plataforma="youtube"] { --desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6 5h12a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4zm4 3.6v6.8l5.6-3.4z'/%3E%3C/svg%3E"); }
[data-plataforma="deezer"] { --desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='3'%3E%3Cpath d='M3.5 20v-3M8.5 20v-6M13.5 20v-9.5M18.5 20V4'/%3E%3C/svg%3E"); }
[data-plataforma="amazon"] { --desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5v8.2a2.3 2.3 0 1 1-2.3-2.3H9M9 4.5l7-1.5v7.7a2.3 2.3 0 1 1-2.3-2.3H16'/%3E%3Cpath d='M3.5 16.5c5 3.6 12 3.6 17 0'/%3E%3Cpath d='M18 15.6l2.6.9-.6 2.8'/%3E%3C/svg%3E"); }

/* no modal "Mais opções": as cinco em linha, com o feed embaixo */
.mais-opcoes { display: grid; gap: 18px; font-family: var(--sem-serifa); }
.mais-opcoes__texto { font: italic 400 17px/1.4 var(--serifa); color: var(--tinta-media); }
.plataformas--todas { grid-template-columns: 1fr; gap: 6px; }
.plataformas--todas .plataforma { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 14px; font-size: 15px; }
.plataformas--todas .plataforma::after { content: "↗"; margin-left: auto; color: var(--tinta-fraca); }
.plataformas--todas .plataforma:hover::after { color: inherit; }

.feed { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--fio); }
.feed__rotulo { font: 600 13px/1.35 var(--sem-serifa); color: var(--tinta-fraca); }
.feed__linha { display: flex; gap: 8px; }
.feed__endereco {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--papel);
  font: 500 13px/42px var(--sem-serifa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- guias (as abas, no desenho do TabBar do Nexus) */

/* os nomes numa linha de base; a escolhida engorda e acende, e um risco vermelho desliza
   até ela (o revista.js diz onde o risco começa e quanto mede) */
.guias {
  position: relative;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--tinta);
}
.guias::-webkit-scrollbar { display: none; }
.guias::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--risco-largura, 0);
  height: 3px;
  background: var(--vermelho);
  transform: translateX(var(--risco-x, 0));
}
.guias--pronta::after { transition: transform .3s var(--desliza), width .3s var(--desliza); }

.guias__guia {
  flex: 1 0 auto;
  min-height: 46px;
  padding: 12px 10px;
  border: 0;
  background: none;
  color: var(--tinta-fraca);
  font: 600 14px/1 var(--sem-serifa);
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
}
.guias__guia:hover { color: var(--tinta); }
.guias__guia:focus-visible { outline-offset: -3px; }
.guias__guia[data-ativa] { color: var(--tinta); font-weight: 800; }

/* uma parte à vista por vez; a que abre sobe um pouco e acende */
[data-abas] [data-painel]:not([data-ativa]) { display: none; }
[data-abas] [data-painel][data-ativa] { animation: painel-entra .28s var(--desliza); }
@keyframes painel-entra { from { opacity: 0; transform: translateY(8px); } }

/* sobrou uma guia só (episódio sem capítulo, sem transcrição e sem link): a barra sai e a parte fica */
[data-uma-aba] .guias { display: none; }

/* com as guias à vista, o título de cada parte repete o nome da guia: fica só pro leitor de tela */
[data-abas]:not([data-uma-aba]) .painel__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* a caixa de tinta com o botão vermelho; as cores moram em variáveis pra a versão
   da capa (em cima do papel) trocar só elas */
.tocador {
  --tocador-fundo: var(--tinta);
  --tocador-texto: var(--papel);
  --tocador-fraco: rgba(243, 237, 226, .72);
  --tocador-borda: rgba(243, 237, 226, .3);
  --tocador-trilho: rgba(243, 237, 226, .22);
  --tocador-cheio: var(--vermelho-no-escuro);
  display: grid;
  gap: 10px;
  padding: 12px 12px 10px;
  border-radius: var(--raio);
  background: var(--tocador-fundo);
  color: var(--tocador-texto);
  font-family: var(--sem-serifa);
}

.tocador__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font: 700 11px/1.3 var(--sem-serifa);
  font-stretch: 82%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tocador-fraco);
}
.tocador__baixar {
  color: var(--tocador-texto);
  letter-spacing: .08em;
  text-underline-offset: .25em;
}
.tocador__baixar:hover { color: var(--tocador-cheio); }

.tocador__controles { display: flex; align-items: center; gap: 4px; }

.tocador__botao {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--tocador-borda);
  border-radius: 50%;
  background: transparent;
  color: var(--tocador-texto);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.tocador__botao:hover { border-color: var(--tocador-texto); }
.tocador__botao svg { width: 24px; height: 24px; }

.tocador__tocar { width: 56px; height: 56px; border: 0; background: var(--vermelho); color: #fff; }
.tocador__tocar:hover { background: var(--vermelho-escuro); }
.tocador__tocar svg { width: 28px; height: 28px; }
.tocador__icone-pausa { display: none; }
[data-tocador="tocando"] .tocador__icone-tocar { display: none; }
[data-tocador="tocando"] .tocador__icone-pausa { display: block; }

.tocador__velocidade {
  width: auto;
  min-width: 52px;
  padding: 0 10px;
  border-radius: 22px;
  font: 700 14px/1 var(--sem-serifa);
  font-variant-numeric: tabular-nums;
}
.tocador__compartilhar { margin-left: auto; }
.tocador__compartilhar svg { width: 20px; height: 20px; }
.tocador__compartilhar-texto { display: none; font: 600 13px/1 var(--sem-serifa); }

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

.tocador__tempos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  font: 500 13px/1.2 var(--sem-serifa);
  font-variant-numeric: tabular-nums;
  color: var(--tocador-fraco);
}
.tocador__capitulo {
  text-align: center;
  color: var(--tocador-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tocador__retomar { font: italic 400 14px/1.3 var(--serifa); color: var(--tocador-fraco); }

/* ---------------------------------------------------------------- modal e compartilhar */

.modal { border: 1px solid var(--tinta); }
.modal-cabeca { border-bottom-color: var(--tinta); }
.modal-titulo { font: 600 22px/1.15 var(--serifa); letter-spacing: -.01em; }
.modal-fundo { background: rgba(28, 25, 21, .55); }

.compartilhar { display: grid; gap: 14px; font-family: var(--sem-serifa); }
.compartilhar__minuto { display: flex; align-items: center; gap: 10px; min-height: 44px; font: 600 15px/1.3 var(--sem-serifa); cursor: pointer; }
.compartilhar__minuto input { width: 20px; height: 20px; margin: 0; accent-color: var(--vermelho); }
.compartilhar__endereco {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  font: 500 13px/1.2 var(--sem-serifa);
}
.compartilhar__botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.compartilhar__botao {
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--tinta);
  border-radius: var(--raio);
  background: transparent;
  color: var(--tinta);
  font: 600 14px/1.1 var(--sem-serifa);
  text-decoration: none;
  cursor: pointer;
}
.compartilhar__botao:hover { background: var(--tinta); color: var(--papel); }
.compartilhar__botao--zap { border-color: var(--vermelho); background: var(--vermelho); color: #fff; }
.compartilhar__botao--zap:hover { border-color: var(--vermelho-escuro); background: var(--vermelho-escuro); color: #fff; }

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

.rodape { margin-top: 36px; padding-bottom: 24px; }
.rodape__grade {
  display: grid;
  gap: 22px;
  padding-top: 18px;
  border-top: 3px solid var(--tinta);
}
/* no telefone, o início e o episódio já mostram onde ouvir no corpo: o rodapé não repete */
[data-pagina="inicio"] .rodape .onde-ouvir,
[data-pagina="episodio"] .rodape .onde-ouvir { display: none; }
.rodape__nome { font: italic 500 28px/1 var(--serifa); letter-spacing: -.02em; }
.rodape__frase { margin-top: 6px; font: italic 400 16px/1.35 var(--serifa); color: var(--tinta-media); }
.rodape__ritmo { margin-top: 6px; font: 600 13px/1.3 var(--sem-serifa); color: var(--tinta-fraca); }
.rodape__nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.rodape__nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1 var(--sem-serifa); }
.rodape__aviso {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--fio);
  font: 400 12px/1.45 var(--sem-serifa);
  color: var(--tinta-fraca);
}

/* ---------------------------------------------------------------- menos movimento: tudo acontece quase na hora */

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

/* ---------------------------------------------------------------- computador */

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

  .cabeca { padding-top: 14px; }
  .cabeca__datas { font-size: 11.5px; }
  .cabeca__data-curta { display: none; }
  .cabeca__data-longa { display: inline; }

  /* nas páginas de dentro: a marca, a frase e a navegação numa faixa só */
  .cabeca__linha {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 0;
    border-bottom: 3px solid var(--tinta);
  }
  /* o fio duplo da revista: o grosso da linha de cima e este, fino, logo embaixo */
  .cabeca::after { content: ""; display: block; height: 1px; margin-top: 3px; background: var(--tinta); }
  .marca__sinal { width: 32px; height: 32px; }
  .marca__nome { font-size: 40px; }
  .cabeca__frase { display: block; flex: 1 1 auto; min-width: 0; font-size: 17px; }
  .navegacao { flex: none; gap: 4px; margin-top: 0; border: 0; }
  .navegacao a { flex: none; padding: 0 14px; }

  /* no início: a marca grande como nome de revista na capa */
  [data-pagina="inicio"] .cabeca__linha { flex-wrap: wrap; align-items: flex-end; padding: 14px 0 12px; }
  [data-pagina="inicio"] .marca { flex: 1 1 auto; }
  [data-pagina="inicio"] .marca__sinal { width: 54px; height: 54px; }
  [data-pagina="inicio"] .marca__nome { font-size: 92px; letter-spacing: -.035em; }
  [data-pagina="inicio"] .navegacao { order: 2; padding-bottom: 6px; }
  [data-pagina="inicio"] .cabeca__frase { order: 3; flex-basis: 100%; padding: 0; font-size: 21px; }

  .plataformas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plataforma { flex-direction: row; gap: 10px; min-height: 48px; padding: 0 12px; font-size: 14px; }
  .plataforma__marca { width: 20px; height: 20px; }

  .tocador { padding: 16px 18px 12px; }
  .tocador__controles { gap: 8px; }
  .tocador__compartilhar { width: auto; padding: 0 14px; border-radius: 22px; }
  .tocador__compartilhar-texto { display: inline; }

  .rodape { margin-top: 72px; }
  [data-pagina="inicio"] .rodape .onde-ouvir,
  [data-pagina="episodio"] .rodape .onde-ouvir { display: grid; }
  .rodape__grade { grid-template-columns: 1.1fr 1.6fr .9fr; gap: 48px; padding-top: 24px; }
  .rodape__nav { flex-direction: column; align-items: flex-start; }
  .rodape__nav a { min-height: 32px; }
}