/* potenciar-anuncio.css — estilos específicos de la página de potenciar */

/* ===== Fondo y tipografía ===== */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: radial-gradient(ellipse at center, #1a002a 0%, #0b0016 100%);
  background-size: 200% 200%;
  animation: bg 12s ease-in-out infinite alternate;
  color: #fdf4ff;
}

@keyframes bg {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}

/* ===== Cards, botones y pills ===== */
.neo-card {
  background: rgba(26, 0, 42, .86);
  border: 2px solid #ff31b6;
  box-shadow: 0 0 30px #ff00cc55, 0 0 50px #00ffcc33;
  border-radius: 1.25rem;
}

.btn-neon {
  background: linear-gradient(90deg, #ff00cc 0%, #00ffcc 100%);
  color: #fff;
  font-weight: 800;
  border-radius: .95rem;
  box-shadow: 0 0 20px #ff00ff77, 0 0 30px #00ffc355;
  transition: transform .18s cubic-bezier(.2,.9,.25,1), filter .18s;
}

.btn-neon:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.12);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  border-radius: 1rem;
  font-weight: 700;
  background: #2e003f;
  border: 1.5px solid #a21caf;
  box-shadow: 0 0 10px #f472b644, inset 0 0 8px #7c3aed33;
}

.muted {
  color: #e9d5ff;
  opacity: .85;
}

.has-extras #estado-cuenta {
  color: #34d399;
  text-shadow: 0 0 18px #34d39988;
}

/* ===== Layout centrado y espaciado vertical ===== */
.stack {
  max-width: 980px;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ===== Animaciones de entrada ===== */
.fade-up {
  opacity: 0;
  transform: translateY(14px) scale(.995);
}

.fade-up.animate-in {
  animation: fadeUp .6s ease-out forwards;
}

.fade-up.animate-in.delay-1 { animation-delay: .06s; }
.fade-up.animate-in.delay-2 { animation-delay: .12s; }
.fade-up.animate-in.delay-3 { animation-delay: .18s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== Contorno / brillo para tarjetas con TOP ===== */
.top-outline {
  position: relative;
  border-color: #ffb400 !important;
  box-shadow:
    0 0 0 2px #ffb400 inset,
    0 0 26px rgba(255,193,7,.35),
    0 10px 30px rgba(255,49,182,.18);
}

.top-outline::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 1.35rem;
  pointer-events: none;
  background: linear-gradient(90deg, #ffb400, #ffe17a, #ffb400);
  opacity: .18;
  filter: blur(6px);
}