@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --ba-text:#1b1f2a;
  --ba-muted:#7a8194;

  /* Paleta Beauty */
  --ba-pink:#ec4899;
  --ba-purple:#8b5cf6;
  --ba-lilac:#a78bfa;
  --ba-rose:#fb7185;

  --ba-dark:#111827;
  --ba-line: rgba(17,24,39,.12);
  --ba-radius: 18px;
}

html,body{ height:100%; }

body{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ba-text);
  /* Fondo con más rosa/lila/morado */
  background:
    radial-gradient(900px 340px at 12% 14%, rgba(236,72,153,.38), transparent 62%),
    radial-gradient(900px 360px at 86% 18%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(900px 360px at 30% 92%, rgba(167,139,250,.28), transparent 62%),
    linear-gradient(180deg, #fff7fb 0%, #f3f2ff 55%, #f8f1ff 100%);
}

/* =========================
   HEADER “SOBRESALE”
   ========================= */
.ba-nav{
  position: sticky;
  top: 0;
  z-index: 1030;

  /* Glass + gradiente */
  background:
    linear-gradient(135deg, rgba(236,72,153,.18), rgba(139,92,246,.16)),
    rgba(255,255,255,.72);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 55px rgba(17,24,39,.12);
}

.ba-brand{ letter-spacing:.2px; }

.ba-logo{
  width: 86px;
  height: 86px;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(236,72,153,.20);
}

/* En pantallas pequeñas no lo hagas tan gigante */
@media (max-width: 576px){
  .ba-logo{
    width: 46px;
    height: 46px;
  }
}

.navbar .nav-link{
  font-weight: 500;
  color: rgba(17,24,39,.80) !important;
}
.navbar .nav-link:hover{
  color: rgba(17,24,39,1) !important;
}

/* =========================
   HERO / SECCIONES
   ========================= */
.ba-hero{
  border-radius: calc(var(--ba-radius) + 8px);
  border: 1px solid rgba(255,255,255,.65);

  background:
    radial-gradient(900px 320px at 18% 18%, rgba(236,72,153,.22), transparent 62%),
    radial-gradient(800px 300px at 82% 16%, rgba(139,92,246,.22), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.55));

  box-shadow: 0 22px 70px rgba(17,24,39,.10);
}

.ba-hero h1{ font-weight: 700; }

/* =========================
   BOTONES
   ========================= */
.btn-ba{
  border: 0;
  color: #fff;
  border-radius: 999px;
  padding: .62rem 1.05rem;

  background: linear-gradient(135deg, var(--ba-pink), var(--ba-purple));
  box-shadow: 0 16px 35px rgba(236,72,153,.22);
}
.btn-ba:hover{ filter: brightness(.97); color:#fff; }

.btn-ba-outline{
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.16);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
}
.btn-ba-outline:hover{
  border-color: rgba(17,24,39,.28);
  background: rgba(255,255,255,.85);
}

.badge-ba{
  background: rgba(236,72,153,.12);
  color: #be185d;
  border: 1px solid rgba(236,72,153,.18);
  font-weight: 700;
}

/* =========================
   CARDS (menos blanco plano)
   ========================= */
.ba-card{
  border-radius: var(--ba-radius);
  border: 1px solid rgba(255,255,255,.65);

  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  backdrop-filter: blur(10px);

  box-shadow: 0 18px 55px rgba(17,24,39,.10);
}
.ba-card:hover{
  box-shadow: 0 24px 75px rgba(17,24,39,.13);
  transform: translateY(-1px);
  transition: .18s ease;
}

/* Imagen producto */
.ba-img{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-top-left-radius: var(--ba-radius);
  border-top-right-radius: var(--ba-radius);
  background: rgba(255,255,255,.75);
}

/* Category tile */
.ba-tile{
  border-radius: var(--ba-radius);
  border: 1px solid rgba(255,255,255,.65);

  background:
    radial-gradient(400px 180px at 20% 20%, rgba(236,72,153,.14), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.60));

  overflow: hidden;
  box-shadow: 0 16px 45px rgba(17,24,39,.09);
}
.ba-tile:hover{
  box-shadow: 0 22px 70px rgba(17,24,39,.12);
  transform: translateY(-1px);
  transition: .18s ease;
}
.ba-tile img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  background: rgba(255,255,255,.75);
}
.ba-tile .title{ font-weight: 700; }

.ba-muted{ color: var(--ba-muted); }

/* =========================
   FOOTER “SOBRESALE”
   ========================= */
.ba-footer{
  border-top: 1px solid rgba(255,255,255,.55);

  background:
    linear-gradient(135deg, rgba(236,72,153,.16), rgba(139,92,246,.14)),
    rgba(255,255,255,.70);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 -18px 55px rgba(17,24,39,.10);
}

/* Alerts más suaves */
.alert{
  border: 1px solid rgba(255,255,255,.70);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}