/* css/footer.css | Mejoras del footer. Usa los mismos colores de ecommerce.css
   (--cj-gradient del .footer-cj, blanco, #4e9cff al pasar el mouse, --cj-cyan de acento). */

.footer-titulo { letter-spacing: .5px; margin-bottom: 1rem; }
.footer-titulo::after {
  content: ""; display: block; width: 36px; height: 3px; margin-top: .5rem; border-radius: 3px;
  background: var(--cj-gradient-btn);
}
@media (max-width: 767.98px) { .footer-titulo::after { margin-inline: auto; } }

.footer-links li { margin-bottom: .15rem; }
.footer-links a { display: inline-block; padding: .35rem 0; }   /* area tactil comoda en celular */
.footer-links a:hover { transform: translateX(4px); }
.footer-links a { transition: color .2s ease, transform .2s ease; }

.footer-contacto li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; text-align: left; }
.footer-contacto i { color: var(--cj-cyan); margin-top: .25rem; flex: 0 0 auto; }
.footer-contacto a, .footer-contacto span { overflow-wrap: anywhere; }
@media (max-width: 767.98px) { .footer-contacto li { justify-content: center; text-align: center; } }

/* Redes: botones redondos */
.footer-redes a {
  width: 42px; height: 42px; margin-inline: .3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.15rem;
}
@media (min-width: 768px) { .footer-redes a { margin-inline: 0 .6rem; } }
.footer-redes a:hover { background: var(--cj-blue); color: #fff; }

/* Si hay barra fija en el carrito, el footer no queda tapado (ya lo cubre carrito.css) */