/* Rodapé padrão JKL · 3 colunas — medidas e cores do site da Guaçu Móveis (Tailwind → CSS puro).
   Cores do cliente nos tokens: --rodape-fundo, --rodape-texto e --rodape-marca (títulos e hover).
   Os cinzas são os da Guaçu (zinc-400/zinc-500), com o contraste conferido no teste do kit.
   Não precisa do assinatura-rodape.css: a assinatura está pintada aqui. */
.rodape-jkl {
  --rodape-fundo: #1A1A1A;
  --rodape-texto: #FFFFFF;
  --rodape-marca: #4CAF50;        /* Guaçu: verde-light. Trocar pela cor do cliente (4,5:1 sobre o fundo) */
  --rodape-cinza: #A1A1AA;        /* zinc-400 */
  --rodape-cinza-2: #8E8E96;      /* zinc-500 da Guaçu (#71717A) clareado: 4,5:1 sobre #1A1A1A */
  background: var(--rodape-fundo); color: var(--rodape-texto);
  border-top: 1px solid rgb(255 255 255 / .05);
  font-size: 14px; line-height: 1.5;
}
.rodape-jkl a, .rodape-jkl button { color: inherit; text-decoration: none; transition: color .2s ease, transform .3s ease; }
.rodape-jkl__grade {
  max-width: 1280px; margin: 0 auto; padding: 56px 32px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start;
}
.rodape-jkl__col { display: flex; flex-direction: column; min-width: 0; }

/* Coluna 1 */
.rodape-jkl__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rodape-jkl__logo img, .rodape-jkl__logo svg { flex-shrink: 0; border-radius: 999px; }
.rodape-jkl__logo-texto { display: flex; flex-direction: column; line-height: 1.2; }
.rodape-jkl__nome { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--rodape-texto); }
.rodape-jkl__sub { font-size: .72rem; color: rgb(255 255 255 / .7); }
.rodape-jkl__contato { display: flex; flex-direction: column; gap: 10px; color: var(--rodape-cinza); }
.rodape-jkl__rota { display: block; }
.rodape-jkl__endereco { display: block; line-height: 1.6; text-transform: uppercase; }
.rodape-jkl__chegar { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--rodape-cinza-2); text-decoration: underline; }
.rodape-jkl__rota:hover .rodape-jkl__endereco, .rodape-jkl__rota:hover .rodape-jkl__chegar { color: var(--rodape-texto); }
.rodape-jkl__whats { padding-top: 4px; display: inline-flex; gap: 6px; }
.rodape-jkl__whats-rotulo { font-weight: 500; }
.rodape-jkl__whats-numero { font-weight: 600; }
.rodape-jkl__whats:hover { color: var(--rodape-marca); }

/* Títulos das colunas 2 e 3 */
.rodape-jkl__titulo {
  margin: 0 0 16px; padding-top: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em; color: var(--rodape-marca);
}

/* Coluna 2 */
.rodape-jkl__col--centro { align-items: center; text-align: center; }
.rodape-jkl__redes { display: flex; gap: 24px; }
.rodape-jkl__redes a { display: grid; place-items: center; min-width: 44px; min-height: 44px; color: #94A3B8; } /* slate-400 */
.rodape-jkl__redes a:hover { color: var(--rodape-marca); transform: scale(1.1); }
.rodape-jkl__redes svg { width: 24px; height: 24px; fill: currentColor; }
/* Slogan: sempre centralizado, mesmo quebrando no celular (POP §1). */
.rodape-jkl__slogan {
  display: block; max-width: 20rem; margin: 16px auto 0; text-align: center;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rodape-cinza-2);
}

/* Coluna 3: à direita no computador */
.rodape-jkl__col--assinatura { align-items: center; }
@media (min-width: 768px) {
  /* Título e assinatura centralizados entre si, o bloco encostado à direita (como na Guaçu). */
  .rodape-jkl__col--assinatura { display: grid; justify-content: end; justify-items: center; }
}
/* .rodape-jkl .credito-jkl: mais específico que ".rodape-jkl a" (senão o "Solutions" herda o branco). */
.rodape-jkl .credito-jkl { display: inline-flex; align-items: center; gap: 10px; color: #94A3B8; } /* slate-400, como na Guaçu */
.credito-jkl .jkl-sol { font-size: 1.125rem; font-weight: 500; letter-spacing: .025em; transition: color .3s ease; }
/* Monograma com as cores da Guaçu em repouso (bronze/ouro velho) e laranja JKL no hover. */
.credito-jkl .jkl-part-j { stroke: #887C4A; transition: stroke .3s ease; }
.credito-jkl .jkl-part-k-stem { stroke: #A89F91; transition: stroke .3s ease; }
.credito-jkl .jkl-part-k-arm, .credito-jkl .jkl-part-l-fuse { stroke: #B36829; transition: stroke .3s ease; }
.credito-jkl .jkl-part-dot { fill: #B36829; transition: fill .3s ease; }
.credito-jkl .jkl-logo-svg { transition: transform .3s ease; }
.credito-jkl:hover .jkl-logo-svg { transform: scale(1.1); }
.credito-jkl:hover .jkl-part-j, .credito-jkl:hover .jkl-part-k-stem { stroke: #FFFFFF; }
.credito-jkl:hover .jkl-part-k-arm, .credito-jkl:hover .jkl-part-l-fuse { stroke: #FF7A00; }
.credito-jkl:hover .jkl-part-dot { fill: #FF7A00; }
.credito-jkl:hover .jkl-sol { color: #FF7A00; }

/* Barra de baixo */
.rodape-jkl__barra {
  max-width: 1280px; margin: 40px auto 0; padding: 24px 32px 32px;
  border-top: 1px solid rgb(255 255 255 / .1);
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--rodape-cinza-2);
}
.rodape-jkl__barra p { margin: 0; }
.rodape-jkl__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.rodape-jkl__legal a, .rodape-jkl__legal button {
  text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.rodape-jkl__legal a:hover, .rodape-jkl__legal button:hover { color: var(--rodape-texto); }
.rodape-jkl a:focus-visible, .rodape-jkl button:focus-visible { outline: 2px solid var(--rodape-marca); outline-offset: 3px; }

@media (max-width: 767px) {
  .rodape-jkl__grade { grid-template-columns: 1fr; gap: 40px; padding: 56px 16px 0; }
  .rodape-jkl__barra { flex-direction: column; justify-content: center; text-align: center; padding: 24px 16px 96px; }
  .rodape-jkl__legal { justify-content: center; }
}