/* Casos de uso — carrusel responsive (3 en desktop, 1 en móvil) */

#casos-uso .casos-carousel,
.tv-caso-uso-page .casos-carousel {
  position: relative;
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}

#casos-uso .casos-carousel-viewport,
.tv-caso-uso-page .casos-carousel-viewport {
  container-type: inline-size;
  container-name: casos-carousel;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

#casos-uso .casos-carousel-viewport::-webkit-scrollbar,
.tv-caso-uso-page .casos-carousel-viewport::-webkit-scrollbar {
  display: none;
}

#casos-uso .casos-carousel-track,
.tv-caso-uso-page .casos-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: max-content;
  min-width: 100%;
}

#casos-uso .casos-carousel-track .caso-card,
#casos-uso .casos-carousel-track .caso-card-link,
.tv-caso-uso-page .casos-carousel-track .caso-feature-card {
  flex: 0 0 100cqw;
  width: 100cqw;
  max-width: none;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#casos-uso .casos-carousel-track .caso-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 1rem;
}

#casos-uso .casos-carousel-track .caso-card-link:focus-visible {
  outline: 2px solid #0052cc;
  outline-offset: 3px;
}

#casos-uso .section-inner {
  --section-inline-pad: 1.25rem;
}

@media (min-width: 640px) {
  #casos-uso .section-inner {
    --section-inline-pad: 1.5rem;
  }
}

@media (min-width: 768px) {
  #casos-uso .casos-carousel-track,
  .tv-caso-uso-page .casos-carousel-track {
    gap: 2rem;
  }

  #casos-uso .casos-carousel-track .caso-card,
  #casos-uso .casos-carousel-track .caso-card-link,
  .tv-caso-uso-page .casos-carousel-track .caso-feature-card {
    flex-basis: calc((100cqw - 4rem) / 3);
    width: calc((100cqw - 4rem) / 3);
  }

  .tv-caso-uso-page .casos-carousel:not([data-force-dots]) .casos-carousel-dots {
    display: none;
  }

  .tv-caso-uso-page .casos-carousel[data-force-dots] .casos-carousel-dots {
    display: flex;
  }
}

#casos-uso .casos-carousel-dots,
.tv-caso-uso-page .casos-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.35rem;
  padding: 0;
  list-style: none;
}

#casos-uso .casos-carousel-dot,
.tv-caso-uso-page .casos-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgba(0, 82, 204, 0.22);
  cursor: pointer;
  transition:
    width 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

#casos-uso .casos-carousel-dot.is-active,
.tv-caso-uso-page .casos-carousel-dot.is-active {
  width: 1.35rem;
  background: linear-gradient(90deg, #0052cc, #0ea5e9);
  box-shadow: 0 0 10px rgba(0, 82, 204, 0.24);
}

#casos-uso .casos-carousel-dot:focus-visible,
.tv-caso-uso-page .casos-carousel-dot:focus-visible {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #casos-uso .casos-carousel-viewport,
  .tv-caso-uso-page .casos-carousel-viewport {
    scroll-behavior: auto;
  }
}

/* Hero landing — imágenes horizontales (casos de uso) */

.tv-caso-uso-page .tv-caso-hero-figure {
  margin: 0;
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.35);
  background: transparent;
}

.tv-caso-uso-page .tv-caso-hero-figure--mobile {
  margin: 1.5rem auto 0;
  max-width: min(100%, 30rem);
}

.tv-caso-uso-page .tv-caso-hero-figure--desktop {
  max-width: min(100%, 36rem);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .tv-caso-uso-page .tv-caso-hero-figure--desktop {
    margin-left: auto;
    margin-right: 0;
    justify-self: end;
  }
}

.tv-caso-uso-page .tv-caso-hero-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.tv-caso-uso-page .tv-caso-hero-figure--clip .tv-caso-hero-img {
  transform: scale(1.03);
  transform-origin: center center;
}

/* Cómo funciona — carrusel móvil, grilla en tablet/desktop */

#como-funciona .casos-carousel {
  position: relative;
  width: 100%;
}

#como-funciona .casos-carousel-viewport {
  container-type: inline-size;
  container-name: como-funciona-carousel;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

#como-funciona .casos-carousel-viewport::-webkit-scrollbar {
  display: none;
}

#como-funciona .casos-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: max-content;
  min-width: 100%;
}

#como-funciona .casos-carousel-track .como-funciona-card {
  flex: 0 0 100cqw;
  width: 100cqw;
  max-width: none;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#como-funciona .casos-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.35rem;
  padding: 0;
  list-style: none;
}

#como-funciona .casos-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: rgba(0, 82, 204, 0.22);
  cursor: pointer;
  transition:
    width 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

#como-funciona .casos-carousel-dot.is-active {
  width: 1.35rem;
  background: linear-gradient(90deg, #0052cc, #0ea5e9);
  box-shadow: 0 0 10px rgba(0, 82, 204, 0.24);
}

#como-funciona .casos-carousel-dot:focus-visible {
  outline: 2px solid #0052cc;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  #como-funciona .casos-carousel-track {
    gap: 2rem;
  }

  #como-funciona .casos-carousel-track .como-funciona-card {
    flex-basis: calc((100cqw - 2rem) / 2);
    width: calc((100cqw - 2rem) / 2);
  }
}

@media (min-width: 768px) {
  #como-funciona .casos-carousel-viewport {
    overflow: visible;
    scroll-snap-type: none;
  }

  #como-funciona .casos-carousel-dots {
    display: none;
  }
}

@media (min-width: 1024px) {
  #como-funciona .casos-carousel-track .como-funciona-card {
    flex-basis: calc((100cqw - 6rem) / 4);
    width: calc((100cqw - 6rem) / 4);
  }
}

@media (prefers-reduced-motion: reduce) {
  #como-funciona .casos-carousel-viewport {
    scroll-behavior: auto;
  }
}