/* ==========================================================================
   Componente: Buen Fin (carrusel de promociones de temporada)
   Reutiliza el carrusel de destinos (.destinations__group / __track /
   __controls + js/slider.js); aquí solo vive lo propio de la promoción.
   ========================================================================== */

.buen-fin {
  /* Mismo crema que la sección de testimonios */
  background: linear-gradient(135deg, #fdf9ee 0%, #f2e4c8 100%);
}

.buen-fin__title-accent {
  color: var(--primary);
  font-style: italic;
}

.buen-fin__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-button);
  background-color: var(--accent);
  color: var(--text-color);
  font-family: var(--font-nav);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

/* Tarjeta de promoción: el flyer ya trae destino y precio, así que se
   muestra completo (4:5) y el CTA vive debajo, no encima de la imagen */
.destinations__track .promo-card {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: auto;
  background-color: var(--white);
}

.promo-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Flyers con otra proporción (ej. 24 MSI, casi cuadrado): se muestran
   completos sobre un degradado con los tonos de sus bordes */
.promo-card__image--contain {
  object-fit: contain;
  background: linear-gradient(180deg, #102b4c 0%, #59454b 100%);
}

.promo-card__body {
  padding: var(--space-16);
}

.promo-card__cta {
  width: 100%;
  padding-inline: var(--space-16);
}

.buen-fin__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-48);
  text-align: center;
}

@media (min-width: 600px) {
  .destinations__track .promo-card {
    width: 320px;
  }
}

@media (min-width: 1200px) {
  .destinations__track .promo-card {
    width: 340px;
  }
}