/* widget-loop-carousel.css: estilos de presentación; comprueba sus rangos responsive al editar. */
/*! site-pro - v4.2.0 - 19-08-2026 */
.component-loop-carousel {
  --carousel-pages-size: 0;
  --carousel-pages-spacing: 10px;
  --carousel-cards-gap: 10px;
  --carousel-view-offset-size: 0;
  height: -moz-fit-content;
  height: fit-content;
  --carousel-view-padding-bottom: calc(
    var(--carousel-pages-size) + var(--carousel-pages-spacing)
  );
}
.component-loop-carousel.site-pagination-type-bullets {
  --carousel-pages-size: 6px;
}
.component-loop-carousel.site-pagination-type-fraction {
  --carousel-pages-size: 16px;
}
.component-loop-carousel.site-pagination-type-progressbar {
  --carousel-pages-size: 4px;
}
.component-loop-carousel
  .cards-container
  > .carousel-track
  > .carousel-card-active.site-edit-area-active {
  overflow: initial;
}
.component-loop-carousel .cards-container.offset-left {
  padding-inline-start: var(--carousel-view-offset-size, 0);
}
.component-loop-carousel .cards-container.offset-right {
  padding-inline-end: var(--carousel-view-offset-size, 0);
}
.component-loop-carousel .cards-container.offset-both {
  padding-inline-end: var(--carousel-view-offset-size, 0);
  padding-inline-start: var(--carousel-view-offset-size, 0);
}
.component-loop-carousel
  .carousel-view-container:not(.carousel-view-container-initialized)
  > .carousel-track,
.component-loop-carousel
  .carousel-view:not(.carousel-view-initialized)
  > .carousel-track {
  gap: var(--carousel-cards-gap);
  overflow: hidden;
}
.component-loop-carousel
  .carousel-view-container:not(.carousel-view-container-initialized)
  > .carousel-track
  > .carousel-view--slide,
.component-loop-carousel
  .carousel-view:not(.carousel-view-initialized)
  > .carousel-track
  > .carousel-view--slide {
  --number-of-gaps: max(calc(var(--carousel-cards-to-display) - 1), 0);
  --gaps-width-total: calc(var(--number-of-gaps) * var(--carousel-cards-gap));
  max-width: calc(
    (100% - var(--gaps-width-total)) / var(--carousel-cards-to-display, 1)
  );
}
.component-loop-carousel .card-first-edit {
  margin-block-start: 23px;
  min-width: 33%;
}
.component-loop-carousel .carousel-track .carousel-card a.layout {
  display: var(--display);
}
.component-loop-carousel {
  --arrow-prev-top-align: 50%;
  --arrow-prev-top-position: 0px;
  --arrow-prev-caption-spacing: 15px;
  --arrow-next-top-align: 50%;
  --arrow-next-top-position: 0px;
  --arrow-next-caption-spacing: 15px;
  --arrow-prev-left-align: 0px;
  --arrow-prev-left-position: 0px;
  --arrow-next-right-align: 0px;
  --arrow-next-right-position: 0px;
  --arrow-next-translate-x: 0px;
  --arrow-next-translate-y: 0px;
  --arrow-prev-translate-x: 0px;
  --arrow-prev-translate-y: 0px;
}
.component-loop-carousel
  .carousel-button.carousel-button-next,
.component-loop-carousel
  .carousel-button.carousel-button-prev {
  border-style: var(--arrow-normal-border-type);
  color: var(--arrow-normal-color, hsla(0, 0%, 93.3%, 0.9));
  font-size: var(--arrow-size, 25px);
  transition-duration: 0.25s;
  z-index: 2;
}
.component-loop-carousel
  .carousel-button.carousel-button-next
  svg,
.component-loop-carousel
  .carousel-button.carousel-button-prev
  svg {
  fill: var(--arrow-normal-color, hsla(0, 0%, 93.3%, 0.9));
}
.component-loop-carousel
  .carousel-button.carousel-button-next:hover,
.component-loop-carousel
  .carousel-button.carousel-button-prev:hover {
  border-style: var(--arrow-hover-border-type);
  color: var(--arrow-hover-color, hsla(0, 0%, 93.3%, 0.9));
}
.component-loop-carousel
  .carousel-button.carousel-button-next:hover
  svg,
.component-loop-carousel
  .carousel-button.carousel-button-prev:hover
  svg {
  fill: var(--arrow-hover-color, hsla(0, 0%, 93.3%, 0.9));
}
.component-loop-carousel.block
  :is(.carousel-view, .carousel-view-container)
  ~ .carousel-button-next {
  right: calc(var(--arrow-next-right-align) + var(--arrow-next-right-position));
  top: calc(
    var(--arrow-next-top-align) + var(--arrow-next-top-position) -
      var(--arrow-next-caption-spacing)
  );
  transform: translate(
    var(--arrow-next-translate-x),
    var(--arrow-next-translate-y)
  );
}
.component-loop-carousel.block
  :is(.carousel-view, .carousel-view-container)
  ~ .carousel-button-prev {
  left: calc(var(--arrow-prev-left-align) + var(--arrow-prev-left-position));
  top: calc(
    var(--arrow-prev-top-align) + var(--arrow-prev-top-position) -
      var(--arrow-prev-caption-spacing)
  );
  transform: translate(
    var(--arrow-prev-translate-x),
    var(--arrow-prev-translate-y)
  );
}
.component-loop-carousel
  .carousel-view-container-horizontal
  ~ .carousel-pages-progressbar,
.component-loop-carousel
  .carousel-view-horizontal
  ~ .carousel-pages-progressbar {
  height: var(--carousel-pages-size);
}
.component-loop-carousel
  .carousel-pages-progressbar
  .carousel-pages-progressbar-fill {
  background: var(--progressbar-normal-color, #000);
}
.component-loop-carousel
  .carousel-pages-progressbar
  .carousel-pages-progressbar-fill:hover {
  background: var(--progressbar-hover-color, #000);
}
.component-loop-carousel .carousel-pages-fraction {
  color: var(--fraction-color, #000);
}
.component-loop-carousel .carousel-pages-bullet {
  background: var(--dots-normal-color, #000);
  height: var(--carousel-pages-size);
  width: var(--carousel-pages-size);
}
.component-loop-carousel .carousel-pages-bullet:hover {
  background: var(--dots-hover-color, #000);
  opacity: 1;
}
.component-loop-carousel.site-in-place-template-editable
  .cards-container {
  overflow: visible;
  overflow-x: clip;
}
.component-loop-carousel .carousel-view-horizontal > .carousel-pages-bullets,
.component-loop-carousel .carousel-pages,
.component-loop-carousel
  .carousel-pages-bullets.carousel-pages-horizontal,
.component-loop-carousel .carousel-pages-custom,
.component-loop-carousel .carousel-pages-fraction {
  font-size: var(--carousel-pages-size);
  line-height: var(--carousel-pages-size);
}
.component-loop-carousel.site-pagination-position-outside:not(
    :has(> .content-box)
  )
  > .carousel-view,
.component-loop-carousel.site-pagination-position-outside:not(
    :has(> .content-box)
  )
  > .carousel-view-container,
.component-loop-carousel.site-pagination-position-outside
  > .content-box
  > .carousel-view,
.component-loop-carousel.site-pagination-position-outside
  > .content-box
  > .carousel-view-container {
  padding-bottom: var(--carousel-view-padding-bottom);
}
.component-loop-carousel.site-pagination-position-outside:not(
    :has(> .content-box)
  )
  > .carousel-view
  .site-background-slideshow,
.component-loop-carousel.site-pagination-position-outside:not(
    :has(> .content-box)
  )
  > .carousel-view-container
  .site-background-slideshow,
.component-loop-carousel.site-pagination-position-outside
  > .content-box
  > .carousel-view
  .site-background-slideshow,
.component-loop-carousel.site-pagination-position-outside
  > .content-box
  > .carousel-view-container
  .site-background-slideshow {
  padding-bottom: 0;
}
.component-loop-carousel.site-pagination-position-outside:not(
    :has(> .content-box)
  )
  .carousel-pages-bullet,
.component-loop-carousel.site-pagination-position-outside
  > .content-box
  .carousel-pages-bullet {
  vertical-align: top;
}
.component-loop-carousel {
  --dots-vertical-position: 100%;
  --dots-vertical-offset: 0px;
  --dots-horizontal-position: 50%;
  --dots-horizontal-offset: 0px;
  --dots-horizontal-transform: -50%;
  --dots-vertical-transform: -100%;
  --fraction-vertical-position: 100%;
  --fraction-vertical-offset: 0px;
  --fraction-horizontal-position: 50%;
  --fraction-horizontal-offset: 0px;
  --fraction-horizontal-transform: -50%;
  --fraction-vertical-transform: -100%;
}
.component-loop-carousel .carousel-pages-bullets {
  height: -moz-max-content;
  height: max-content;
  inset-inline-start: calc(
    var(--dots-horizontal-position) + var(--dots-horizontal-offset)
  );
  top: calc(var(--dots-vertical-position) + var(--dots-vertical-offset));
  transform: translate(
    calc(var(--dots-horizontal-transform) * var(--direction-multiplier, 1)),
    var(--dots-vertical-transform)
  );
  width: -moz-max-content;
  width: max-content;
  z-index: 3;
}
.component-loop-carousel .carousel-pages-fraction {
  height: -moz-max-content;
  height: max-content;
  inset-inline-start: calc(
    var(--fraction-horizontal-position) + var(--fraction-horizontal-offset)
  );
  top: calc(
    var(--fraction-vertical-position) + var(--fraction-vertical-offset)
  );
  transform: translate(
    calc(var(--fraction-horizontal-transform) * var(--direction-multiplier, 1)),
    var(--fraction-vertical-transform)
  );
  width: -moz-max-content;
  width: max-content;
  z-index: 3;
}