/* Carrusel home — CSS propio, aislado del resto del home */
.home-carrusel {
  --hc-gap: 1rem;
  --hc-pad-x: 1.25rem;
  --hc-max: 1100px;
  --hc-radius: 0;
  width: 100%;
  padding: 2.5rem 0 2.75rem;
  background: #f3f7fa;
}

.home-carrusel__inner {
  position: relative;
  max-width: var(--hc-max);
  margin: 0 auto;
  padding: 0 var(--hc-pad-x);
}

.home-carrusel__viewport {
  overflow: hidden;
  width: 100%;
}

.home-carrusel__track {
  display: flex;
  gap: var(--hc-gap);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.home-carrusel__slide {
  flex: 0 0 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  background: #d9e4ec;
}

.home-carrusel__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.home-carrusel__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(29, 29, 27, 0.72);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.home-carrusel__btn:hover,
.home-carrusel__btn:focus-visible {
  background: #2cabe2;
  outline: none;
}

.home-carrusel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.home-carrusel__btn--prev {
  left: 0.35rem;
}

.home-carrusel__btn--next {
  right: 0.35rem;
}

.home-carrusel__btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-carrusel__dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}

.home-carrusel__dot {
  width: 0.55rem;
  height: 0.55rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: #9bb3c4;
  cursor: pointer;
}

.home-carrusel__dot.is-active {
  background: #2cabe2;
  width: 1.35rem;
}

@media (min-width: 768px) {
  .home-carrusel {
    --hc-gap: 1.25rem;
    --hc-pad-x: 2rem;
    padding: 3.25rem 0 3.5rem;
  }

  .home-carrusel__slide {
    flex: 0 0 calc((100% - var(--hc-gap)) / 2);
    max-width: calc((100% - var(--hc-gap)) / 2);
    aspect-ratio: 1 / 1.08;
  }

  .home-carrusel__btn--prev {
    left: -0.15rem;
  }

  .home-carrusel__btn--next {
    right: -0.15rem;
  }
}