.bev-topbar {
  background-color: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  padding: 0.75rem 0.5rem;
}

.bev-topbar-info {
  color: var(--topbar-muted);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color 0.2s;
}

.bev-topbar-info:hover {
  color: var(--topbar-hover);
}

.bev-topbar-marca {
  color: var(--topbar-text);
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

@media (max-width: 576px) {
  .bev-topbar-marca {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }
}

.bev-topbar-link {
  color: var(--topbar-muted);
  font-size: 0.9rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.bev-topbar-link:hover {
  color: var(--topbar-hover);
}
@media (max-width: 576px) {
  .bev-topbar-marca {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }
}

@media (max-width: 400px) {
  /* En pantallas muy angostas, info + marca + link en una sola fila con gaps fijos generan overflow horizontal. Se reduce padding lateral y se permite wrap sin romper el layout de escritorio. */
  .bev-topbar {
    padding: 0.75rem 0.35rem;
  }

  .bev-topbar-info,
  .bev-topbar-link {
    gap: 4px;
  }
}

/* Área táctil: info y link no tenían padding propio (tap area = solo altura del texto). */
.bev-topbar-info,
.bev-topbar-link {
  padding: 0.3rem 0.15rem;
}