/* =========================================================
   promo.css — Estilos finales para sección de Juegos Promocionales
   Estructura horizontal con imagen + contenido
   Responsive y sin clases innecesarias
========================================================= */

/* 🔹 1. Sección contenedora */
.promo-section {
  padding: var(--sp-10) var(--sp-4);
  text-align: center;
}

/* 🔹 2. Título de la sección */
.section-title {
  font-size: var(--fs-800);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-8);
  color: var(--clr-text);
}

/* 🔹 3. Contenedor de tarjetas */
.promo-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

/* 🔹 4. Tarjeta promocional */
.promo-card {
  width: 100%;
  max-width: 700px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  background-color: var(--clr-surface);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.promo-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* 🔹 5. Contenido horizontal interno */
.promo-card__wrapper {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
}

/* 🔹 6. Imagen */
.promo-card__image {
  width:  200x;
  height: 200px;
  border-radius: var(--radius-l);
  overflow: hidden;
  flex-shrink: 0;
}

.promo-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: palpitar 2.5s ease-in-out infinite;
}

/* 🔹 7. Contenido textual */
.promo-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.promo-card__title {
  font-size: var(--fs-700);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
  color: var(--clr-text);
}

.promo-card__description {
  font-size: var(--fs-400);
  color: var(--clr-text-muted);
  margin-bottom: var(--sp-4);
  line-height: 1.4;
}

/* 🔹 8. Botón centrado */
.promo-card__info .btn {
  align-self: center;
}

/* 🔹 9. Animación de palpitación */
@keyframes palpitar {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

/* 🔹 10. Diseño Responsive para móviles */
@media (max-width: 767px) {
  .promo-card__wrapper {
    flex-direction: column;
  }

  .promo-card__image {
    width:  100%;
    height: 320px;
  }

  .promo-card__info {
    align-items: center;
    text-align: center;
  }

  .promo-card__info .btn {
    margin-top: var(--sp-2);
  }
}


.promo-card {
  border: 2px solid rgba(128, 0, 32, 0.3); /* borde burdeos semi-transparente */
}


.promo-card {
  border: 2px solid rgba(128, 0, 32, 0.3); /* borde burdeos semi-transparente */
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.promo-card {
  animation: fadeUp 0.8s ease-in-out;
}

.promo-card__title {
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-800);
}

.btn--primary:hover {
  box-shadow: 0 0 12px rgba(128, 0, 32, 0.6);
  transform: translateY(-2px) scale(1.05);
}