/* ===========================
   PAGINA PROMOCIONES — LIGHT
=========================== */

.promo-page {
  
  background: linear-gradient(180deg,#f8fafc,#eef2ff);
  color: #0f172a;
}

/* HERO */

.promo-hero {
  text-align: center;
  padding: 90px 20px 50px;
  background:
    radial-gradient(circle at top,rgba(34,197,94,.18),transparent 55%),
    linear-gradient(180deg,#eef2ff,#f8fafc);
}

.promo-badge {
  background: #22c55e;
  color: #052e16;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
}

.promo-hero h1 {
  font-size: 3rem;
  margin-top: 16px;
}

.promo-hero p {
  max-width: 600px;
  margin: 12px auto;
  color: #475569;
}

/* TOOLBAR */

.promo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.promo-toolbar h2 {
  font-size: 1.4rem;
}

.promo-toolbar input {
  max-width: 260px;
  border-radius: 12px;
}

/* CARD */

.promo-card {
  background: white;
  border-radius: 20px;
  padding: 22px;
  height: 100%;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .25s ease;
}

.promo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

.promo-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.promo-top img {
  max-height:42px;
  object-fit: contain;
}

.promo-top time {
  font-size:.75rem;
  color:#64748b;
}

.promo-card h5 {
  margin:14px 0 6px;
  font-weight:600;
}

.promo-card p {
  color:#475569;
  font-size:.9rem;
}

/* BOTON */

.promo-card .btn {
  border-radius: 14px;
}


/* ===========================
   RESPONSIVE PROMOCIONES
=========================== */

@media (max-width: 768px) {

  .promo-hero {
    padding: 70px 16px 36px;
  }

  .promo-hero h1 {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .promo-hero p {
    font-size: .95rem;
  }

  .promo-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .promo-toolbar input {
    max-width: 100%;
  }

}

@media (max-width: 480px) {

  .promo-hero h1 {
    font-size: 1.9rem;
  }

}