/*
  Estilos compartidos por todos los componentes de la libreria.
  Se cargan dentro del Shadow DOM, asi que NO heredan las clases del sitio.
  Solo heredan propiedades marcadas como `inherit` y las variables del sitio.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:host {
  display: block;
  /* Hereda la tipografia del contenedor de Webflow donde se coloque */
  font-family: inherit;
  color: inherit;
}

/*
  CSS plano, sin CSS Modules.
  El Shadow DOM ya aisla estos estilos del resto del sitio.
*/

.cc-carousel {
  position: relative;
  width: 100%;
}

.cc-carousel__stage {
  position: relative;
}

/* El <slot> nativo no debe participar en el layout flex */
.cc-carousel__viewport > slot {
  display: contents;
}

.cc-carousel__viewport {
  display: flex;
  gap: var(--cc-gap, 16px);
  width: 100%;
  overflow-x: auto;
  /* Evita que el contenido apilado estire el alto antes de que corra el JS */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.cc-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.cc-carousel__viewport:focus-visible {
  outline: 2px solid var(--cc-focus, #1a73e8);
  outline-offset: 4px;
}

.cc-carousel__viewport--draggable {
  cursor: grab;
  user-select: none;
}

/*
  Durante el drag apagamos el scroll-snap: si no, pelea contra el
  movimiento del mouse y se siente trabado.
*/
.cc-carousel__viewport--dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.cc-carousel__viewport--dragging a {
  pointer-events: none;
}

/* Evita el fantasma de arrastre nativo de las imagenes */
.cc-carousel__viewport img {
  -webkit-user-drag: none;
  user-select: none;
}

/*
  Webflow envuelve la Collection List en .w-dyn-list > .w-dyn-items > .w-dyn-item.
  Con display: contents esos wrappers desaparecen del layout y cada item queda
  como hijo directo del viewport flex, para que el scroll-snap funcione solo.
*/
.cc-carousel__viewport .w-dyn-list,
.cc-carousel__viewport .w-dyn-items {
  display: contents;
}

.cc-carousel__viewport > *,
.cc-carousel__viewport .w-dyn-item {
  flex: 0 0 calc(
    (100% - (var(--cc-per-view-mobile, 1) - 1) * var(--cc-gap, 16px)) /
      var(--cc-per-view-mobile, 1)
  );
  min-width: 0;
  scroll-snap-align: start;
}

.cc-carousel__empty {
  flex: 1 0 100%;
  padding: 32px;
  font-size: 0.875rem;
  text-align: center;
  color: #6b6b6b;
  border: 1px dashed #c9c9c9;
  border-radius: 4px;
}

/* ---------- Flechas ---------- */

.cc-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cc-arrow-size, 44px);
  height: var(--cc-arrow-size, 44px);
  padding: 0;
  color: var(--cc-arrow-color, #ffffff);
  background: var(--cc-arrow-bg, transparent);
  border: 1px solid var(--cc-arrow-border, #ffffff);
  border-radius: 999px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

/*
  Sin fondo, un icono blanco desaparece sobre fotos claras.
  La sombra lo despega de la imagen sin ensuciar el diseno.
*/
.cc-carousel__arrow svg {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.cc-carousel__arrow:hover {
  background: var(--cc-arrow-bg-hover, rgba(255, 255, 255, 0.16));
}

.cc-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.cc-carousel__arrow:focus-visible {
  outline: 2px solid var(--cc-focus, #1a73e8);
  outline-offset: 2px;
}

.cc-carousel__arrow--prev {
  left: var(--cc-arrow-offset, 12px);
}

.cc-carousel__arrow--next {
  right: var(--cc-arrow-offset, 12px);
}

/* Flechas debajo del carrusel: salen del posicionamiento absoluto */
.cc-carousel__arrow--inline {
  position: static;
  transform: none;
  color: var(--cc-arrow-color-inline, currentColor);
  border: 1px solid var(--cc-arrow-border-inline, #d8d8d8);
  background: transparent;
}

.cc-carousel__arrow--inline svg {
  filter: none;
}

.cc-carousel__arrow--inline:hover {
  background: var(--cc-arrow-bg-inline-hover, rgba(0, 0, 0, 0.05));
}

/* ---------- Fila de navegacion ---------- */

.cc-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.cc-carousel__nav-arrows {
  display: flex;
  gap: 8px;
}

/* ---------- Paginacion: puntos ---------- */

.cc-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.cc-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--cc-dot-color, rgba(0, 105, 180, 0.32));
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.cc-carousel__dot--active {
  width: 24px;
  background: var(--cc-dot-active-color, #0069b4);
}

.cc-carousel__dot:focus-visible {
  outline: 2px solid var(--cc-focus, #1a73e8);
  outline-offset: 2px;
}

/* ---------- Paginacion: numeros ---------- */

.cc-carousel__counter {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-family: inherit;
  font-size: var(--cc-counter-size, 0.875rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--cc-counter-color, #6b6b6b);
}

.cc-carousel__counter-current {
  font-size: var(--cc-counter-current-size, 1.25rem);
  color: var(--cc-counter-current-color, #0069b4);
}

.cc-carousel__counter-divider {
  opacity: 0.5;
}

/* ---------- Paginacion: barra ---------- */

.cc-carousel__progress {
  position: relative;
  flex: 1;
  max-width: var(--cc-progress-width, 240px);
  height: var(--cc-progress-height, 2px);
  overflow: hidden;
  background: var(--cc-progress-track, rgba(0, 105, 180, 0.2));
  border-radius: 999px;
}

.cc-carousel__progress-bar {
  display: block;
  height: 100%;
  background: var(--cc-progress-fill, #0069b4);
  border-radius: inherit;
  transition: width 0.35s ease;
}

/* ---------- Responsive ---------- */

@media (min-width: 768px) {
  .cc-carousel__viewport > *,
  .cc-carousel__viewport .w-dyn-item {
    flex-basis: calc(
      (100% - (var(--cc-per-view-tablet, 1) - 1) * var(--cc-gap, 16px)) /
        var(--cc-per-view-tablet, 1)
    );
  }
}

@media (min-width: 992px) {
  .cc-carousel__viewport > *,
  .cc-carousel__viewport .w-dyn-item {
    flex-basis: calc(
      (100% - (var(--cc-per-view-desktop, 1) - 1) * var(--cc-gap, 16px)) /
        var(--cc-per-view-desktop, 1)
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-carousel__arrow,
  .cc-carousel__dot,
  .cc-carousel__progress-bar {
    transition: none;
  }
}