/* Customizações JSDB */

.footer .social-s3 li a { color: #624895; }

@media (min-width: 1600px) {
  .banner-s4 .banner-block { padding: 140px 0 140px; }
}

@media (min-width: 992px) {
  .section-cta.section-x { padding-top: 100px; padding-bottom: 100px; }
}

@media (min-width: 576px) {
  .cta-text-s3 h2 { font-size: 1.875rem; }
}

@media (min-width: 768px) {
  .cta-text-s3 h2 strong { font-size: 2.5rem; margin-bottom: 0; }
}

/* Página de conteúdo jurídico/institucional (política de privacidade e afins):
   títulos no tamanho do texto normal, só em negrito, com espaço de uma linha
   em branco antes de cada título. */
.policy-content p,
.policy-content .lead,
.policy-content h2,
.policy-content h3 { font-size: 1rem; margin-bottom: 0; }
.policy-content h2,
.policy-content h3 { font-weight: 700; margin-top: 2em; }
.policy-content > p:first-child { margin-bottom: 2em; }

/* O tema aplica margin-top: -7px no parágrafo logo após um h2 dentro de
   .text-block (regra pensada pra outro contexto). Como o item "1. Quem
   somos" é o único h2 da política (os demais são h3), só ele ficava colado
   no texto. Zera esse recuo pra ficar igual ao espaço dos h3. */
.policy-content h2 + p { margin-top: 0; }

/* Breadcrumb das páginas internas nunca quebra em 2 linhas */
.banner-menu li { white-space: nowrap; }

/* Título do banner das páginas internas sem uppercase (decisão de Jeferson) */
.banner-inner-s4 .banner-heading { text-transform: none; }

/* Título do banner (hero e páginas internas) menos pesado: 700 em vez do 900 padrão do tema */
.banner-heading { font-weight: 700; }
.banner-inner .banner-heading { font-weight: 700; }

/* Título da página de post do blog: menos espaço entre as 2 linhas do título */
.blog-post-body .banner-heading { line-height: 1.15; }

/* Título da página de projeto do portfolio: mesmo ajuste do post do blog */
.portfolio-post-body .banner-heading { line-height: 1.15; }

/* Camada escura (hero e header das páginas internas) em preto puro, sem o
   tom arroxeado/azulado que o tema aplica por padrão em .overlay-dark */
.overlay-dark::after { background: #000; opacity: 0.6; }

/* Hover do menu no amarelo da marca só enquanto o header está transparente
   sobre a imagem de fundo. Quando rola a página e o header fica com fundo
   branco (.has-fixed), mantém a cor padrão do tema. */
@media (min-width: 992px) {
	.is-transparent:not(.has-fixed) .menu > .menu-item:hover > a { color: #f9ff00; }
}

/* Botões do hero no mesmo estilo (amarelo/roxo) da dobra "Quer ver mais
   trabalhos como esses?" (que já fica assim por estar num bg-primary) */
.banner-s4 .btn { background: #f9ff00; color: #473572; }
.banner-s4 .btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; }

/* Botão "Falar no WhatsApp" do header: amarelo só enquanto o header está
   transparente sobre a imagem de fundo. Com o header fixo/branco (rolou a
   página), mantém a cor padrão do tema. */
.is-transparent:not(.has-fixed) .menu-btns .btn { background: #f9ff00; color: #473572; }
.is-transparent:not(.has-fixed) .menu-btns .btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; }

/* Dobra "Projetos" da home: o CTA final ("Quer ver mais trabalhos como
   esses?", fundo roxo) já fecha o bloco visualmente. O padding-bottom do
   .section-x dessa dobra, somado ao padding-top do .section-x da dobra de
   Depoimentos logo em seguida, deixava um vão de quase 300px entre as duas. */
#project.section-x { padding-bottom: 0; }

/* Botão "Conversar via WhatsApp" (CTA acima do rodapé): sem borda no estado
   amarelo padrão, igual ao botão "Portfolio completo"; borda branca só
   aparece no hover, quando o fundo vira transparente. Texto em uma linha só. */
.cta-btn-s3 .btn { border: none; white-space: nowrap; }
.cta-btn-s3 .btn:hover { border: 2px solid #ffffff; }

/* Ícones de compartilhar do post do blog: WhatsApp e LinkedIn não vêm com
   cor de marca no tema (só fac/twi/pin/goo), então definimos aqui na cor
   oficial de cada rede, seguindo o mesmo padrão do tema. */
.post-details .social li .wpp { background: #25D366; border-color: #25D366; }
.post-details .social li .wpp:hover { background: #7b96cd; }
.post-details .social li .lin { background: #0A66C2; border-color: #0A66C2; }
.post-details .social li .lin:hover { background: #7b96cd; }

/* Ícone do X: o Font Awesome 5 do tema só tem o passarinho antigo do
   Twitter, sem o "X" atual. Usamos SVG inline (logo oficial da marca) só
   nesse botão, centralizado manualmente já que não depende do ::before
   do ícone de fonte como os outros. */
.post-details .social li .x-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: #000000; border-color: #000000; }
.post-details .social li .x-icon:hover { background: #7b96cd; }

/* Formulário de contato: aviso exibido quando form/contact.php falha e
   redireciona pra /contato?erro=1 (escondido por padrão via .d-none, o
   script no fim da página remove a classe se o parâmetro estiver na URL),
   e texto de consentimento LGPD abaixo do botão de enviar. */
.form-alert { background: #fdecea; color: #b42318; border: 1px solid #f5c2c0; border-radius: 4px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.9rem; }
.form-consent { font-size: 0.8rem; color: #6c757d; margin-top: 12px; margin-bottom: 0; }
.form-consent a { color: #624895; text-decoration: underline; }

/* Landing pages (lp-*.html): páginas standalone de tráfego pago/orgânico,
   sem menu de navegação, com um botão secundário (outline) ao lado do CTA
   principal. O .btn-outline do tema já existe para contexto .bg-primary
   (funciona sozinho no CTA final); no hero (.banner-s4) o botão amarelo
   tem especificidade maior, então reforça aqui pra manter o outline. */
.banner-s4 .btn.btn-outline { background: transparent; color: #ffffff; border: 1px solid #ffffff; }
.banner-s4 .btn.btn-outline:hover { background: #ffffff; color: #624895; }
.lp-body .banner-btn .btn + .btn { margin-left: 15px; }
@media (max-width: 575px) {
  .lp-body .banner-btn .btn + .btn { margin-left: 0; margin-top: 15px; }
}

/* Header das LPs não tem menu de navegação, só o CTA. Abaixo de 992px o
   tema esconde .header-navbar fora da tela (menu off-canvas que só abre
   com o botão hamburguer, que a LP não tem), o que sumia com o CTA no
   celular. Mantém ele sempre visível e inline, em qualquer largura. */
.lp-body .header-navbar { position: static; left: auto; top: auto; width: auto; height: auto; padding: 0; margin: 0; }
.lp-body .header-navbar::before, .lp-body .header-navbar-overlay { display: none; }
.lp-body .header-menu { padding: 0; max-height: none; overflow: visible; }
.lp-body .menu-btns { margin: 0; padding: 0; }
.lp-body .menu-btns::before { display: none; }

/* Rodapé das LPs: barra fina com CNPJ e o link discreto de volta pro site
   institucional, sem peso visual de botão, pra não competir com os CTAs. */
.lp-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 20px; margin-top: 10px; border-top: 1px solid #e5e5e5; }
.lp-footer-bottom p { margin: 0; font-size: 0.8rem; color: #8a8a8a; }
.lp-footer-discreet-link { font-size: 0.8rem; color: #8a8a8a; text-decoration: underline; }
.lp-footer-discreet-link:hover { color: #624895; }

/* Cards "Como funciona o Diagnóstico" (LP presença digital): .feature é
   flex-row por padrão (ícone à esquerda, conteúdo à direita). Aqui o
   pedido foi empilhar: ícone em cima, título e texto abaixo, centralizado. */
.feature-step { flex-direction: column; align-items: center; }
.feature-step .feature-content { margin-left: 0; margin-top: 15px; }

/* Banner de consentimento de cookies (LGPD): cartao pequeno e discreto no
   canto inferior esquerdo (nao centralizado, nao ocupa a tela toda) ate
   o visitante aceitar ou recusar cookies nao essenciais (GTM, GA4, Meta
   Pixel). Botoes reduzidos pra nao competir com os CTAs do site - o
   .btn-sm padrao do tema ainda fica grande demais pra esse contexto.
   Injetado via assets/js/cookie-consent.js, que tambem guarda a escolha
   no localStorage pra nao mostrar de novo. */
.cookie-consent-banner { position: fixed; left: 20px; bottom: 20px; z-index: 9998; width: calc(100% - 40px); max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 16px 18px; background: rgba(255, 255, 255, 0.9); color: #333333; border: 1px solid #ffffff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.cookie-consent-banner p { margin: 0; font-size: 0.78rem; line-height: 1.5; }
.cookie-consent-banner a { color: #624895; text-decoration: underline; }
.cookie-consent-buttons { display: flex; gap: 8px; }
.cookie-consent-buttons .btn { padding: 7px 16px; font-size: 0.75rem; min-width: auto; }
.cookie-consent-buttons .btn-outline { border: 1px solid #624895; color: #624895; background: transparent; }
.cookie-consent-buttons .btn-outline:hover { background: #624895; color: #ffffff; }
@media (max-width: 575px) {
  .cookie-consent-banner { left: 15px; right: 15px; bottom: 15px; width: auto; max-width: none; }
}