:root{
  --brand:#7b5cff;
  --brand-2:#00d4ff;
  --accent:#ff7a59;
  --bg:#f7f8fb;
}
body.bg-body{ background: var(--bg); }

/* Navbar gradiente */
.gradient-nav{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* Botón de acción pill */
.btn-pill{ border-radius: 999px; }

/* Hero */
.hero{
  background: linear-gradient(135deg, rgba(123,92,255,.12), rgba(0,212,255,.12));
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Tarjetas */
.card:hover{ transform: translateY(-2px); transition: .2s ease; }
.badge-pro{ background: #ffe9a3; color:#6b4c00; }

/* Chips categorías */
.cat-chip{
  display:block; text-align:center;
  border:1px dashed rgba(0,0,0,.25);
  background:#fff; border-radius:12px; padding:.7rem .8rem;
  font-weight:600;
}
.cat-chip i{ margin-right:.4rem; }

/* Banners enmarcados (si no hay activo) */
.banner-frame{
  border:2px dashed #b9c0ff; border-radius:14px; background:#f5f7ff;
  color:#3b4bcc; display:flex; align-items:center; justify-content:center;
  text-align:center; font-weight:700;
}
.banner-frame small{ display:block; font-weight:400; color:#6b78c7; }

/* Medidas sugeridas */
.banner-970x250{ width:100%; max-width:100%; height:250px; }
.banner-728x90 { width:100%; height:90px; }
.banner-300x250{ width:100%; max-width:300px; height:250px; }

/* Sección sugerencias */
.sug-btn{ border-radius:12px; background:#fff; border:1px solid #e8e8ee; }

/* Links “stretched” con subrayado */
a.stretched-link{text-decoration:none}
a.stretched-link:hover{text-decoration:underline}