/* Stories_Carousel: cards de 360px con scroll-snap; flechas + botón "Conoce las historias". */
.xg-stories {
  display: flex;
  flex-direction: column;
  gap: var(--xg-space-6);
  padding-inline: var(--xg-inner-pad);
}

.xg-stories__viewport {
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Espacio para que la sombra y el "lift" en hover no se recorten */
  padding-block: 20px;
  margin-block: -20px;
  cursor: grab;
}

.xg-stories__viewport::-webkit-scrollbar {
  display: none;
}

.xg-stories__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.xg-stories__viewport.is-dragging a {
  pointer-events: none;
}

.xg-stories__track {
  display: flex;
  gap: var(--xg-space-7);
  width: max-content;
}

:where(.xg-story-card) span {
  display: block;
}

.xg-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  width: 360px;
  border-radius: var(--xg-radius-sm);
  background: var(--xg-surface-cont-2);
  box-shadow: var(--xg-elevation-1);
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 400ms var(--xg-ease-out), box-shadow 400ms var(--xg-ease-out);
}

.xg-story-card__media {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.xg-story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--xg-ease-out);
}

/* Velo degradado que aparece en hover para dar profundidad a la foto */
.xg-story-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 80, 77, 0) 40%, rgba(22, 29, 28, 0.85));
  opacity: 0;
  transition: opacity 400ms var(--xg-ease-out);
}

.xg-story-card__content {
  padding: var(--xg-space-4) 30px;
}

.xg-story-card__tag {
  color: var(--xg-primary);
  padding-inline: 2px;
}

.xg-story-card__title {
  padding-block: var(--xg-space-4);
}

/* Línea inferior que crece en hover */
.xg-story-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--xg-primary), var(--xg-secondary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--xg-ease-out);
}

.xg-story-card:hover,
.xg-story-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: var(--xg-elevation-5);
}

.xg-story-card:hover .xg-story-card__media img,
.xg-story-card:focus-visible .xg-story-card__media img {
  transform: scale(1.08);
}

.xg-story-card:hover .xg-story-card__media::after {
  opacity: 1;
}

.xg-story-card:hover::after,
.xg-story-card:focus-visible::after {
  transform: scaleX(1);
}

.xg-stories__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--xg-space-4);
}

.xg-stories__arrows {
  display: flex;
  gap: 10px;
}

/* Barra de progreso del carrusel (no está en el Figma; ayuda a saber cuánto falta) */
.xg-stories__progress {
  flex: 1;
  max-width: 200px;
  height: 2px;
  border-radius: 2px;
  background: var(--xg-outline-variant);
  overflow: hidden;
}

.xg-stories__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--xg-primary);
  transform: scaleX(var(--xg-progress, 0.33));
  transform-origin: left center;
  transition: transform var(--xg-dur) var(--xg-ease-out);
}

.xg-stories__nav {
  display: flex;
  align-items: center;
  gap: var(--xg-space-5);
}

@media (max-width: 767px) {
  .xg-stories__track {
    gap: var(--xg-space-4);
  }

  .xg-story-card {
    width: min(300px, 80vw);
  }

  .xg-stories__progress {
    display: none;
  }
}