/* Ajustes de alinhamento (desktop + mobile). Carrega por último em todas as páginas.
   Duas larguras: --largura para blocos de interface, --leitura para texto corrido. */
:root {
  --largura: 1000px;
  --leitura: 800px;
  --gutter: 20px;
}

/* Container: mesma largura e o mesmo respiro lateral em tudo */
.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--gutter)) !important;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.container .container { padding: 0; }

/* Cabeçalho (resultado e páginas internas): logo e botões na mesma linha, centralizados na vertical */
.result > .container,
.specific > .container {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.result > .container > *,
.specific > .container > * { float: none !important; margin: 0 !important; }
.result > .container .logo,
.specific > .container .logo { width: auto; height: auto; margin-right: auto !important; }
.result > .container .hidden-mobile,
.specific > .container .hidden-mobile { order: 2; }
.result > .container .btn-menu,
.specific > .container .btn-menu { display: block; }
.result > .container > :has(.btn-menu),
.specific > .container > :has(.btn-menu) { order: 3; }
.logo h1 { margin: 0; }
.logo img { margin: 0 !important; }

/* Home: logo centralizado acima da busca */
.home .logo { float: none; width: 200px; margin: 24px auto 0; }

/* Vídeo + descrição lado a lado no desktop, empilhados no celular */
.video-box iframe { display: block; border-radius: 8px; }

/* Rodapé: respiro igual em cima e embaixo */
.border-top { padding-top: 24px !important; padding-bottom: 24px !important; }

/* Texto corrido: uma coluna de leitura, alinhada à esquerda, listas na mesma margem do parágrafo */
.text-trust-content {
  max-width: var(--leitura);
  text-align: left;
}
.text-trust-content ~ ul {
  max-width: var(--leitura);
  margin: 0 auto 15px;
  padding-left: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 22px;
  color: #848484;
}
.text-trust-content ~ ul li { margin-bottom: 6px; }
.text-trust-content ~ ul strong { color: #4b4b4b; }
.categories-seo-text .seo-text { max-width: var(--leitura); width: 100%; margin: 50px auto; }
.categories-seo-text .container { display: block !important; }
.seo-text ul { padding-left: 20px; }

/* Card do resultado */
a:has(> .card-resultado) { display: block; text-decoration: none; color: inherit; }
.card-resultado { margin: 10px auto 30px; }

/* Botões de voto: ícone em cima do texto */
.btn-circle > span { display: block; font-size: 25px; margin-bottom: 3px; }

/* FAQ: seta à direita */
.faq-title > span { float: right; }

/* Rodapé: logo à esquerda, link à direita, alinhados ao container */
.border-top {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.border-top > * { float: none !important; margin: 0 !important; }
.border-top .logo-footer img { display: block; }

@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .text-trust-content, .text-trust-content ~ ul { font-size: 15px; }
  .title-trust-content { font-size: 24px; line-height: 1.2; }
  .result > .container .logo img,
  .specific > .container .logo img { width: 160px; }
  .card-resultado-topo { padding: 50px 16px 36px; }
  .card-resultado-topo p { font-size: 24px; }
  .border-top { flex-direction: column; align-items: flex-start; padding-bottom: 32px !important; }

  /* votação: "É confiável" primeiro, os dois alinhados à esquerda */
  .result-item:has(.votes-resume) { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .result-item:has(.votes-resume) > * { float: none !important; margin: 0 !important; padding: 0 !important; }
  .votes-resume.color-active { order: 1; margin-top: 8px !important; }
  .votes-resume:not(.color-active) { order: 2; }

  /* linhas do resultado: tudo centralizado */
  .result-item-message { text-align: center; }

  /* respiro vertical mais curto */
  .wrapper { padding: 24px 0; }
  .text-trust-content { margin-bottom: 12px; }
}

/* Links para a loja no meio do texto: mesma cor, sem sublinhado */
.link-loja, .link-loja:hover { color: inherit; background-color: transparent; text-decoration: none; }