/**
 * Pilgrim Bag — capa “tienda” en todas las vistas que cargan el design system.
 * La home sobreescribe #navbar en home.css (barra transparente hasta .scrolled).
 */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(245, 240, 235, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(28, 28, 26, 0.08);
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease,
    backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

@media (max-width: 639px) {
  #navbar {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Campo newsletter del pie global (antes solo en home.css / catalogo.css) */
.newsletter-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245, 240, 235, 0.4);
  outline: none;
  color: #f5f0eb;
  font-family: 'Inter', sans-serif;
  padding: 12px 0;
  width: 100%;
}
.newsletter-input::placeholder {
  color: rgba(245, 240, 235, 0.4);
}
.newsletter-input:focus {
  border-bottom-color: #e8195a;
}

/* Logo horizontal en pie oscuro (misma apariencia que en home) */
.footer-logo-invert {
  filter: brightness(0) invert(1);
  opacity: 1;
}