/* ==========================================================================
   BOA ESCOLHA TECH — layout de referência (docs/referencia, 10/09/2026)

   Carregado DEPOIS do style.css (functions.php) e só sobrescreve. Duas
   camadas:
     1. os tokens do style.css redefinidos — cor, fonte, raio, sombra. Como
        quase tudo no tema lê os tokens, artigos, fichas e categorias mudam
        junto sem regra nova;
     2. os blocos novos da home (classes `be-*`, front-page.php) e os pontos
        onde a troca de token sozinha dá errado.

   O lima (#C8E92E) do tema antigo era fundo de botão com tinta grafite. O
   azul que o substitui no mesmo token pede tinta BRANCA — grafite sobre azul
   não passa em contraste —, por isso botões e bloco de afiliado são
   redefinidos abaixo, e não só herdados.

   Contraste medido: #1759C9 (acento como texto) sobre branco = 5,6:1;
   #64728C (texto suave) sobre branco = 4,7:1; #72B5FF sobre #0D2144 = 7,0:1.
   ========================================================================== */

:root {
  --be-azul:      #1f7aff;
  --be-azul-2:    #465cf3;
  --be-azul-texto:#1759c9;
  --be-azul-claro:#72b5ff;
  --be-navy:      #0d2144;
  --be-texto:     #15233c;
  --be-suave:     #64728c;
  --be-linha:     #e4eaf2;
  --be-fundo:     #f5f8fc;
  --be-raio:      18px;
  --be-sombra:    0 14px 35px rgba(19, 42, 78, .10);

  --setup-ink:        var(--be-navy);
  --setup-ink-2:      #10284f;
  --setup-ink-soft:   #15233c;
  --setup-steel:      var(--be-suave);
  --setup-lime:       var(--be-azul);
  --setup-lime-dark:  #1668e0;
  --setup-olive:      var(--be-azul-texto);
  --setup-ice:        var(--be-fundo);
  --setup-ice-2:      #eef3fa;
  --setup-card:       #eef3fa;
  --setup-white:      #ffffff;

  --setup-text:       var(--be-texto);
  --setup-text-muted: #4f5d76;
  --setup-text-soft:  var(--be-suave);
  --setup-border:     var(--be-linha);
  --setup-border-soft:#eef2f7;

  --setup-footer-text:  #4f5d76;
  --setup-footer-muted: var(--be-suave);
  --setup-footer-border:var(--be-linha);

  --setup-font-heading: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --setup-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --setup-radius-card: 14px;
  --setup-radius-btn:  10px;
  --setup-shadow:      var(--be-sombra);
  --setup-shadow-lift: 0 18px 40px -12px rgba(19, 42, 78, .20);
  --setup-wrap:        1180px;
}

/* --- faixa de prévia (só para quem está logado e edita o site) ------------- */
.be-previa {
  background: #fff4d6;
  color: #5c4400;
  border-bottom: 1px solid #f1d58a;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  padding: 8px 16px;
}
.be-previa strong { color: #3d2d00; }

/* --- base ------------------------------------------------------------------ */
body { background: var(--be-fundo); }
body.home { background: #ffffff; }
h1, h2, h3, h4, .entry-title, .entry-title a { font-weight: 700; color: var(--be-texto); }
a:hover, a:focus { color: var(--be-azul-texto); }

.be-wrap {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* --- cabeçalho ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--be-linha);
  padding-block: 0;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header .inside-header { background: #ffffff; padding-block: 10px; }
.site-logo img { height: 62px; }

.main-navigation .main-nav ul li a {
  color: #183053;
  font-weight: 600;
  font-size: 14.5px;
}
.main-navigation .main-nav ul li a::after { bottom: 0; height: 3px; border-radius: 3px; background: var(--be-azul); }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--be-texto); }
.main-navigation .menu-bar-items,
.main-navigation .menu-bar-item > a { color: #183053; }
.main-navigation .menu-bar-item > a:hover { color: var(--be-azul-texto); }
.menu-toggle, .main-navigation .menu-toggle { color: #183053; }

/* --- botões e afiliado ----------------------------------------------------- */
.button, .wp-block-button__link, input[type="submit"], .setup-btn {
  background: linear-gradient(135deg, var(--be-azul), #1c8bff);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(31, 122, 255, .22);
}
.button:hover, .wp-block-button__link:hover, .setup-btn:hover {
  background: #1668e0;
  color: #ffffff;
}
.setup-affiliate-slot--ativo {
  background: linear-gradient(135deg, var(--be-azul), #1c8bff);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(31, 122, 255, .25);
}
.setup-affiliate-slot--ativo:hover { background: #1668e0; color: #ffffff; }

/* Onde o lima era TEXTO sobre fundo escuro, o azul-claro passa (7,0:1). */
.setup-band--dark .setup-eyebrow,
.setup-metodo li::before,
.setup-nota__num { color: var(--be-azul-claro); }
.setup-destaque__caixa h2 a:hover { color: var(--be-azul-claro); }

/* --- artigo e ficha -------------------------------------------------------- */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container {
  border: 1px solid var(--be-linha);
  border-radius: var(--be-raio);
  box-shadow: 0 1px 2px rgba(19, 42, 78, .04);
}
.entry-content h2 { border-top-color: var(--be-linha); }
.setup-relacionados { border-radius: 0 14px 14px 0; }

/* --- HOME: libera a largura (a home é feita de faixas) --------------------- */
body.home .site-main > * { margin-bottom: 0; }

.be-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--be-azul-claro);
  margin: 0 0 12px;
}
.be-eyebrow--claro { color: var(--be-azul-texto); }

.be-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.be-btn--primario {
  background: linear-gradient(135deg, var(--be-azul), #1c8bff);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(31, 122, 255, .28);
}
.be-btn--primario:hover, .be-btn--primario:focus { color: #ffffff; filter: brightness(1.06); }
.be-btn img { width: 19px; filter: brightness(0) invert(1); }

/* --- hero ------------------------------------------------------------------ */
.be-hero {
  position: relative;
  overflow: hidden;
  background: #0a1830;
  min-height: 410px;
  display: flex;
}
.be-hero__arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.be-hero__veu {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,16,32,.92) 0%, rgba(5,16,32,.78) 38%, rgba(5,16,32,.18) 72%, rgba(5,16,32,.08) 100%);
}
.be-hero__conteudo { position: relative; z-index: 2; display: flex; align-items: center; padding-block: 56px; }
.be-hero__texto { max-width: 620px; color: #ffffff; }
.be-hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #ffffff;
  margin: 0 0 18px;
}
.be-hero h1 span { color: #2686ff; }
.be-hero__deck { font-size: 18px; line-height: 1.6; color: #dce7f6; max-width: 560px; margin: 0 0 24px; }

/* --- faixa de categorias --------------------------------------------------- */
.be-categorias { background: #ffffff; border-bottom: 1px solid var(--be-linha); }
.be-categorias__lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 0;
  margin-block: 0;
  list-style: none;
}
.be-categorias__lista a {
  min-height: 82px;
  border: 1px solid #edf1f6;
  background: linear-gradient(#ffffff, #f8fafe);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #263955;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.be-categorias__lista a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(14, 43, 79, .08);
  border-color: #dce6f3;
  color: var(--be-texto);
}
.be-categorias__lista img { width: 31px; height: 31px; }

/* --- conteúdo + lateral ---------------------------------------------------- */
.be-conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 335px;
  gap: 28px;
  padding-block: 34px 42px;
}

.be-destaque {
  background: #ffffff;
  border: 1px solid var(--be-linha);
  border-radius: var(--be-raio);
  overflow: hidden;
  box-shadow: var(--be-sombra);
}
.be-destaque__imagem { position: relative; display: block; }
.be-destaque__imagem > img { width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; background: var(--be-fundo); }
.be-selo-destaque {
  position: absolute;
  left: 20px; top: 20px;
  background: var(--be-azul);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
}
.be-destaque__corpo { padding: 20px 22px 22px; }
.be-destaque__corpo h2 { font-size: clamp(1.45rem, 2.4vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; }
.be-destaque__corpo h2 a { color: var(--be-texto); text-decoration: none; }
.be-destaque__corpo h2 a:hover { color: var(--be-azul-texto); }
.be-destaque__corpo p { font-size: 16px; line-height: 1.6; color: var(--be-suave); margin: 0 0 18px; }

.be-meta { display: flex; flex-wrap: wrap; gap: 18px; color: #61708a; font-size: 12.5px; }
.be-meta span { display: flex; align-items: center; gap: 6px; }
.be-meta img { width: 16px; height: 16px; }
.be-meta--compacta { font-size: 11.5px; gap: 12px; margin-top: auto; }

.be-vazio {
  background: linear-gradient(135deg, #f3f8ff, #ffffff);
  border: 1px solid var(--be-linha);
  border-radius: var(--be-raio);
  padding: 34px 30px;
}
.be-vazio h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: 0 0 10px; }
.be-vazio p { color: var(--be-suave); line-height: 1.6; margin: 0; max-width: 60ch; }

.be-secao { margin-top: 34px; }
.be-secao__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.be-secao__topo h2 { font-size: 25px; margin: 0; border-left: 4px solid var(--be-azul); padding-left: 12px; }

.be-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.be-card { display: flex; flex-direction: column; min-width: 0; }
.be-card__imagem > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--be-linha);
  background: var(--be-fundo);
  margin-bottom: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.be-card:hover .be-card__imagem > img { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(14, 43, 79, .08); }
.be-card h3 { font-size: 16px; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 12px; }
.be-card h3 a { color: var(--be-texto); text-decoration: none; }
.be-card h3 a:hover { color: var(--be-azul-texto); }

/* --- lateral --------------------------------------------------------------- */
.be-lateral { display: flex; flex-direction: column; gap: 15px; }
.be-busca, .be-painel, .be-newsletter { border: 1px solid var(--be-linha); border-radius: 14px; background: #ffffff; }

.be-busca { padding: 10px; display: flex; gap: 8px; margin: 0; }
.be-busca input { width: 100%; border: 0; outline: 0; padding: 8px 10px; color: var(--be-texto); background: transparent; }
.be-busca input:focus-visible { outline: 2px solid var(--be-azul-texto); border-radius: 8px; }
.be-busca button {
  border: 0;
  width: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--be-azul-2), var(--be-azul));
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.be-busca button img { width: 22px; filter: brightness(0) invert(1); }

.be-painel { padding: 16px; }
.be-painel h2 { font-size: 18px; margin: 0 0 12px; color: var(--be-navy); }

.be-recente {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #eef2f7;
  text-decoration: none;
  color: var(--be-texto);
}
.be-recente:last-child { border-bottom: 0; }
.be-recente > img { width: 82px; height: 58px; object-fit: cover; border-radius: 8px; border: 1px solid var(--be-linha); background: var(--be-fundo); }
.be-recente b { display: block; font-size: 12.5px; line-height: 1.35; margin-bottom: 4px; }
.be-recente small { display: block; color: #7b88a0; font-size: 11px; }
.be-recente:hover b { color: var(--be-azul-texto); }

.be-guias a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--be-texto);
  text-decoration: none;
  border-bottom: 1px solid #edf1f6;
}
.be-guias a:last-child { border-bottom: 0; }
.be-guias a span { font-size: 20px; line-height: 1; color: #70819b; }
.be-guias a:hover { color: var(--be-azul-texto); }

/* --- newsletter ------------------------------------------------------------ */
.be-newsletter {
  padding: 20px;
  background: linear-gradient(135deg, #0e58d4, #2748d7 55%, #176bff);
  color: #ffffff;
  border: 0;
}
.be-newsletter__icone {
  width: 42px; height: 42px;
  padding: 9px;
  background: rgba(255, 255, 255, .12);
  border-radius: 10px;
  filter: brightness(0) invert(1);
  margin-bottom: 10px;
}
.be-newsletter h2 { font-size: 18px; line-height: 1.3; color: #ffffff; margin: 0 0 8px; }
.be-newsletter p { font-size: 12.5px; line-height: 1.5; color: #dbe8ff; margin: 0 0 14px; }
.be-newsletter form { margin: 0; }
.be-newsletter input[type="email"] {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  color: var(--be-texto);
  background: #ffffff;
}
.be-newsletter__consentimento {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.45;
  color: #e4eeff;
  margin-bottom: 12px;
  cursor: pointer;
}
.be-newsletter__consentimento input { margin-top: 2px; flex: 0 0 auto; }
.be-newsletter button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #1d8bff;
  color: #ffffff;
  font-weight: 800;
  padding: 12px;
  cursor: pointer;
}
.be-newsletter button:hover { background: #3a9aff; }
.be-newsletter input:focus-visible,
.be-newsletter button:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
/* Armadilha anti-robô: fora da tela, mas não `display:none`, que alguns
   robôs reconhecem. aria-hidden no HTML tira dos leitores de tela. */
.be-newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.be-newsletter__aviso { border-radius: 8px; padding: 10px 12px; font-weight: 600; }
.be-newsletter__aviso--ok { background: rgba(255, 255, 255, .16); color: #ffffff; }
.be-newsletter__aviso--erro { background: #ffffff; color: #9b2c1c; }

/* --- selos ----------------------------------------------------------------- */
.be-selos {
  background: linear-gradient(90deg, #edf5ff, #f8fbff);
  border-block: 1px solid #e0eaf6;
}
.be-selos__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 26px 0;
  margin-block: 0;
  list-style: none;
}
.be-selos__lista li { display: flex; align-items: center; gap: 12px; margin: 0; }
.be-selos__lista img { width: 44px; height: 44px; padding: 8px; background: #d9eaff; border-radius: 50%; flex: 0 0 auto; }
.be-selos__lista b, .be-selos__lista small { display: block; }
.be-selos__lista b { font-size: 13.5px; margin-bottom: 3px; color: var(--be-texto); }
.be-selos__lista small { font-size: 11.5px; line-height: 1.4; color: #5f6e86; }

/* --- rodapé claro ---------------------------------------------------------- */
.site-footer,
.site-footer .site-info,
#footer-widgets,
#footer-widgets .footer-widgets-container {
  background: #ffffff;
  color: var(--setup-footer-text);
}
.site-footer { border-top: 1px solid var(--be-linha); }
/* O nome em texto dá lugar à logo — o texto continua no HTML para leitor de
   tela e busca; só sai da vista. O rodapé é montado em functions.php
   (setup_rodape) e não foi tocado. */
.setup-rodape__marca {
  width: 190px;
  height: 60px;
  background: url("../img/logo-header.png") left center / contain no-repeat;
  color: transparent;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 110%;
}
.setup-rodape__marca::before { display: none; }
.setup-rodape__links a { color: #183053; }
.setup-rodape__links a:hover { color: var(--be-azul-texto); }
.setup-rodape__aviso a { color: #183053; }
#footer-widgets a:hover { color: var(--be-azul-texto); }
#footer-widgets .widget-title, #footer-widgets h2, #footer-widgets h3 { color: var(--be-texto); }

/* --- responsivo (quebras da maqueta) --------------------------------------- */
/* Lateral fora da home (sidebar.php): mora na coluna estreita do
   GeneratePress, sem as caixas brancas de widget. */
.inside-right-sidebar .be-lateral { gap: 15px; }
.inside-right-sidebar .be-lateral--interna .be-painel,
.inside-right-sidebar .be-lateral--interna .be-busca { box-shadow: 0 1px 2px rgba(19, 42, 78, .04); }

@media (max-width: 1050px) {
  .be-categorias__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .be-conteudo { grid-template-columns: 1fr; }
  /* A lateral em duas colunas só na home, onde ela ocupa a largura toda. Na
     coluna estreita de um artigo, duas colunas espremeriam tudo. */
  .be-conteudo .be-lateral { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .be-conteudo .be-busca, .be-conteudo .be-guias { grid-column: 1 / -1; }
  .be-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .be-selos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .be-wrap { width: min(100% - 24px, 1180px); }
  .site-logo img { height: 46px; }
  .be-hero { min-height: 500px; }
  .be-hero__arte { object-position: 62% center; opacity: .65; }
  .be-hero__veu { background: linear-gradient(90deg, rgba(5,16,32,.95), rgba(5,16,32,.74)); }
  .be-hero h1 { font-size: 2.3rem; }
  .be-hero__deck { font-size: 16px; }
  .be-categorias__lista { display: flex; overflow-x: auto; padding: 12px 0; scroll-snap-type: x mandatory; }
  .be-categorias__lista li { flex: 0 0 105px; scroll-snap-align: start; }
  .be-conteudo { padding-top: 22px; }
  .be-grade { grid-template-columns: 1fr; }
  .be-lateral { display: flex; }
  .be-selos__lista { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .be-categorias__lista a:hover,
  .be-card:hover .be-card__imagem > img { transform: none; }
}