/*
 * Estilo do motor — DELIBERADAMENTE mínimo.
 *
 * Quem manda no visual é o tema que o editor escolheu (NewsBlogger).
 * Aqui entra só o que o tema não tem como saber que existe: o muro do
 * Aprofundamento, o índice que salta o áudio e o gradiente da
 * logomarca marcando o conteúdo exclusivo.
 *
 * Nada de fonte, nada de cor de fundo de página, nada de largura de
 * coluna: mexer nisso seria brigar com o tema.
 */

:root {
  /* As quatro paradas amostradas da própria logomarca do Tectônica. */
  --tecm-gradiente: linear-gradient(100deg, #02bb77 0%, #029990 30%, #266ba5 58%, #751fdb 100%);
  --tecm-esmeralda: #02bb77;
  --tecm-violeta: #751fdb;
}

/* ---------------------------------------------------------------- */
/* O muro do Aprofundamento                                          */
/* ---------------------------------------------------------------- */

.tecm-muro {
  border: 2px solid transparent;
  border-radius: 12px;
  background-image: linear-gradient(var(--tecm-fundo, rgba(0, 0, 0, .04)), var(--tecm-fundo, rgba(0, 0, 0, .04))), var(--tecm-gradiente);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 26px 28px;
  margin: 28px 0;
}
.tecm-muro h3 { margin: 0 0 8px; font-size: 1.25em; line-height: 1.3; }
.tecm-muro p { margin: 0 0 10px; }
.tecm-muro-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8em;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--tecm-esmeralda);
}
.tecm-muro-acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0 0; }
.tecm-botao {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--tecm-gradiente);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
.tecm-botao:hover { opacity: .9; color: #fff; }
.tecm-entrar { text-decoration: underline; opacity: .8; }
.tecm-cadeado { flex: none; vertical-align: -2px; }

/* ---------------------------------------------------------------- */
/* O player com índice                                               */
/* ---------------------------------------------------------------- */

.tecm-episodio { margin: 24px 0; }
.tecm-episodio-titulo { margin: 0 0 2px; line-height: 1.25; }
.tecm-episodio-data {
  margin: 0 0 12px;
  font-size: .8em;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}
.tecm-player { width: 100%; }
.tecm-sem-audio { font-style: italic; opacity: .75; }

/* O índice rola sozinho quando a edição é longa — 17 capítulos não
   podem empurrar o resto da página para fora da tela. */
.tecm-indice {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid rgba(128, 128, 128, .25);
  border-radius: 10px;
}
.tecm-indice li { margin: 0; }
.tecm-indice a {
  display: block;
  padding: 9px 14px;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 1px solid rgba(128, 128, 128, .15);
}
.tecm-indice li:last-child a { border-bottom: none; }
.tecm-indice a:hover { background: rgba(2, 187, 119, .1); }
.tecm-indice a[aria-current="true"] {
  background: rgba(2, 187, 119, .16);
  font-weight: bold;
}
.tecm-num { display: inline-block; min-width: 2.2em; opacity: .55; font-style: italic; }
.tecm-tempo { opacity: .55; font-style: italic; }

/* ---------------------------------------------------------------- */
/* Os Aprofundamentos em destaque                                    */
/* ---------------------------------------------------------------- */

.tecm-exclusivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}
/* A borda no gradiente da logomarca: a identidade visual marcando o
   exclusivo sem precisar de legenda. CSS não pinta borda com
   gradiente, então são dois fundos — o do quadro preso à caixa
   interna, o gradiente preso à caixa da borda. */
.tecm-exclusivo {
  display: block;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  background-image: linear-gradient(var(--tecm-fundo, rgba(0, 0, 0, .04)), var(--tecm-fundo, rgba(0, 0, 0, .04))), var(--tecm-gradiente);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: transform .15s;
}
.tecm-exclusivo:hover { transform: translateY(-3px); }
.tecm-exclusivo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.tecm-exclusivo-texto { padding: 14px 16px 16px; }
.tecm-exclusivo h3 { margin: 0 0 6px; font-size: 1.05em; line-height: 1.35; }
.tecm-subtitulo { margin: 0; font-style: italic; opacity: .75; font-size: .92em; line-height: 1.5; }
.tecm-selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 7px;
  font-size: .72em;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: bold;
  background: var(--tecm-gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* O cadeado fica no esmeralda que abre o gradiente: o recorte do
   gradiente apagaria o desenho junto com o texto. */
.tecm-selo .tecm-cadeado { color: var(--tecm-esmeralda); }

@media (prefers-color-scheme: dark) {
  :root { --tecm-fundo: rgba(255, 255, 255, .06); }
}

/* ---------------------------------------------------------------- */
/* A barra de acesso (Criar conta / Entrar) — só para deslogados     */
/* ---------------------------------------------------------------- */

/* No CANTO INFERIOR direito, e não no topo: no topo ela colidia com o
   menu do tema ("Episódios" por cima do "Entrar" — defeito real de
   29/08). Embaixo, nenhum menu de tema jamais disputa o lugar.
   E com FUNDO PRÓPRIO sempre escuro e texto sempre branco: a versão
   que herdava a cor do texto sumia no tema claro. */
.tecm-acesso {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  background: rgba(13, 11, 18, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 6px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.tecm-acesso a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tecm-acesso-entrar { color: #fff; opacity: .92; padding: 7px 12px; border-radius: 999px; }
.tecm-acesso-entrar:hover { opacity: 1; color: #fff; background: rgba(255, 255, 255, .1); }
.tecm-acesso-criar {
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--tecm-gradiente);
  color: #fff;
  font-weight: bold;
}
.tecm-acesso-criar:hover { opacity: .9; color: #fff; }
@media (max-width: 600px) {
  .tecm-acesso { bottom: 12px; right: 12px; font-size: 13px; }
}

/* ---------------------------------------------------------------- */
/* O cadastro ampliado na tela de registro do WordPress              */
/* ---------------------------------------------------------------- */

.login form .tecm-interesses {
  border: 1px solid #c3c4c7;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 14px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.login form .tecm-interesses legend { padding: 0 4px; font-size: 13px; }
.login form .tecm-interesses label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.login form .tecm-interesses input[type="checkbox"] { margin: 0; }
.login form select.input { height: 40px; }
.tecm-aviso-coleta { font-size: 12px; line-height: 1.5; opacity: .75; margin-top: 14px; }
/* O formulário cresceu: dá fôlego à caixa padrão do WordPress. */
.login #registerform { padding-bottom: 20px; }

/* ---------------------------------------------------------------- */
/* O painel "Perfil dos leitores"                                    */
/* ---------------------------------------------------------------- */

.tecm-painel h2 { margin-top: 26px; }
.tecm-linha { display: flex; align-items: center; gap: 10px; margin: 5px 0; max-width: 680px; }
.tecm-rotulo { flex: 0 0 180px; font-size: 13px; text-align: right; }
.tecm-barra-fundo { flex: 1; background: rgba(128, 128, 128, .15); border-radius: 6px; overflow: hidden; height: 18px; }
.tecm-barra { display: block; height: 100%; background: linear-gradient(100deg, #02bb77, #266ba5); }
.tecm-quantidade { flex: 0 0 40px; font-size: 13px; font-weight: bold; }

/* ---------------------------------------------------------------- */
/* A escolha da newsletter no cadastro                               */
/* ---------------------------------------------------------------- */

.login form .tecm-newsletter {
  border: 2px solid transparent;
  border-radius: 8px;
  background-image: linear-gradient(#fff, #fff), linear-gradient(100deg, #02bb77, #029990, #266ba5, #751fdb);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  padding: 12px 14px;
  margin: 16px 0;
}
.login form .tecm-newsletter legend { padding: 0 4px; font-weight: bold; font-size: 13px; }
.tecm-beneficios { margin: 4px 0 10px 16px; padding: 0; font-size: 13px; line-height: 1.6; }
.login form .tecm-newsletter label { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; margin: 6px 0; }
.login form .tecm-newsletter input[type="radio"] { margin-top: 2px; }