/* ============================================================
   ZF Partners · acréscimos do site sobre o CSS do recorte (zf.css)

   O zf.css é o arquivo do designer e fica intacto. Aqui entra só o que
   o recorte não previa e o conteúdo do painel passou a precisar.
   ============================================================ */

/* ---------- Textos com parágrafo e negrito ----------
   As frentes ("Para o seu negócio", "Para a sua carreira") e a descrição
   de cada serviço agora aceitam negrito e mais de um parágrafo, vindos do
   editor do painel. O recorte tinha um parágrafo só em cada lugar. */
.solucao-front-body p { margin: 0; }
.solucao-front-body p + p { margin-top: var(--space-2); }

.solucao-front-body strong,
.solucao-item strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* Entre parágrafos da mesma descrição o respiro é menor que o do título
   para o primeiro parágrafo, para o texto ler como um bloco só. */
.solucao-item-body p + p { margin-top: var(--space-2); }

/* A linha "Soluções: ..." fecha o serviço e se separa um pouco do texto. */
.solucao-item .solucao-item-lista { margin-top: var(--space-3); }

/* ---------- Vídeo no topo ----------
   Se o cliente enviar um vídeo no Banner, ele ocupa o mesmo lugar da foto,
   com o mesmo recorte. */
.hero-photo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
  display: block;
}
@media (max-width: 1100px) {
  .hero-photo video { object-position: 62% 28%; }
}

/* ---------- Passos do método ----------
   Com os títulos novos ("Estruturamos soluções.", "Implementamos juntos.")
   dois cartões quebram o título em duas linhas e o primeiro ficava mais
   baixo que os outros. Os três passam a ter a mesma altura. */
@media (min-width: 900px) {
  .metodo-track { align-items: stretch; }
  .metodo-track > li > .metodo-card { height: 100%; }
}

/* Assinatura da agência no rodapé (logo branca da Londrina S/A). */
.footer-assinatura {
  display: inline-flex;
  align-items: center;
  opacity: .7;
  transition: opacity .2s ease;
}
.footer-assinatura:hover,
.footer-assinatura:focus-visible { opacity: 1; }
.footer-assinatura:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.footer-assinatura img { display: block; width: auto; height: 18px; }

/* Faixa de baixo do rodapé: assinatura + "Voltar ao topo".
   No computador, as duas faixas do rodapé dividem as mesmas colunas
   (subgrid): a assinatura começa na mesma linha do ícone do WhatsApp e o
   "Voltar ao topo" termina junto com o e-mail. */
.footer-base-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .site-footer > .container { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-10); }
  .site-footer .footer-top,
  .site-footer .footer-base {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    /* "normal" = usa o espaçamento do container; se cada faixa tiver o seu
       (o zf.css dá valores diferentes), a linha da coluna se desloca. */
    column-gap: normal;
    align-items: center;
  }
  /* Ícones ocupam a coluna inteira: o WhatsApp encosta no começo dela (onde
     começa a assinatura) e o e-mail no fim (onde termina o "Voltar ao topo"). */
  .site-footer .footer-social { justify-self: stretch; justify-content: space-between; }
}
@media (max-width: 767px) {
  .footer-base-acoes { width: 100%; }
}
/* O botão flutuante do WhatsApp (60px + 24px de margem) cobria o
   "Voltar ao topo" no fim da página sempre que o conteúdo chega perto da
   borda direita (celular e telas médias): o rodapé ganha essa altura a mais. */
@media (max-width: 1360px) {
  .site-footer { padding-bottom: calc(var(--space-9) + 84px); }
}