body { min-height: 100vh; }
.nav-link { position: relative; }
.nav-link::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:#111; transition:.3s; }
.nav-link:hover::after { right:0; }
.section-kicker { font-size:.72rem; text-transform:uppercase; letter-spacing:.22em; color:rgba(0,0,0,.45); }
.section-title { margin-top:.5rem; font-family:Montserrat,sans-serif; font-size:clamp(2rem,4vw,3.4rem); font-weight:600; }
.input { width:100%; border:1px solid rgba(0,0,0,.12); border-radius:.8rem; padding:.75rem .9rem; outline:none; background:#fff; transition:.2s; }
.input:focus { border-color:#111; box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.filter-label { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.btn-primary,.btn-secondary { min-height:46px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.75rem 1.25rem; font-size:.875rem; font-weight:600; transition:.25s; }
.btn-primary { background:#111; color:white; }
.btn-primary:hover { transform:translateY(-2px); background:#2a2a2a; }
.btn-secondary { border:1px solid rgba(0,0,0,.14); background:white; }
.btn-secondary:hover { background:#f5f5f5; }
.btn-primary svg,.btn-secondary svg,.social-icon svg,.admin-action svg { width:18px; height:18px; }
.option-btn { border:1px solid rgba(0,0,0,.14); border-radius:999px; padding:.6rem 1rem; font-size:.8rem; transition:.2s; }
.option-btn:hover,.option-btn.active { background:#111; color:#fff; border-color:#111; }
.social-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); }
.admin-action { display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; background:#f5f5f5; }
.skeleton { background:linear-gradient(90deg,#eee 25%,#f7f7f7 50%,#eee 75%); background-size:200% 100%; animation:skeleton 1.3s infinite; }
@keyframes skeleton { to { background-position:-200% 0; } }
.reveal { animation:fadeUp .8s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
.product-card { animation:fadeUp .45s ease both; }


/* Identidade visual Essencial */
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  color: #111;
  text-decoration: none;
}
.brand-logo {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 50%;
  background: #eef5f5;
  transition: transform .25s ease;
}
.brand-link:hover .brand-logo { transform: scale(1.04); }
.brand-name {
  max-width: 10.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Montserrat, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: #fff;
  text-decoration: none;
  font-family: Montserrat, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-brand-logo {
  width: 3.15rem;
  height: 3.15rem;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 50%;
  background: #eef5f5;
}
@media (min-width: 640px) {
  .brand-link { gap: .75rem; }
  .brand-logo { width: 3rem; height: 3rem; }
  .brand-name { max-width: none; font-size: 1.2rem; letter-spacing: .18em; }
}
@media (max-width: 380px) {
  .brand-logo { width: 2.25rem; height: 2.25rem; }
  .brand-name { max-width: 7.2rem; font-size: .88rem; letter-spacing: .1em; }
}