/* =========================================================
   EcomImporta — hub.css  (HUB futurista / link na bio)
   Requer future.css
   ========================================================= */

.hub { min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  padding: 58px 20px 44px; position: relative; }
.hub-inner { width: 100%; max-width: 520px; position: relative; z-index: 1; }

/* --- Perfil --- */
.profile { text-align: center; margin-bottom: 30px; }
.avatar { width: 122px; height: 122px; margin: 0 auto 22px; border-radius: 50%; position: relative; display: grid; place-items: center; }
.avatar::before { content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--cyan), var(--violet), var(--gold), var(--cyan));
  animation: spin 6s linear infinite; }
.avatar::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #0a0b12; }
@keyframes spin { to { transform: rotate(360deg); } }
.avatar span { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 44px;
  background: var(--grad-holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avatar img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid #0a0b12; }

.status-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; color: var(--green); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(52,211,153,.3);
  background: rgba(52,211,153,.06); margin-bottom: 16px; }
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.profile-name { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.verified { width: 21px; height: 21px; color: var(--cyan); }
.profile-bio { color: var(--soft); font-size: 15px; margin: 13px auto 0; max-width: 420px; }

/* --- Sociais --- */
.socials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 16px;
  border-radius: 15px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: #fff;
  border: 1px solid var(--line-2); background: var(--panel); backdrop-filter: blur(12px);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.social-btn svg { width: 19px; height: 19px; }
.social-btn:hover { transform: translateY(-2px); }
.social-wa:hover { border-color: rgba(52,211,153,.5); box-shadow: 0 12px 34px -12px rgba(52,211,153,.5); }
.social-wa svg { color: var(--green); }
.social-ig:hover { border-color: rgba(225,48,108,.5); box-shadow: 0 12px 34px -12px rgba(225,48,108,.5); }
.social-ig svg { color: #E1306C; }

/* --- Produtos --- */
.products-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--mute); margin: 0 4px 15px; display: flex; align-items: center; gap: 10px; }
.products-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.product-list { display: flex; flex-direction: column; gap: 13px; }

.product-card { display: flex; align-items: center; gap: 15px; padding: 17px 18px; border-radius: var(--r);
  position: relative; overflow: hidden; transition: transform .25s var(--ease); }
.product-card:hover { transform: translateY(-3px); }
.product-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,.02) 45%, rgba(34,211,238,.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: background .3s; }
.product-card { background: var(--panel); backdrop-filter: blur(18px); }
.product-card:hover::before { background: linear-gradient(140deg, rgba(34,211,238,.5), rgba(139,92,246,.3) 55%, rgba(245,196,81,.3)); }
.product-card:hover .pc-arrow { transform: translateX(4px); color: var(--cyan); }

.pc-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  color: #04121A; background: var(--grad-future); box-shadow: 0 8px 22px -8px rgba(34,211,238,.6); }
.pc-icon svg { width: 22px; height: 22px; }
.pc-icon.gold { background: var(--grad-gold); box-shadow: 0 8px 22px -8px rgba(245,196,81,.6); color: #180F02; }
.pc-icon.violet { background: linear-gradient(120deg, #8B5CF6, #6366F1); box-shadow: 0 8px 22px -8px rgba(139,92,246,.6); color: #fff; }

.pc-body { flex: 1 1 auto; min-width: 0; }
.pc-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.pc-sub { color: var(--mute); font-size: 13px; margin-top: 2px; }
.pc-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.pc-arrow { color: var(--mute); transition: transform .22s var(--ease), color .22s; }
.pc-arrow svg { width: 18px; height: 18px; }

.hub-footer { margin-top: 42px; text-align: center; color: var(--mute); font-size: 12.5px; line-height: 1.7; font-family: var(--font-mono); }
.hub-footer a:hover { color: var(--cyan); }

@media (max-width: 400px) { .pc-meta .chip { display: none; } .pc-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 420px) {
  .hub { padding: 44px 16px 34px; }
  .avatar { width: 104px; height: 104px; } .avatar span { font-size: 38px; }
  .profile-name { font-size: 24px; }
  .social-btn { padding: 14px 10px; font-size: 13.5px; }
  .product-card { padding: 15px; gap: 13px; }
}
@media (max-width: 340px) { .socials { grid-template-columns: 1fr; } }