/* ============================================================
   FOLC HOME COFFEE — FOOTER
   Template: Tienda Nube / Río
   Archivo: folc-footer.css

   Reskin CSS del footer NATIVO (snipplets/footer/footer.tpl) — no se
   reemplaza el template. Ese archivo trae contenido obligatorio por
   términos de uso de Tiendanube (link "Powered by Tiendanube") y por
   normativa de defensa del consumidor en Argentina (componente
   claim-info) que debe quedar visible y funcional. Los links de las
   columnas "Tienda" / "Información" se configuran desde el admin en
   Diseño > Menús (menú de pie de página / secundario), y el contacto
   sale de los datos de la tienda (WhatsApp, email, dirección).

   v3 (04 ago 2026) — fix de contraste: el <footer> nativo de Río
   asume fondo oscuro + texto blanco (`footer{color:var(--footer-foreground)}`,
   blanco por defecto) y varios elementos reales (ícono social, flecha del
   newsletter, input) quedaban blancos sobre el fondo crema nuevo, casi
   invisibles. Además algunos selectores de v2 no matcheaban nada real
   (`.newsletter-title`, `.newsletter-container input` no existen en el
   template — la clase real del título es `.subtitle` y la del input es
   `.form-control`, confirmado leyendo snipplets/newsletter.tpl y
   snipplets/forms/form-input.tpl). También se resuelve acá la barra legal
   (antes negra por otra variable nativa, --footer-background): pasa a
   azul (--folc-wine) a pedido de Facu, como remate visual a tono con el
   header.
   ============================================================ */

.js-footer {
  background: var(--folc-cream, #f0ede8);
  color: var(--folc-black, #1c1c1a);
  padding: 64px 0 32px;
  border-top: 1px solid var(--folc-border, #dedad5);
}

.js-footer .container-fluid {
  max-width: var(--max-width, 1440px);
  padding-left: var(--space-xl, 72px);
  padding-right: var(--space-xl, 72px);
}

/* Encabezados de columna ("Tienda", "Información", "Categorías",
   título del newsletter — todos comparten la clase .subtitle) */
.js-footer .subtitle {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #444 !important;
}

/* Links de menú y contacto */
.js-footer .footer-menu-link,
.js-footer .contact-link,
.js-footer .contact-info li {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  color: #555;
}
.js-footer .footer-menu-link:hover,
.js-footer .contact-link:hover {
  color: var(--folc-wine, #256b87);
}
.js-footer .footer-menu-item {
  margin-bottom: 11px;
}
.js-footer ul.list,
.js-footer ul.contact-info {
  list-style: none;
  padding-left: 0;
}

/* Redes sociales (snipplets/social/social-links.tpl -> .social-icon) */
.js-footer .social-icon {
  color: #444;
  transition: color 0.2s ease;
}
.js-footer .social-icon svg {
  fill: #444 !important;
}
.js-footer .social-icon:hover,
.js-footer .social-icon:hover svg {
  color: var(--folc-wine, #256b87);
  fill: var(--folc-wine, #256b87) !important;
}

/* Newsletter (snipplets/newsletter.tpl) */
.js-footer .newsletter .form-control {
  background: transparent;
  border: 1px solid var(--folc-border, #dedad5);
  color: var(--folc-black, #1c1c1a);
  border-radius: 0;
}
.js-footer .newsletter .form-control::placeholder,
.js-footer .newsletter .form-control::-webkit-input-placeholder,
.js-footer .newsletter .form-control::-moz-placeholder,
.js-footer .newsletter .form-control:-ms-input-placeholder {
  color: var(--folc-gray, #888);
}
.js-footer .newsletter svg.newsletter-btn {
  fill: var(--folc-black, #1c1c1a) !important;
}

/* Barra legal (copyright + defensa del consumidor + powered by Tiendanube)
   — pasa a azul como remate, texto blanco (buen contraste sobre --folc-wine) */
.js-footer .footer-legal {
  background: var(--folc-wine, #256b87);
  padding: 24px 0;
  margin-top: 32px;
}
.js-footer .footer-legal,
.js-footer .footer-legal a,
.js-footer .footer-legal div {
  font-size: 12px;
  color: var(--folc-white, #fff);
}
.js-footer .footer-legal a {
  text-decoration: underline;
}
.js-footer .footer-legal a:hover {
  color: rgba(255, 255, 255, 0.7);
}
.js-footer .footer-legal svg {
  fill: var(--folc-white, #fff) !important;
}

@media (max-width: 900px) {
  .js-footer .container-fluid {
    padding-left: var(--space-md, 24px);
    padding-right: var(--space-md, 24px);
  }
}


/* ============================================================
   FIN — folc-footer.css
   ============================================================ */