/*
 * Estilo do motor — DELIBERADAMENTE mínimo.
 *
 * Quem manda no visual é o tema que o editor escolheu (ContrastNews,
 * filho do CoverNews). 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. A ÚNICA exceção é o
 * selo de categoria, no fim deste arquivo — o vermelho de fábrica
 * brigava com a identidade da casa.
 */

: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 {
  position: relative;
  border: 2px solid rgba(38, 107, 165, .55);
  border-radius: 12px;
  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                                               */
/* ---------------------------------------------------------------- */

/* A galeria das edições — cartões clicáveis, da mais nova à mais antiga */
.tecm-edicoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.tecm-edicao-cartao {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  padding: 10px;
  border: 1.5px solid rgba(38, 107, 165, .35);
  transition: transform .15s ease, border-color .15s ease;
}
.tecm-edicao-cartao:hover {
  transform: translateY(-2px);
  border-color: #02bb77;
}
.tecm-edicao-capa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}
.tecm-edicao-sem-capa {
  background: linear-gradient(135deg, #02bb77, #266ba5);
}
.tecm-edicao-data {
  display: block;
  font-size: .72em;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 4px;
}
.tecm-edicao-titulo {
  display: block;
  line-height: 1.3;
  font-size: .95em;
}

.tecm-episodio { margin: 24px 0; }
.tecm-episodio-capa {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 12px;
  margin: 0 0 14px;
}
.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;
  position: relative;
  border: 2px solid rgba(38, 107, 165, .55);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  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; }


/* ---------------------------------------------------------------- */
/* O PLAYER DA MATÉRIA — casca própria, borda no gradiente da marca  */
/* ---------------------------------------------------------------- */

.tecm-audio {
  position: relative;
  border: 2px solid rgba(38, 107, 165, .55);
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin: 0 0 26px;
}
/* O <audio> real fica escondido: quem toca é ele, quem aparece é a
   nossa casca — o player nativo muda de cara em cada navegador. */
.tecm-audio audio { display: none; }

.tecm-audio-controles { display: flex; align-items: center; gap: 10px; }

.tecm-play {
  flex: none;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--tecm-gradiente);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform .12s, opacity .12s;
}
.tecm-play:hover { transform: scale(1.06); }
.tecm-play .tecm-i-pausa { display: none; }
.tecm-tocando .tecm-play .tecm-i-play { display: none; }
.tecm-tocando .tecm-play .tecm-i-pausa { display: inline; }

.tecm-tempo-atual, .tecm-tempo-total {
  flex: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  opacity: .75;
  min-width: 42px;
  text-align: center;
}

/* As barras: trilho neutro, parte já tocada no gradiente da marca.
   O preenchimento vem da variável que o script atualiza. */
/* O trilho é ESCURO e sólido, não um cinza translúcido: a versão
   anterior sumia contra o fundo claro. Mais alta também — 6px de
   barra quase não se via. */
.tecm-audio input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #02bb77 0%, #266ba5 var(--tecm-preenchido, 0%), #3a3350 var(--tecm-preenchido, 0%));
  border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
  cursor: pointer;
  outline-offset: 3px;
}
.tecm-progresso { flex: 1; min-width: 60px; }
.tecm-volume { flex: 0 1 88px; }

.tecm-audio input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #266ba5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.tecm-audio input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #266ba5;
}

.tecm-mudo {
  flex: none;
  border: none;
  background: none;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
}
.tecm-mudo:hover { opacity: 1; }
/* Silenciado: a onda do ícone some, sinal imediato do estado. */
.tecm-silenciado .tecm-mudo { opacity: .45; }
.tecm-silenciado .tecm-onda { display: none; }

.tecm-audio-legenda {
  font-size: 12.5px;
  line-height: 1.6;
  opacity: .8;
  margin: 10px 0 0;
  font-style: italic;
}
/* O link carrega o PRÓPRIO contraste: pílula no gradiente da marca com
   texto branco. Cor de texto solta sempre cede num dos dois fundos —
   a que lia no claro sumia no escuro e vice-versa. Assim ele se
   destaca em qualquer tema, e ainda parece o convite que é. */
.tecm-link-edicao {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--tecm-gradiente);
  color: #fff;
  font-style: normal;
  font-weight: bold;
  font-size: 12.5px;
  text-decoration: none;
}
.tecm-link-edicao:hover { opacity: .88; color: #fff; text-decoration: none; }

/* Em tela estreita o volume sai de cena: a barra de progresso é o que
   importa, e espremer os dois deixaria ambos inutilizáveis. */
@media (max-width: 520px) {
  .tecm-volume { display: none; }
  .tecm-mudo { margin-left: auto; }
}

/* ---------------------------------------------------------------- */
/* A BORDA NO GRADIENTE DA MARCA                                     */
/* ---------------------------------------------------------------- */

/*
 * Um ANEL de gradiente com o miolo TRANSPARENTE, para a cor de fundo
 * da página aparecer por dentro seja ela qual for.
 *
 * A tentativa anterior mascarava o miolo com uma cor opaca — e errava
 * feio: pintava de branco a caixa dentro de uma página escura, porque
 * a cor do sistema segue o tema do NAVEGADOR, não o da página. Aqui o
 * gradiente é recortado em anel e nada é pintado por dentro.
 *
 * A borda azul sólida declarada acima é a RESERVA: onde o recorte não
 * existir, a caixa ainda tem borda visível na cor da marca.
 */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .tecm-audio, .tecm-muro, .tecm-exclusivo { border-color: transparent; }

  .tecm-audio::before,
  .tecm-muro::before,
  .tecm-exclusivo::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: var(--tecm-gradiente);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
  }
  /* O cartão recorta o que passa da borda; o anel precisa ficar por
     cima da imagem, não por baixo dela. */
  .tecm-exclusivo::before { inset: 0; }
}

/* ---------------------------------------------------------------- */
/* A galeria de avatares                                             */
/* ---------------------------------------------------------------- */

.tecm-avatares { border: 1px solid #c3c4c7; border-radius: 6px; padding: 10px 12px; margin: 16px 0; }
.tecm-avatares legend { padding: 0 4px; font-weight: bold; font-size: 13px; }
.tecm-avatares-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  /* A escala do avatar em foco vazava 4px para o lado e criava uma
     barra horizontal na grade. O respiro absorve o crescimento. */
  overflow-x: hidden;
  padding: 6px;
}
.tecm-avatar-opcao { display: block; cursor: pointer; position: relative; margin: 0; }
/* O rádio some da vista mas continua existindo: é ele que guarda a
   escolha e dá o acesso pelo teclado. */
.tecm-avatar-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.tecm-avatar-opcao img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
  border: 3px solid transparent;
  transition: transform .12s, border-color .12s;
}
.tecm-avatar-opcao:hover img { transform: scale(1.08); }
/* O escolhido ganha o anel esmeralda da marca. */
.tecm-avatar-opcao input:checked + img { border-color: #02bb77; transform: scale(1.06); }
.tecm-avatar-opcao input:focus-visible + img { outline: 2px solid #266ba5; outline-offset: 2px; }

/* ---------------------------------------------------------------- */
/* Compartilhamento no rodapé da matéria                             */
/* ---------------------------------------------------------------- */

.tecm-compartilhar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(128, 128, 128, .25);
}
.tecm-compartilhar-rotulo {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .65;
}
/* Pílula neutra que herda a cor do texto do tema — legível em fundo
   claro e escuro, sem depender de cor fixa (lição da barra de acesso). */
.tecm-compartilhar-botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  color: inherit;
  opacity: .8;
  transition: opacity .12s, transform .12s;
}
.tecm-compartilhar-botao:hover { opacity: 1; transform: translateY(-1px); color: inherit; }

/* ---------------------------------------------------------------- */
/* O SELO DE CATEGORIA — violeta da logomarca no lugar do vermelho   */
/* ---------------------------------------------------------------- */
/* O CoverNews pinta a etiqueta de categoria com o vermelho #bb1919,
   que destoa da identidade do Tectônica. Aqui ele vira o violeta que
   fecha o gradiente da logomarca — nos dois modos do selo: o de fundo
   cheio (nas capas grandes) e o de texto puro (nas listas). */

.figure-categories .cat-links a.covernews-categories,
.figure-categories .cat-links a.covernews-categories.category-color-1,
.aft-main-banner-slider-grid .trending-story .figure-categories .cat-links a.covernews-categories,
.full-plus-list .spotlight-post:first-of-type .figure-categories .cat-links a.covernews-categories {
  background-color: var(--tecm-violeta);
  color: #fff;
}

/* NADA de etiqueta sem caixa (corrigido em 31/08/2026): estas eram as
   listas em que o tema mostra só o texto colorido — e eu havia
   copiado esse comportamento, o que anulava o padrão do site. Agora
   TODA etiqueta é igual: letra branca sobre roxo. */

/* O título de cada seção da capa herda o mesmo violeta no filete. */
.covernews-section-title-wrapper .covernews-section-title::before,
.section-title::before {
  background-color: var(--tecm-violeta);
}

/* ---------------------------------------------------------------- */
/* IDENTIDADE SOBRE O TEMA — o vermelho de fábrica sai de cena       */
/* ---------------------------------------------------------------- */
/* O CoverNews pinta TUDO de vermelho #bb1919: filete dos títulos de
   seção, números do carrossel, botão de busca, faixa do plantão,
   hover de todo link. Nada disso tem opção no Personalizador, então a
   troca é aqui — roxo #751fdb (o fim do gradiente) para as barras de
   seção, esmeralda #02bb77 (o começo) para ação e destaque. */

/* 1. Filete embaixo dos títulos de seção → roxo */
span.border-after,
.main-story-wrapper span.border-after,
.widget-title-section .widget-title::after,
.covernews-section-title::after,
.section-title::after,
h4.widget-title::after,
.af-tabs.nav-tabs > li > a:hover:after {
  background: var(--tecm-violeta) !important;
  background-color: var(--tecm-violeta) !important;
}

/* 2. Busca: campo com contorno da marca, botão em esmeralda */
.wp-block-search__button,
.site-content .search-form .search-submit,
.site-footer .search-form .search-submit,
.search-form .search-submit,
button, input[type="button"], input[type="reset"], input[type="submit"] {
  background: var(--tecm-esmeralda) !important;
  border-color: var(--tecm-esmeralda) !important;
  color: #fff !important;
}
.af-search-form .search-form,
.search-form .search-field {
  border-color: rgba(2, 187, 119, .55) !important;
}
.search-form .search-field:focus {
  outline: 2px solid var(--tecm-esmeralda);
  outline-offset: 1px;
}

/* 3. Faixa do plantão (Segurança digital) → esmeralda */
.exclusive-posts .exclusive-now {
  background: var(--tecm-esmeralda) !important;
  color: #fff !important;
}

/* 4. Numeração do carrossel de episódios → roxo */
.trending-no,
span.trending-no {
  background: var(--tecm-violeta) !important;
  color: #fff !important;
}

/* 5. Hover de TODO link do site → esmeralda */
a:hover, a:focus, a:active,
body .hentry .entry-header-details .post-excerpt a.aft-readmore:hover,
body.dark .post-description .aft-readmore-wrapper a.aft-readmore:hover,
body.default .post-description .aft-readmore-wrapper a.aft-readmore:hover,
body.dark .grid-item-metadata .posts-date a:hover,
body.dark .grid-item-metadata .posts-author a:hover,
body.dark .aft-comment-count a:hover,
body.dark .aft-view-count a:hover,
.article-title a:hover,
.slide-title a:hover,
.entry-title a:hover,
.widget ul li a:hover,
.wp-block-categories-list a:hover,
.tagcloud a:hover {
  color: var(--tecm-esmeralda) !important;
}
/* Nas etiquetas com fundo, o hover pinta o fundo — não o texto. */
.tagcloud a:hover,
.wp-block-tag-cloud.is-style-outline a:hover {
  background: var(--tecm-esmeralda) !important;
  color: #fff !important;
}

/* 6. Varredura: outros pontos vermelhos do tema */
#scroll-up::after { border-bottom-color: var(--tecm-violeta) !important; }
#wp-calendar caption, #wp-calendar td#today { color: var(--tecm-violeta) !important; }
#infinite-handle span { background: var(--tecm-esmeralda) !important; }
.wp-element-button, .wp-block-button.is-style-fill a {
  background: var(--tecm-esmeralda) !important;
  border-color: var(--tecm-esmeralda) !important;
}
.wp-block-button.is-style-outline a {
  border-color: var(--tecm-esmeralda) !important;
  color: var(--tecm-esmeralda) !important;
}
:is(.social-navigation, .social-widget-menu, .em-author-details) ul li a {
  background: var(--tecm-violeta);
}

/* ---------------------------------------------------------------- */
/* A LISTA DE EDITORIAS — duas colunas, cada linha com o gradiente   */
/* ---------------------------------------------------------------- */

.wp-block-categories-list,
.widget_categories > ul,
.widget_block .wp-block-categories-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-block-categories-list li,
.widget_categories > ul > li {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(38, 107, 165, .45); /* reserva */
  line-height: 1.3;
}
.wp-block-categories-list li a,
.widget_categories > ul > li a {
  text-decoration: none;
  display: block;
}
/* Onde o navegador sabe recortar, a borda vira o gradiente da marca
   sem pintar o miolo — o mesmo truque do muro do Aprofundamento. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .wp-block-categories-list li,
  .widget_categories > ul > li { border-color: transparent; }
  .wp-block-categories-list li::before,
  .widget_categories > ul > li::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--tecm-gradiente);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}
@media (max-width: 480px) {
  .wp-block-categories-list,
  .widget_categories > ul { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- */
/* A COLUNA DOS EPISÓDIOS COMPLETOS (no lugar do "Trending")         */
/* ---------------------------------------------------------------- */

.tecm-lista-episodios {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: episodio;
}
.tecm-lista-episodios li { margin: 0 0 12px; }
.tecm-lista-episodios a {
  display: grid;
  grid-template-columns: 26px 72px 1fr;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px;
  border-radius: 10px;
}
.tecm-lista-episodios a:hover { background: rgba(2, 187, 119, .08); }
.tecm-ep-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tecm-violeta);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.tecm-ep-capa {
  width: 72px;
  height: 41px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.tecm-ep-texto { display: block; min-width: 0; }
.tecm-ep-data {
  display: block;
  font-size: .68em;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .65;
}
.tecm-ep-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .86em;
  line-height: 1.35;
}

/* O seletor claro/escuro sai do ar: o Tectonica e escuro, ponto. */
#aft-dark-light-mode-wrap,
#aft-dark-light-mode-btn { display: none !important; }

/* CORRECAO 31/08/2026: o filete do titulo de secao e
   span.header-after:after (um so dois-pontos, e nao ::after em
   outra classe). Os seletores abaixo sao os do proprio tema. */
span.header-after:after,
span.header-after::after,
.widget-title span:after,
#secondary .widget-title span:after,
.covernews-heading-style:after,
.em-reated-posts .related-title:after,
.wp-block-group .wp-block-heading:after,
.widget_block .wp-block-heading:after,
.widget_block .wp-block-search__label:after,
.wp-block-group .wp-block-search__label:after {
  background: #751fdb !important;
  background-color: #751fdb !important;
}

/* O vermelho do tema-filho: ContrastNews usa #E50914 (e nao o
   #bb1919 do pai), com seletores prefixados por body. Mapeado
   linha a linha do style.css dele em 31/08/2026. */

body span.header-after:after,
body #secondary .widget-title span:after,
body .af-tabs.nav-tabs>li>a.active:after,
body .af-tabs.nav-tabs>li>a:hover:after {
  background: #751fdb !important;
}
body span.trending-no,
span.trending-no,
.tecm-ep-numero {
  background: #751fdb !important;
  color: #fff !important;
}
body .wp-block-tag-cloud.is-style-outline a:hover,
body .tagcloud a:hover {
  background: #02bb77 !important;
  color: #fff !important;
}
body.dark .grid-item-metadata .posts-date a:hover,
body.dark .grid-item-metadata .posts-author a:hover,
body.dark .aft-full-title-first .author-links a:hover,
body.dark .aft-comment-count a:hover,
body.dark .aft-view-count a:hover,
body .figure-categories-2 .cat-links a,
body .tabbed-story .figure-categories .cat-links a.covernews-categories,
body .covernews_tabbed_posts_widget .figure-categories .cat-links a.covernews-categories,
body .list .spotlight-post .figure-categories .cat-links a.covernews-categories,
body .full-plus-list .spotlight-post .figure-categories .cat-links a.covernews-categories,
body .trending-posts-vertical-carousel .figure-categories .cat-links a.covernews-categories,
body .trending-story .figure-categories .cat-links a.covernews-categories {
  color: #751fdb !important;
}
body h3.covernews-subtitle,
body .sp-thumbnail-container.sp-selected-thumbnail:before,
body #loader:after {
  border-left-color: #751fdb !important;
}
#scroll-up::after { border-bottom-color: #751fdb !important; }
body .wp-element-button,
body .wp-block-button.is-style-fill a,
body .wp-block-button.is-style-outline a,
body .covernews-post-badge {
  border-color: #02bb77 !important;
}

/* ---------------------------------------------------------------- */
/* A FAIXA DE APRESENTACAO — diferencial e honestidade editorial     */
/* ---------------------------------------------------------------- */

.tecm-apresentacao { margin: 34px 0 10px; }
.tecm-apresentacao-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.tecm-cartao-apresentacao {
  position: relative;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1.5px solid rgba(38, 107, 165, .45);
}
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .tecm-cartao-apresentacao { border-color: transparent; }
  .tecm-cartao-apresentacao::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--tecm-gradiente);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}
.tecm-apresentacao-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72em;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--tecm-esmeralda);
  margin-bottom: 8px;
}
.tecm-cartao-metodo .tecm-apresentacao-selo { color: #a06bff; }
.tecm-cartao-apresentacao h2 {
  font-size: 1.15em;
  line-height: 1.35;
  margin: 0 0 10px;
}
.tecm-cartao-apresentacao h2:after,
.tecm-cartao-apresentacao h2 span:after { content: none !important; }
.tecm-cartao-apresentacao p {
  margin: 0 0 14px;
  font-size: .95em;
  line-height: 1.6;
  opacity: .9;
}
.tecm-apresentacao-link {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--tecm-gradiente);
  color: #fff !important;
  font-weight: bold;
  font-size: .9em;
  text-decoration: none;
}
.tecm-apresentacao-link:hover { opacity: .9; }

/* O aviso de exclusividade sob o titulo da faixa Aprofundamentos */
.tecm-nota-exclusivo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -6px 0 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--tecm-esmeralda);
  border-radius: 0 8px 8px 0;
  background: rgba(2, 187, 119, .08);
  font-size: .9em;
  line-height: 1.5;
}
.tecm-nota-exclusivo .tecm-cadeado { color: var(--tecm-esmeralda); flex: none; margin-top: 3px; }

/* O filete por ::before: o tema-filho pinta os titulos de widget e
   os cabecalhos de bloco por ::before, nao por :after. Faltaram na
   varredura anterior e apareciam vermelhos na pagina do Metodo. */
body .widget-title span::before,
body .em-reated-posts .related-title::before,
body .wp-block-group .wp-block-search__label::before,
body .wp-block-group .wp-block-heading::before,
body .widget_block .wp-block-search__label::before,
body .widget_block .wp-block-heading::before,
body .covernews-heading-style::before,
body span.header-after::before,
body .entry-title::before,
body .entry-title::after,
body h1.entry-title::before,
body h1.entry-title::after {
  background: #751fdb !important;
  background-color: #751fdb !important;
  border-color: #751fdb !important;
}

/* A coluna dos episodios acompanha a altura da vizinha: a lista se
   estica e distribui os itens, em vez de terminar antes e deixar
   um vao embaixo. */
.trending-story { display: flex; flex-direction: column; }
.tecm-coluna-episodios {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.tecm-lista-episodios {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  gap: 6px;
}
.tecm-lista-episodios li { margin: 0; }

/* Correcao 31/08/2026: nas abas (Recentes / Mais lidas / IA) e nas
   listas, o tema mostrava a etiqueta de categoria como texto solto
   e colorido, sem caixa. Volta ao padrao do site: letra branca
   sobre fundo roxo, igual as etiquetas das capas grandes. */
body .tabbed-story .figure-categories .cat-links a.covernews-categories,
body .covernews_tabbed_posts_widget .figure-categories .cat-links a.covernews-categories,
body .list .spotlight-post .figure-categories .cat-links a.covernews-categories,
body .full-plus-list .spotlight-post .figure-categories .cat-links a.covernews-categories,
body .trending-posts-vertical-carousel .figure-categories .cat-links a.covernews-categories,
body .trending-story .figure-categories .cat-links a.covernews-categories,
.aft-main-banner-slider-list-tabbed .af-main-banner-editors-picks .figure-categories .cat-links a.covernews-categories,
.aft-main-banner-slider-list .af-main-banner-editors-picks .figure-categories .cat-links a.covernews-categories {
  background-color: #751fdb !important;
  color: #fff !important;
  padding: 3px 9px !important;
  border-radius: 4px;
  line-height: 1.3;
  margin-right: 5px;
  margin-top: 5px;
  opacity: 1;
  display: inline-block;
}
body .figure-categories .cat-links a.covernews-categories:hover {
  background-color: #02bb77 !important;
  color: #fff !important;
}

/* REGRA FINAL DA ETIQUETA (31/08/2026). As tentativas anteriores
   falharam por dois motivos meus: (1) prefixei seletores com
   'body ' quando a classe estava NO PROPRIO body — o espaco exige
   um descendente e a regra nunca casava; (2) eu mesmo mandava
   fundo transparente nas listas. Esta regra e a ultima do arquivo
   e vale para qualquer etiqueta, em qualquer secao. */
.cat-links a.covernews-categories,
.cat-links li.meta-category a,
.figure-categories .cat-links a {
  background-color: #751fdb !important;
  color: #fff !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  display: inline-block !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
}
.cat-links a.covernews-categories:hover,
.cat-links li.meta-category a:hover,
.figure-categories .cat-links a:hover {
  background-color: #02bb77 !important;
  color: #fff !important;
}