/* Estilos próprios do site (fora do styles.css que veio do Lovable). */

/* ---------- Banner de logos de clientes ---------- */
.logos-carrossel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.logos-trilha {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding: 0.5rem 0;
  animation: logos-rolar 100s linear infinite;
}
.logos-carrossel:hover .logos-trilha,
.logos-carrossel:focus-within .logos-trilha {
  animation-play-state: paused;
}
.logo-cliente {
  flex: 0 0 auto;
  width: 176px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #ded6c6;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(8, 39, 71, 0.06);
}
.logo-cliente img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes logos-rolar {
  to { transform: translateX(calc(-50% - 0.5rem)); }
}
@media (max-width: 767px) {
  .logos-trilha { gap: 0.75rem; animation-duration: 80s; }
  .logo-cliente { width: 136px; height: 84px; padding: 10px; }
  @keyframes logos-rolar { to { transform: translateX(calc(-50% - 0.375rem)); } }
}
/* Quem prefere menos movimento vê os logos parados, em grade */
@media (prefers-reduced-motion: reduce) {
  .logos-carrossel { -webkit-mask-image: none; mask-image: none; }
  .logos-trilha { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .logos-trilha [aria-hidden="true"] { display: none; }
}

/* ---------- Marca no cabeçalho e no rodapé ---------- */
.marca-topo { height: 40px; width: auto; }
@media (min-width: 768px) { .marca-topo { height: 46px; } }
.marca-rodape { height: 52px; width: auto; }

/* ---------- Títulos com a fonte do manual da marca (Vidaloka) ---------- */
:root { --font-display: "Vidaloka", Georgia, serif; }
h1, h2, h3, h4, .font-display { font-family: "Vidaloka", Georgia, serif; font-weight: 400; letter-spacing: 0; }

/* ---------- Faixa de logos logo depois de "Escolha o seu caminho" ---------- */
.faixa-logos { padding: 2.5rem 0; border-top: 1px solid #ded6c6; border-bottom: 1px solid #ded6c6; }
.faixa-logos-titulo { margin-bottom: 1.5rem; text-align: center; font-size: 1.125rem; line-height: 1.35; font-weight: 700; color: #082747; }
@media (min-width: 768px) { .faixa-logos-titulo { font-size: 1.25rem; } }

/* ---------- "Quem é Jesús Rey": assinatura e foto ---------- */
.assinatura-jesus { display: block; height: 56px; width: auto; margin-top: 1.25rem; }
.foto-jesus-bloco img { display: block; width: 100%; max-width: 420px; height: auto; margin-left: auto; border-radius: 6px; }
@media (max-width: 767px) { .foto-jesus-bloco img { margin: 0 auto; } }

/* ---------- "Onde você encontra o Jesús" ---------- */
.eco-grade { display: grid; gap: 1.25rem; margin-top: 2rem; }
.eco-grade-2 { grid-template-columns: 1fr; }
.eco-grade-5 { grid-template-columns: 1fr; margin-top: 1.25rem; }
@media (min-width: 640px) { .eco-grade-2 { grid-template-columns: repeat(2, 1fr); } .eco-grade-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .eco-grade-5 { grid-template-columns: repeat(6, 1fr); } .eco-grade-5 > li { grid-column: span 2; } .eco-grade-5 > li:nth-child(n+4) { grid-column: span 3; } }
.eco-cartao { display: flex; flex-direction: column; padding: 1.5rem; background: #fff; border: 1px solid #ded6c6; border-radius: 6px; box-shadow: 0 1px 2px rgba(8, 39, 71, .06); }
.eco-grade-2 .eco-cartao { border-top: 4px solid #d6632d; }
.eco-logo { height: 88px; display: flex; align-items: center; gap: .6rem; }
.eco-logo img { max-height: 88px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.eco-grade-5 .eco-logo, .eco-grade-5 .eco-logo img { height: 72px; max-height: 72px; }
.eco-icone { width: 64px; height: 64px; flex: 0 0 auto; }
.eco-nome { font-weight: 700; font-size: 1.05rem; color: #082747; line-height: 1.2; }
.eco-provisorio { display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; padding: 0 .75rem; border: 1px dashed #ded6c6; border-radius: 6px; font-family: "Vidaloka", Georgia, serif; font-size: 1.05rem; color: #082747; }
.eco-provisorio small { font-family: "Open Sans", sans-serif; font-size: .7rem; color: #8a97a3; }
.eco-titulo { margin-top: 1rem; font-size: 1.35rem; line-height: 1.2; }
.eco-texto { margin-top: .5rem; flex: 1; color: #4a5e75; font-size: .95rem; }
.eco-acao { margin-top: 1rem; }
/* ---------- Logo do Instagram ao lado do link ---------- */
.link-rede { display: inline-flex; align-items: center; gap: .45rem; }
.icone-rede { width: 22px; height: 22px; flex: 0 0 auto; }

/* ---------- Diagnóstico: cartão principal com lista e botão ---------- */
.cartao-acao { box-shadow: 0 1px 2px rgba(8, 39, 71, .06); }
@media (min-width: 768px) { .cartao-acao { padding: 2rem; } }
.cartao-acao ul { font-size: 1.05rem; }
.cartao-divisor { margin: 1.5rem 0; border: 0; border-top: 1px solid #ded6c6; }

/* ---------- Diagnóstico: colunas alinhadas em cima e embaixo ---------- */
.diag-grade { align-items: stretch; }
.diag-grade .cartao-acao { display: flex; flex-direction: column; }
.diag-grade .cartao-acao ul { margin-bottom: 1.5rem; }
.diag-grade .cartao-divisor { margin-top: auto; }
.diag-lateral { display: flex; flex-direction: column; gap: 1.5rem; }
.diag-lateral > div { flex: 1; }

.diag-sec-topo { padding-bottom: 2.5rem !important; }
.diag-sec-conteudo { padding-top: 3rem !important; }

/* ---------- Diagnóstico: foto ao lado do título ---------- */
.diag-topo-grade { display: grid; gap: 2rem; align-items: center; }
.diag-topo-foto img { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; border-radius: 6px; }
@media (min-width: 768px) {
  .diag-topo-grade { grid-template-columns: 1.2fr .8fr; gap: 2.5rem; }
  .diag-topo-foto img { max-width: 340px; margin: 0 0 0 auto; }
}