/* =====================================================================
   ELENEX — FOOTER (token-driven, monochrome editorial)
   Markup unchanged (footer.blade.php). Removed the legacy margin-left hacks;
   alignment now comes from the grid.
   ===================================================================== */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-xl) var(--gutter) var(--space-m);
  margin-top: auto;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-l);
  max-width: var(--container);
  margin-inline: auto;
}

.footer-col h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0 0 var(--space-s);
}
/* legacy alignment hooks — neutralized (grid handles it now) */
.conta, .sig { margin-left: 0; }

/* elelogo2.webp is already a light logo for dark backgrounds — no filter (the
   previous brightness/invert turned it into a blank white box). */
.footer-logo { width: 168px; height: auto; margin-bottom: var(--space-s); display: block; }

.footer-text {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--ash);
  margin: 0 0 var(--space-s);
  max-width: 34ch;
}

.libro-img { width: 124px; height: auto; margin-top: var(--space-2xs); }

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ash);
}
.footer-col ul li i { width: 18px; text-align: center; }

.footer-col a { color: var(--ash); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
.footer-col a:hover { color: var(--paper); }

/* social */
.social-icons { display: flex; gap: var(--space-s); }
.social-icons a { color: var(--paper); font-size: 22px; transition: opacity var(--dur-1) var(--ease-out); }
.social-icons a:hover { opacity: 0.65; }

/* payment methods */
.payment-logos { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.payment-logos img {
  width: 50px; height: 30px;
  object-fit: contain;
  background: var(--paper);
  padding: 4px 8px;
  border-radius: var(--radius-1);
}

/* bottom bar */
.footer-bottom {
  max-width: var(--container);
  margin: var(--space-l) auto 0;
  padding-top: var(--space-s);
  border-top: 1px solid rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.footer-bottom p {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ash);
  margin: 0;
}
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.footer-bottom a {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ash);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.footer-bottom a:hover { color: var(--paper); }

@media (max-width: 768px) {
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom > div { justify-content: center; }
}