/*
 * Duplo D — o rodape, global.
 * ---------------------------------------------------------------------------
 * Vale nas 218 URLs do site, e nao so nas sete paginas do redesign. Por isso
 * ele NAO usa os tokens do duplod-v2.css: aqueles vivem em `.dd-v2,
 * body.dd-v2-page`, que existe na home e nas paginas de agente e nao existe
 * no blog, no portfolio nem em nenhum dos 77 posts. Um `var(--neutral-900)`
 * aqui resolveria para nada em 200 paginas e o rodape sairia sem cor, sem
 * erro nenhum no console.
 *
 * A saida e o rodape carregar a propria paleta. Os valores sao os mesmos do
 * Claude Design, em HSL, com o matiz quente de 12 graus que atravessa a rampa
 * inteira do desenho.
 *
 * As cores de fundo, link e titulo TAMBEM estao nos campos do Betheme
 * (background-footer, color-footer-a, color-footer-heading). Isso e de
 * proposito, nao duplicacao esquecida: o tema emite o CSS dinamico dele antes
 * deste arquivo, e se os dois discordarem aparece um flash da cor velha.
 */

#Footer {
  --f-bg:     hsl(12 10% 12%);  /* --neutral-900 */
  --f-panel:  hsl(12  8% 19%);  /* --neutral-800 */
  --f-line:   hsl(12  8% 26%);  /* --hairline-dark */
  --f-head:   rgb(64 191 191);  /* --green-400, o unico acento do rodape */
  --f-bright: hsl(12  4% 90%);  /* --neutral-200 */
  --f-text:   hsl(12  4% 66%);  /* --neutral-400 */
  --f-dim:    hsl(12  4% 50%);  /* --neutral-500 */

  background-color: var(--f-bg);
  background-image: none;
  color: var(--f-text);
  font-family: Montserrat, system-ui, sans-serif;
}

/* A banda de widgets: quatro colunas, respiro do desenho (96px / 32px). */
#Footer .widgets_wrapper { padding: 80px 0 8px; }
#Footer .widgets_wrapper .container { max-width: 1160px; }
#Footer .widgets_wrapper .column { margin-bottom: 32px; }
#Footer .widget { border: 0; padding: 0; margin: 0; }
#Footer .widget:not(:last-child) { margin-bottom: 24px; }

/* Titulo de coluna. O desenho usa Poppins 600 em 16px, sem caixa alta. */
#Footer .dd-rod__titulo {
  display: block;
  margin: 0 0 14px;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--f-head);
}

#Footer .dd-rod__lista { list-style: none; margin: 0; padding: 0; }
#Footer .dd-rod__lista li { margin: 0 0 12px; }
#Footer .dd-rod__lista li:last-child { margin-bottom: 0; }

#Footer a { color: var(--f-text); text-decoration: none; }
#Footer a:hover,
#Footer a:focus-visible { color: var(--f-head); text-decoration: underline; }

/*
 * Foco visivel proprio. O tema pai desenha um outline claro que some contra
 * um fundo de 12% de luminosidade -- e o rodape e onde ficam os unicos links
 * de contato do site.
 */
#Footer a:focus-visible {
  outline: 2px solid var(--f-head);
  outline-offset: 3px;
  border-radius: 2px;
}

#Footer .dd-rod__lista a,
#Footer .dd-rod__texto { font-size: 14px; line-height: 20px; }

/* Coluna da marca. */
#Footer .dd-rod__marca { display: block; max-width: 300px; }
#Footer .dd-rod__logo { height: 32px; width: auto; display: block; margin: 0 0 14px; }

/*
 * A linha da marca e o copyright usam --f-text, e nao o --f-dim do desenho.
 * O desenho pede --neutral-500 nos dois, e medido contra o fundo de
 * --neutral-900 isso da 4,09:1 -- abaixo dos 4,5:1 que texto pequeno exige.
 * E uma discordancia deliberada com o Claude Design: o Lume vende "contraste
 * medido" na propria home, e um rodape reprovado embaixo dessa frase seria a
 * unica parte do site a desmentir o argumento. --neutral-400 da 6,94:1 e
 * mantem a hierarquia: continua mais apagado que os links de contato.
 */
#Footer .dd-rod__texto { display: block; color: var(--f-text); margin: 0; }

/* O selo Kommo: parceria real, entao ele fica -- mas discreto, e nao
   competindo com o unico acento verde da coluna. */
#Footer .dd-rod__selo { display: inline-block; margin-top: 20px; }
#Footer .dd-rod__selo img {
  width: 84px; height: auto; display: block;
  border-radius: 4px;
  opacity: .78;
  transition: opacity 200ms cubic-bezier(.4,0,.2,1);
}
#Footer .dd-rod__selo:hover img,
#Footer .dd-rod__selo:focus-visible img { opacity: 1; }

/* Contato: o telefone e o e-mail em corpo maior, sao o fim da linha. */
#Footer .dd-rod__contato a { font-size: 15px; color: var(--f-bright); }
#Footer .dd-rod__nota { display: block; margin-top: 4px; color: var(--f-text); font-size: 13px; line-height: 19px; }

/* A barra de baixo: copyright a esquerda, sociais a direita, filete em cima. */
#Footer .footer_copy {
  background: transparent;
  border-top: 1px solid var(--f-line);
  margin-top: 24px;
  padding: 20px 0;
}
#Footer .footer_copy .container { max-width: 1160px; }
#Footer .footer_copy .mcb-column-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}
#Footer .footer_copy .copyright {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--f-text);  /* ver a nota de contraste na coluna da marca */
}
/*
 * As redes ficam na lista nativa do tema (ul.social), alimentada pelas
 * opcoes do Betheme -- nao escritas a mao no campo de copyright.
 *
 * O desenho traz quatro links de texto (Facebook, LinkedIn, YouTube, RSS).
 * A lista do tema traz cinco, com o X que o desenho esqueceu, ja com
 * aria-label em cada um, e o Daniel muda pelo admin. Duplicar isso no
 * copyright criava dois conjuntos do mesmo link na mesma barra e uma segunda
 * fonte de verdade para manter.
 */
#Footer .footer_copy ul.social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#Footer .footer_copy ul.social li { margin: 0; padding: 0; }
#Footer .footer_copy ul.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 4px;
  color: var(--f-text);
  transition: color 200ms cubic-bezier(.4,0,.2,1), background-color 200ms cubic-bezier(.4,0,.2,1);
}
#Footer .footer_copy ul.social a:hover,
#Footer .footer_copy ul.social a:focus-visible {
  color: var(--f-head);
  background: var(--f-panel);
  text-decoration: none;
}
#Footer .footer_copy ul.social i { font-size: 16px; line-height: 1; }

/* O botao de voltar ao topo do tema pai flutua no meio do flex; tira do fluxo. */
#Footer .footer_copy #back_to_top { position: absolute; }

@media (max-width: 767px) {
  #Footer .widgets_wrapper { padding: 48px 0 4px; }
  #Footer .footer_copy .mcb-column-inner { justify-content: flex-start; }
  #Footer .dd-rod__marca { max-width: none; }
}