/* ============================================================
   paginas.css — o blog e os vídeos de uma conversa
   ------------------------------------------------------------
   Uma coluna no celular, grade no desktop. Os dois cartões seguem a
   mesma receita da área de aulas: capa em cima, texto embaixo, sem
   moldura — quem separa um do outro é o espaço.
   ============================================================ */

/* Sem reset global de título e parágrafo: quem zera é cada página.
   `:where` para o reset não pesar mais que as classes de dentro: com
   `.pagina h3` ele vencia `.pagina__secao` e comia a margem das faixas. */
.pagina :where(h2, h3, p) { margin: 0; }

.pagina {
  flex: 1;
  min-height: 0;
  padding: var(--gap-5) 18px calc(var(--gap-6) + var(--safe-bottom));
  overscroll-behavior: contain;
}

/* --- Cabeçalho da page ------------------------------------ */
.pagina__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
  margin-bottom: var(--gap-5);
  padding-bottom: var(--gap-4);
  border-bottom: 1px solid var(--line);
}

.pagina__marca {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.pagina__titulo {
  font-size: 20px;
  font-weight: var(--w-medium);
  letter-spacing: -.02em;
  color: var(--ink);
}

.pagina__resumo {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-mute);
}

/* Rótulo das faixas de baixo (hashtags, buscas). */
.pagina__secao {
  margin: var(--gap-6) 0 var(--gap-3);
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.pagina__atualizar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: var(--ink-soft);
  background: var(--track);
  transition: background var(--t-fast) var(--ease-out);
}
.pagina__atualizar:active { background: var(--line); }

/* Com o post aberto o cabeçalho vira só a volta e a posição na série, e
   anda junto com a coluna de leitura: encostado na borda da tela ele
   parecia pertencer a outra página. */
.pagina__topo--leitura {
  align-items: center;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.pagina__voltar {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  height: 34px;
  font-size: 15px;
  font-weight: var(--w-medium);
  color: var(--ink-soft);
}
.pagina__voltar:active { color: var(--ink); }

.pagina__acao {
  height: 42px;
  padding: 0 var(--gap-5);
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: var(--w-medium);
  color: #fff;
  background: var(--brown);
}
.pagina__acao:active { background: var(--brown-deep); }

/* --- Esperando, falha e vazio ----------------------------- */
.pagina__carregando,
.pagina__falha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-4);
  padding: var(--gap-6) 0;
  text-align: center;
}

.pagina__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  min-height: 50%;
  padding: 0 var(--gap-5);
  text-align: center;
}

/* =========================================================
   BLOG
   ========================================================= */
.posts {
  display: grid;
  gap: var(--gap-6);
  align-items: start;
}

.post {
  display: grid;
  gap: var(--gap-3);
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease-out);
}
.post:active { transform: scale(.99); }
.post:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; }

.post__capa {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  /* O tom vem do título, mas só passeia pela faixa quente da marca: entre
     areia e argila. Solto no círculo inteiro ele saía roxo e verde no meio
     de uma tela marrom. */
  background:
    radial-gradient(120% 120% at 18% 12%,
                    hsl(var(--tom, 30) 26% 93%) 0%,
                    hsl(var(--tom, 30) 20% 85%) 48%,
                    hsl(calc(var(--tom, 30) - 8) 17% 77%) 100%);
  box-shadow: var(--glass-ring);
  transition: transform var(--t-base) var(--ease-out);
}

.post__etiqueta,
.leitura__etiqueta,
.video__fonte {
  padding: 5px 11px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-ring);
}

.post__etiqueta,
.video__fonte {
  position: absolute;
  top: 12px;
  left: 12px;
}

.post__texto { display: grid; gap: 6px; }

/* Título em duas linhas, chamada em duas: com o corte, todos os cartões da
   fila terminam na mesma altura e a grade para de parecer desalinhada. */
.post__titulo,
.post__chamada,
.video__titulo,
.video__porque {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.post__titulo {
  font-size: 18px;
  font-weight: var(--w-medium);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink);
}

.post__chamada {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Post aberto ----------------------------------------- */
.leitura {
  display: grid;
  gap: var(--gap-5);
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.leitura__cabeca { display: grid; justify-items: start; gap: var(--gap-3); }

.leitura__etiqueta { position: static; }

.leitura__titulo {
  font-size: 26px;
  font-weight: var(--w-medium);
  line-height: 1.22;
  letter-spacing: -.025em;
  color: var(--ink);
}

.leitura__chamada {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.leitura__corpo {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink);
}
.leitura__corpo p { margin: 0 0 var(--gap-4); }
.leitura__corpo p:last-child { margin-bottom: 0; }

/* --- Anterior e próximo ---------------------------------- */
.passos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
  padding-top: var(--gap-5);
  border-top: 1px solid var(--line);
}

.passo {
  display: grid;
  gap: 4px;
  padding: var(--gap-3) var(--gap-4);
  border-radius: var(--r-sm);
  text-align: left;
  background: var(--track);
  transition: background var(--t-fast) var(--ease-out);
}
.passo:active { background: var(--line); }

/* O lugar vazio continua ocupando a coluna: sem ele, o "Próximo" do
   primeiro post pularia para a esquerda. */
.passo--vazio { background: none; }

/* O segundo passo alinha à direita: é para onde ele leva. */
.passo:last-child { text-align: right; }

.passo__rotulo {
  font-size: 12px;
  font-weight: var(--w-medium);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.passo__titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink);
}

/* =========================================================
   VÍDEOS
   ========================================================= */
.videos {
  display: grid;
  gap: var(--gap-5);
  align-items: start;
}

.video {
  display: grid;
  gap: var(--gap-3);
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: transform var(--t-fast) var(--ease-out);
}
.video:active { transform: scale(.99); }
.video:focus-visible { outline: 2px solid var(--brown); outline-offset: 4px; }

.video__capa {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  background: var(--track);
  box-shadow: var(--glass-ring);
  transition: transform var(--t-base) var(--ease-out);
}
.video__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video__play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  color: var(--ink);
  background: var(--glass-bg-deep);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-ring);
}

.video__texto { display: grid; gap: 5px; }

.video__titulo {
  font-size: 16.5px;
  font-weight: var(--w-medium);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--ink);
}

.video__canal { font-size: 14px; color: var(--ink-mute); }

.video__porque {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* --- Pílulas de hashtag e de busca ------------------------ */
.pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
}

/* Pílula própria, não a `.chip` do composer: aquela é um botão redondo de
   36 por 36, e uma busca inteira não cabe num círculo. */
.pilula {
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--pill);
  box-shadow: var(--glass-ring);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.pilula:active { background: var(--track); color: var(--ink); }

/* =========================================================
   TOCADOR — o vídeo abre dentro do app
   ---------------------------------------------------------
   `tocador` e não `player`: `aulas.css` já tem um `.player`, e ele
   carrega depois deste arquivo. O nosso apanhava calado.
   ========================================================= */
.tocador {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: max(56px, var(--safe-top)) 16px max(16px, var(--safe-bottom));
}

.tocador__fundo {
  position: absolute;
  inset: 0;
  background: rgba(39, 37, 31, .58);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.tocador[data-open="true"] .tocador__fundo { opacity: 1; }

.tocador__caixa {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  display: grid;
  gap: var(--gap-3);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out);
}
.tocador[data-open="true"] .tocador__caixa { transform: none; opacity: 1; }

/* O Instagram entrega um cartão em pé e o YouTube um quadro deitado. Cada
   um pede a sua caixa: um 16/9 forçado no Reels cortaria o vídeo. */
.tocador__palco {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #000;
  box-shadow: var(--sh-lg);
}
.tocador[data-formato="deitado"] .tocador__palco { aspect-ratio: 16 / 9; }
.tocador[data-formato="pe"] .tocador__palco {
  aspect-ratio: 9 / 14;
  background: var(--surface);
}

/* Num celular baixo o cartão em pé passaria da tela, e o rodapé sairia por
   baixo. A largura é limitada pela ALTURA que sobra: a proporção continua,
   o cartão é que estreita. */
.tocador[data-formato="pe"] .tocador__caixa {
  width: min(100%, 420px, calc((var(--altura, 100dvh) - 150px) * 9 / 14));
}

.tocador__quadro {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.tocador__fechar {
  position: absolute;
  top: -46px;
  right: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  color: #fff;
  background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.tocador__fechar:active { background: rgba(255, 255, 255, .28); }

.tocador__pe {
  display: flex;
  align-items: baseline;
  gap: var(--gap-4);
  color: #fff;
}

.tocador__titulo {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.4;
  opacity: .92;
}

.tocador__fora {
  flex: none;
  font-size: 14px;
  font-weight: var(--w-medium);
  color: #fff;
  text-decoration: none;
  opacity: .72;
}
.tocador__fora:active { opacity: 1; }

/* =========================================================
   DESKTOP — grade
   ========================================================= */
@media (min-width: 900px) {
  /* A coluna é centralizada pelo próprio recuo, como no painel de Aulas.
     Nada de `max-width` junto: os dois somados encolhiam o conteúdo duas
     vezes, e numa tela larga sobrava uma faixa de cartões no meio. */
  .pagina {
    padding: 32px max(32px, calc((100% - var(--lessons-max, 1360px)) / 2)) 64px;
  }

  .pagina__titulo { font-size: 23px; }
  .pagina__resumo { font-size: 15px; }

  .posts,
  .videos {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--gap-6) var(--gap-5);
  }

  .leitura__titulo { font-size: 33px; }

  .tocador[data-formato="deitado"] .tocador__caixa { width: min(100%, 880px); }
}

/* Creation blocks combine script, execution and real Instagram references. */
.creation-block__body { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--ink); font-weight: var(--w-regular); }
.creation-block__body p { margin: 0 0 12px; }
.creation-block__body strong, .leitura__corpo strong { font-weight: 500; }
.creation-block__body ul, .creation-block__body ol { padding-left: 20px; }
.creation-reference { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; color: var(--brown); font-size: 14px; text-decoration: none; }
.creation-reference img { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 12px; }
.creation-reference span { display: flex; align-items: center; gap: 6px; }
.instagram-reference { text-decoration: none; color: inherit; }
.instagram-reference .video__fonte { position: static; align-self: flex-start; }

/* Instagram stays in the content flow, without a modal. */
.video--inline { cursor: default; min-width: 0; }
.video--inline:active { transform: none; }
.instagram-inline-player { overflow: hidden; display: block; width: 100%; height: clamp(500px, 80svh, 680px); border: 0; border-radius: 14px; background: #fff; }
.creation-reference { min-width: 0; }
.creation-reference a { color: inherit; text-decoration: none; }

/* Fixed preview cards; the reading page retains the complete content. */

/* Expanded reading view: video and text share the available desktop width. */
.leitura__layout { display: grid; gap: 28px; min-width: 0; align-items: start; }
.leitura__texto { display: grid; gap: 24px; min-width: 0; overflow-wrap: anywhere; }
.leitura__media { width: 100%; max-width: 460px; min-width: 0; margin-inline: auto; }
.leitura__media .creation-reference { margin-top: 0; }
@media (min-width: 960px) {
  .leitura--com-video .leitura__layout { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 32px; }
  .leitura__media { margin-inline: 0; }
}

.instagram-inline-shell { position: relative; min-width: 0; overflow: hidden; border-radius: 14px; isolation: isolate; }
.instagram-attribution-blur {
  position: absolute; top: 14px; height: 26px; z-index: 1;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  background: rgb(255 255 255 / 6%); border-radius: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent), linear-gradient(transparent, #000 4px, #000 calc(100% - 4px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4px, #000 calc(100% - 4px), transparent), linear-gradient(transparent, #000 4px, #000 calc(100% - 4px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .instagram-attribution-blur { background: #fff; } }

.instagram-attribution-blur--avatar { top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 50%; }
/* Cover both header text lines and resize with the embed, including narrow cards. */
.instagram-attribution-blur--name { top: 5px; left: 50px; right: 84px; height: 48px; }
.instagram-attribution-blur--follow { right: 10px; width: 76px; }


/* Recording preparation, centered in the available page on mobile and desktop. */
.secoes-gerar {
  min-height: min(65dvh, 620px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px 12px;
}
.secoes-gerar h2 { font-size: 24px; font-weight: 500; }
.secoes-gerar p { max-width: 360px; color: var(--ink-muted, #69615b); line-height: 1.5; }
.secoes-gerar__botao {
  border: 1px solid #00000009;
  border-radius: 999px;
  background: #f5f5f5;
  color: #202123;
  padding: 15px 30px;
  min-height: 48px;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.secoes-gerar__botao:disabled { opacity: .6; cursor: wait; }
.secoes-gerar--atualizar { min-height: auto; padding-top: 32px; }

/* Recording guides: quiet surfaces, clear hierarchy and practical previews. */
#blog { --guide-ink: #202123; --guide-muted: #6b6d70; --guide-line: #e7e7e7; color: var(--guide-ink); }
.recording-overview, .recording-reader { max-width: 1120px; width: 100%; margin-inline: auto; }
.recording-heading { display: grid; gap: 16px; padding: 16px 0 36px; max-width: 720px; }
.recording-eyebrow { font-size: 10px; line-height: 1.5; font-weight: 500; letter-spacing: .11em; color: var(--guide-muted, #6b6d70); text-transform: uppercase; }
.recording-heading .pagina__titulo { font-size: clamp(28px, 3vw, 38px); line-height: 1.16; letter-spacing: -.045em; font-weight: 500; color: var(--guide-ink); }
.recording-heading > p { max-width: 590px; font-size: 15px; line-height: 1.7; color: var(--guide-muted); }
.recording-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--guide-muted); }
.recording-meta > span { padding: 6px 10px; border-radius: 6px; background: #f1f1ef; }
.creation-blocks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; align-items: stretch; }
.creation-block { min-width: 0; max-width: none; width: 100%; height: auto; display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 20px 20px 22px; border: 1px solid var(--guide-line); border-radius: 18px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.creation-block:hover { background: #FAF9F7; }
.creation-block:focus-visible { outline: 2px solid #E6DED3; outline-offset: 2px; }
.creation-block:active { transform: none; background: #FAF9F7; }
.creation-block > .post__texto { display: grid; grid-template-rows: auto auto; gap: 9px; }
.creation-block .post__titulo { display: block; overflow: visible; font-size: 19px; line-height: 1.3; letter-spacing: -.025em; color: var(--guide-ink); overflow-wrap: anywhere; }
.creation-block .post__chamada { font-size: 13px; line-height: 1.6; color: var(--guide-muted); -webkit-line-clamp: 2; line-clamp: 2; }
.recording-circle { width: 42px; height: 42px; border: 1px solid #dedee0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #fff; color: #27282a; }
.recording-reader .pagina__topo--leitura { padding: 0 0 22px; margin-bottom: 32px; border-bottom-color: var(--guide-line); justify-content: space-between; gap: 12px; }
.recording-reader .pagina__voltar { flex: 0 1 auto; gap: 7px; font-size: 13px; min-height: 44px; height: auto; color: #5c5e61; text-align: left; }
.recording-navigation { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.recording-direction:hover:not(:disabled) { background: #f2f2f2; border-color: #b3b4b5; }
.recording-direction:active:not(:disabled) { background: #e9e9e9; }
.recording-direction:disabled { opacity: .3; cursor: default; }
.recording-position { font-size: 13px; color: #292a2c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.recording-position > span { color: #96979a; }
.recording-reader .leitura { max-width: none; gap: 32px; }
.recording-reader .leitura__cabeca { display: grid; justify-items: start; gap: 14px; max-width: 820px; }
.recording-reader .leitura__titulo { font-size: clamp(27px, 3.3vw, 42px); line-height: 1.18; letter-spacing: -.045em; font-weight: 500; color: var(--guide-ink); overflow-wrap: anywhere; }
.recording-reader .leitura__titulo:focus { outline: none; }
.recording-reader .leitura__chamada { font-size: 15px; line-height: 1.7; color: var(--guide-muted); max-width: 650px; }
.recording-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--guide-line); border-radius: 8px; background: #fff; font-size: 12px; color: #45464a; }
.recording-copy:hover { background: #f5f5f5; }
.recording-copy-status { font-size: 12px; color: var(--guide-muted); }
.recording-copy-status:empty { display: none; }
.recording-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.recording-steps { gap: 20px; }
.recording-step { padding: 28px; border: 1px solid var(--guide-line); border-radius: 16px; background: #fff; min-width: 0; }
.recording-step__head { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.recording-step__head > div { flex: 1; }
.recording-step__head h3 { margin-top: 0; font-size: 19px; letter-spacing: -.02em; font-weight: 500; color: #26272a; }
.recording-suggestion { font-size: 10px; border-radius: 5px; background: #f5f5f4; padding: 5px 7px; color: var(--guide-muted); }
.recording-step .leitura__corpo { font-size: 15px; line-height: 1.85; color: #3b3c3f; overflow-wrap: anywhere; }
.recording-step .leitura__corpo ul, .recording-step .leitura__corpo ol { padding-left: 22px; }
.recording-step .leitura__corpo li + li { margin-top: 8px; }
.recording-step .leitura__corpo blockquote { border-left: 2px solid #bbb; margin: 18px 0; padding: 2px 0 2px 18px; }
.recording-step__tip { display: flex; gap: 9px; border-top: 1px solid #efefef; padding-top: 16px; margin-top: 22px !important; color: var(--guide-muted); font-size: 12px; line-height: 1.7; }
.recording-step__tip > span { flex: none; padding-top: 2px; }







.recording-finish { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--guide-line); padding-top: 24px; }
.recording-finish > span { font-size: 12px; color: var(--guide-muted); line-height: 1.5; }
.recording-next { display: inline-flex; flex-shrink: 0; align-items: center; gap: 12px; min-height: 44px; border-radius: 999px; padding: 10px 18px; background: #242527; color: #fff; font-size: 12px; }
.recording-next:hover { background: #424346; }
.recording-reader button:focus-visible { outline: 2px solid #28292c; outline-offset: 4px; }
@media (max-width: 760px) {
  .recording-workspace { grid-template-columns: minmax(0, 1fr); gap: 18px; }

  .recording-step { padding: 20px; }
  .recording-reader .pagina__voltar { font-size: 12px; }
  .recording-navigation { gap: 9px; }
  .recording-circle { width: 44px; height: 44px; }
  .recording-heading { padding-top: 8px; }
  .recording-finish { flex-wrap: wrap; }
  .recording-reader .leitura { gap: 26px; }
}

.recording-ready { margin: 20px 0 8px !important; font-size: 14px; line-height: 1.6; color: #626262; }
.recording-ready[hidden] { display: none; }
.recording-ready button { display: inline; border: 0; padding: 0; background: transparent; color: #202123; font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.creation-block > .post__texto { flex: 1; min-width: 0; }
.creation-block > .recording-circle { flex: none; width: 32px; height: 32px; }