/* Transform + Gap + center + margin-right + bullets + fixes + viewport */

:root {
  --carousel-duration: 5000ms;
}

.carrusel-crema {
  display: flex;
  padding: var(--size-space-64, 64px) var(--size-space-16, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  background: var(--Color-Surface-General-4, #FFF5EC);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* ✅ base 360px: compensa padding de 16px — sin gap */
.carrusel-slider-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  /* width: calc(100% + 32px); */
  /* margin-left: -16px; */
  /* overflow: hidden; */
  /* padding-left: 16px; */
}

/* ✅ margin y padding a 0 */
.carrusel-crema .carrusel-contenedor {
  display: flex;
  /* align-items: stretch; */
  /* height: 515px; */
  margin: 0;
  padding: 0;
  /* padding: 16px; */
}

.carrusel-crema .carrusel-contenedor::-webkit-scrollbar {
  display: none;
}

.carrusel-crema .card-informacion {
  display: flex !important;
  /* height: 515px; */
  width: 304px;
  /* padding: 0 0.195px 16.593px 0; */
  padding-bottom: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  transition: width 0.3s ease;
}

.titulo-carrusel,
.descripcion-carrusel {
  color: #2C2C2C;
  margin: 0;
  padding-bottom: 8px;
}

.card-image-wrapper {
  width: 100%;
  height: 324px;
  border-radius: 12px;
  overflow: hidden;
  background: #ddd;
}

.card-image-wrapper picture,
.card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: underline;
  color: #2F6852;
  font-weight: 500;
}

/* ─── CONTROLES ──────────────────────────────────────────────────────────── */

.carousel-controls {
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-16, 16px);
}

/* ✅ align-items: center — evita que los bullets se apilen verticalmente */
.controls-capsule-indicators {
  display: flex;
  padding: var(--size-space-4, 4px);
  align-items: center;
  border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
  background: var(--Color-Surface-General-1, #FFF);
}

/* ✅ width: auto — se adapta a cualquier número de bullets */
.pagination-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 24px;
}

.carousel-indicators.swiper-pagination-horizontal {
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-4, 4px);
  align-self: stretch;
  position: relative !important;
  bottom: auto !important;
}

.indicator {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  outline: none;
  box-sizing: border-box;
}

.indicator-dot,
.indicator.active .indicator-dot {
  display: none !important;
}

.icon-dot-empty,
.icon-dot-filled {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.indicator .icon-dot-empty {
  opacity: 1;
}

.indicator .icon-dot-filled {
  opacity: 0;
}

.indicator.active .icon-dot-empty {
  opacity: 0;
}

.indicator.active .icon-dot-filled {
  opacity: 1;
}

.progress-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) !important;
  width: 32px !important;
  height: 32px !important;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.indicator.active .progress-ring {
  opacity: 1;
}

.progress-ring-bg {
  fill: none;
  stroke: #F5F5F5;
  stroke-width: 2.5;
}

.progress-ring-fill {
  fill: none;
  stroke: #00875a;
  stroke-width: 2.5;
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
}

.indicator.active .progress-ring-fill.run {
  animation: countdown var(--carousel-duration) linear forwards;
}

.carrusel-crema.paused .indicator.active .progress-ring-fill.run {
  animation-play-state: paused;
}

@keyframes countdown {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 88;
  }
}

.play-pause-btn {
  display: flex;
  width: 32px;
  height: 32px;
  padding: var(--size-space-8, 8px);
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-xxl, 100px);
  border: var(--border-width-s, 1px) solid var(--Color-Border-General-1, #C8D9D0);
  background: var(--Color-Surface-General-1, #FFF);
}

.icon-pause {
  width: var(--sds-size-icon-small);
  height: var(--sds-size-icon-small);
  flex-shrink: 0;
}

.hidden {
  display: none !important;
}

/* ─── 576px ──────────────────────────────────────────────────────────────── */

@media (min-width: 576px) {
  .carrusel-crema {
    padding: 64px 42px;
  }

  .carrusel-crema .carrusel-contenedor {
    /* height: 425px; */
  }

  .carrusel-crema .card-informacion:first-child {
    width: 492px !important;
    /* height: 480px !important; */
    /* padding: 0 0.195px 27.593px 0; */
  }

}

/* ─── 768px ──────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .carrusel-crema {
    padding: 64px 48px;
  }

  .carrusel-crema .card-informacion:first-child {
    width: 672px !important;
    /* height: 480px !important; */
    /* padding: 0 0.195px 27.593px 0; */
  }
}

/* ─── 992px: centrado por JS con slidesOffsetBefore ─────────────────────── */

@media (min-width: 992px) {
  .carrusel-crema {
    padding: 80px 82px;
  }

  .carrusel-crema .card-informacion:first-child {
    width: 614px !important;
    /* height: 480px !important; */
    /* padding: 0 0.195px 27.593px 0; */
  }
}

/* ─── 1200px ─────────────────────────────────────────────────────────────── */

@media (min-width: 1200px) {
  .carrusel-crema {
    padding: 80px 102px;
  }
}

/* ─── 1920px ─────────────────────────────────────────────────────────────── */

@media (min-width: 1920px) {
  .carrusel-crema {
    padding: 80px 324px;
  }

  .carousel-controls {
    display: none;
  }
}