/* ==========================================================================
   Rodapé Institucional e Comercial — Lobo Motoparts
   Consome tokens do design-system.css ("Oficina Moderna").
   Conformidade WCAG 2.1 AA (contraste mínimo 4.5:1 e touch targets).
   ========================================================================== */

.lobo-footer {
  background: #111111;
  color: #d5d5d5;
  font-family: var(--lobo-font-family);
  border-top: 3px solid var(--lobo-secondary);
  position: relative;
  z-index: 10;
  margin-top: var(--lobo-space-10);
}

.lobo-footer-main {
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid #222222;
}

.lobo-footer-container {
  max-width: var(--lobo-breakpoint-xl);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lobo-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 1fr 1.1fr;
  gap: var(--lobo-space-8);
  align-items: start;
}

/* Coluna 1: Marca e Sobre */
.lobo-footer-brand-name {
  font-size: 1.35rem;
  font-weight: var(--lobo-font-bold);
  letter-spacing: 0.03em;
  color: #ffffff;
  display: inline-block;
  margin-bottom: var(--lobo-space-3);
}

.lobo-footer-brand-name span {
  color: var(--lobo-secondary);
}

.lobo-footer-text {
  color: #b0b0b0;
  font-size: var(--lobo-text-sm);
  line-height: 1.6;
  margin: 0 0 var(--lobo-space-4);
}

.lobo-footer-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #999999;
  font-size: var(--lobo-text-xs);
  margin: 0;
}

.lobo-footer-location svg {
  color: var(--lobo-secondary);
  flex-shrink: 0;
}

/* Títulos das colunas */
.lobo-footer-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: var(--lobo-font-semibold);
  letter-spacing: 0.01em;
  margin: 0 0 var(--lobo-space-4);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #2a2a2a;
}

.lobo-footer-title-sub {
  margin-top: var(--lobo-space-5);
  margin-bottom: var(--lobo-space-3);
  font-size: 0.95rem;
}

/* Listas de links */
.lobo-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.lobo-footer-list li {
  margin: 0;
}

.lobo-footer-list a {
  color: #cccccc;
  text-decoration: none;
  font-size: var(--lobo-text-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 24px;
  transition: color 0.15s ease, transform 0.15s ease;
}

.lobo-footer-list a:hover {
  color: var(--lobo-secondary);
  text-decoration: underline;
}

.lobo-footer-list a:focus-visible {
  outline: 2px solid var(--lobo-secondary);
  outline-offset: 3px;
  border-radius: var(--lobo-radius-sm);
}

/* Contato destacado */
.lobo-footer-contact-list a svg,
.lobo-footer-contact-list li svg {
  color: var(--lobo-secondary);
  flex-shrink: 0;
}

.lobo-footer-highlight-link {
  color: #ffffff !important;
}

.lobo-footer-highlight-link strong {
  color: var(--lobo-secondary);
}

.lobo-footer-hours {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #999999;
  font-size: var(--lobo-text-xs);
  line-height: 1.4;
  margin-top: 0.25rem;
}

.lobo-footer-cta-wrapper {
  margin-top: var(--lobo-space-4);
}

.lobo-footer-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lobo-secondary);
  color: #000000 !important;
  font-size: var(--lobo-text-sm);
  font-weight: var(--lobo-font-semibold);
  text-decoration: none !important;
  padding: 0.65rem 1.25rem;
  min-height: 44px;
  border-radius: var(--lobo-radius-sm);
  transition: background 0.15s ease;
}

.lobo-footer-cta-btn:hover {
  background: var(--lobo-secondary-hover, #c5a028);
}

.lobo-footer-cta-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* Badges de Pagamento e Segurança */
.lobo-footer-payment-badges,
.lobo-footer-security-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lobo-pay-badge,
.lobo-sec-badge {
  background: #1c1c1c;
  border: 1px solid #2c2c2c;
  color: #e0e0e0;
  font-size: var(--lobo-text-xs);
  padding: 0.4rem 0.65rem;
  border-radius: var(--lobo-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.lobo-sec-badge svg {
  color: var(--lobo-secondary);
}

/* Logo do cabeçalho no rodapé (fundo branco como no topo; o PNG não tem
   versão para fundo escuro) */
.lobo-footer-logo {
  display: inline-block;
  padding: 6px 10px;
  margin-bottom: 0.75rem;
  background: #ffffff;
  border-radius: var(--lobo-radius-sm);
  line-height: 0;
}

.lobo-footer-logo-image {
  display: block;
  width: auto;
  height: 48px;
}

/* Selos "Site seguro": SSL, Mercado Pago e Melhor Envio (parceiros reais) */
.lobo-selos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lobo-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.45rem 0.7rem;
  background: #ffffff;
  color: #16161a;
  border-radius: var(--lobo-radius-sm);
  font-size: var(--lobo-text-xs);
  font-weight: var(--lobo-font-semibold);
  line-height: 1.15;
}

.lobo-selo small {
  display: block;
  font-size: 0.68rem;
  font-weight: var(--lobo-font-regular);
  color: #5b5b63;
}

.lobo-selo svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: #16161a;
}

.lobo-selo img {
  display: block;
  width: auto;
  height: 24px;
}

/* Barra inferior de copyright */
.lobo-footer-bottom {
  background: #0a0a0a;
  padding: 1.25rem 0;
  font-size: var(--lobo-text-xs);
  color: #888888;
}

.lobo-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.lobo-footer-copy {
  margin: 0;
}

.lobo-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.lobo-footer-bottom-links a {
  color: #aaaaaa;
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

.lobo-footer-bottom-links a:hover,
.lobo-footer-bottom-links a:focus-visible {
  color: var(--lobo-secondary);
  text-decoration: underline;
}

/* ---------- Responsividade ---------- */
@media (max-width: 1023px) {
  .lobo-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--lobo-space-6);
  }
}

@media (max-width: 639px) {
  .lobo-footer-main {
    padding: 2.25rem 0 2rem;
  }
  .lobo-footer-grid {
    grid-template-columns: 1fr;
    gap: var(--lobo-space-6);
  }
  .lobo-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .lobo-footer-bottom-links {
    flex-wrap: wrap;
  }
}
/* T01: razão social e CNPJ abaixo do copyright. Linha própria, discreta:
   é identificação legal, não chamada de marketing. */
.lobo-footer-empresa {
  display: block;
  margin-top: var(--lobo-space-1);
  font-size: var(--lobo-text-xs);
  opacity: 0.85;
}