.hs-showcase {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Ensure Elementor widget height propagates to the internal showcase wrapper */
.elementor-widget-hs_horizontal_showcase,
.elementor-widget-hs_horizontal_showcase > .elementor-widget-container,
.elementor-widget-hs_horizontal_showcase .hs-showcase {
    height: 100%;
}



.hs-slides-holder {
    position: relative;
    width: 100%;
    height: 100%;
    outline: none;
}

.hs-slides-holder .scroll-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    min-height: 400px;
    gap: 0;
}

/* Horizontal slide base */
.hs-item.hs-horizontal-slide {
    /*
     * IMPORTANT:
     * The previous 100% basis forced each slide to take a full viewport width,
     * creating perceived "blank spaces" when the real content width is smaller.
     * Let the item size itself by its real content so horizontal snapping can
     * be based on true slide boundaries.
     */
    flex: 0 0 auto;
    width: auto;
    box-sizing: border-box;
    position: relative;
    height: 100%;
}

.hs-slide-content {
    width: auto;
    height: 100%;
}

/* Intro layout: image left, content right */
.hs-slide-content.hs--intro-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    flex: 0 0 auto;
}

.hs-item-intro-image {
    position: relative;
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-shrink: 0;
}

/* The media wrapper crops. The inner layer moves (parallax) without creating gaps. */
.hs-item-intro-media {
    position: relative;
    height: 100%;
    overflow: hidden;
    flex: 0 0 auto;
}

.hs-item-intro-media-inner {
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.hs-item-intro-media-inner img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* Slight scale so the inner translation never reveals empty space */
    transform: scale(1.08);
    transform-origin: center center;
    max-width: none;
}

.hs-item-content {
    flex: 1 1 auto;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* align content to top */
    will-change: transform;
}

.hs-slide-content.hs--intro-layout .hs-item-content {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

/* Scroll label */
.hs-action.hs-scroll-label {
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    opacity: 0.8;
    z-index: 5;
}

.hs-action.hs-scroll-label .hs-label-icon {
    display: inline-block;
}

.hs-action.hs-scroll-label svg {
    display: inline-block;
}

/* First item apparition — animation disabled */
.hs-item.hs--appear {}

/* Vertical mode */
.hs-slides-holder.hs-vertical .scroll-content,
.hs-slides-holder .scroll-content.hs-vertical-content {
    display: block;
    min-height: 0;
}

.hs-slides-holder.hs-vertical .hs-item.hs-horizontal-slide {
    flex: none;
    width: 100%;
    height: auto;
    margin-bottom: 0;
}

.hs-slides-holder.hs-vertical .hs-slide-content.hs--intro-layout {
    display: block;
}

.hs-slides-holder.hs-vertical .hs-item-intro-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: block;
}

.hs-slides-holder.hs-vertical .hs-item-intro-media,
.hs-slides-holder.hs-vertical .hs-item-intro-media-inner {
    width: 100%;
    height: auto;
}

.hs-slides-holder.hs-vertical .hs-item-intro-media-inner {
    transform: none !important;
}

.hs-slides-holder.hs-vertical .hs-item-intro-media-inner img {
    width: 100%;
    height: auto;
    transform: none !important;
    max-width: 100%;
}

/* Scrollbar base */
.scrollbar-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar-thumb {
    position: absolute;
    border-radius: 9999px;
}

/* Hide scrollbar */
.hs-hide-scrollbar .scrollbar-track {
    display: none !important;
}

@media (max-width: 768px) {
    .hs-slides-holder .scroll-content {
        min-height: 320px;
    }
}

/* Hard fallback for responsive: below typical breakpoints, behave like normal vertical flow
   even if JS cannot run (or breakpoint data attr is missing). */


/* Drag-to-scroll affordance */
.hs-slides-holder[data-scrollbar="true"]{
  cursor: grab;
}
.hs-slides-holder[data-scrollbar="true"].hs-is-dragging{
  cursor: grabbing;
}

/* Below breakpoint / vertical mode: behave like a normal page flow */
.hs-slides-holder.hs-vertical{
  overflow: visible !important;
}
.hs-slides-holder.hs-vertical .scroll-content{
  display: block !important;
  width: 100% !important;
  transform: none !important;
}
.hs-slides-holder.hs-vertical .hs-item{
  display: block !important;
  width: 100% !important;
  flex: none !important;
}
.hs-slides-holder.hs-vertical .hs-item-inner{
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.hs-slides-holder.hs-vertical .hs-item-intro-media-inner{
  transform: none !important;
}


/* === FIX RESPONSIVE: eliminar espacio bajo imagen intro === */
.hs-slides-holder.hs-vertical .hs-item-intro-image {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.hs-slides-holder.hs-vertical .hs-item-intro-media,
.hs-slides-holder.hs-vertical .hs-item-intro-media-inner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.hs-slides-holder.hs-vertical .hs-item-intro-media-inner img {
    display: block;
    margin-bottom: 0 !important;
}
.hs-slides-holder.hs-vertical .hs-intro-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==============================
   Dynamic responsive (vertical)
   Applied when JS adds .hs-vertical
   Breakpoint is controlled by the widget setting.
   ============================== */
.hs-showcase.hs-vertical,
.hs-showcase.hs-vertical .hs-slides-holder {
    height: auto !important;
}

.hs-showcase.hs-vertical {
    overflow: visible !important;
}

.hs-showcase.hs-vertical .hs-slides-holder {
    overflow: visible !important;
    cursor: auto !important;
}

.hs-showcase.hs-vertical .hs-slides-holder .scroll-content {
    display: block !important;
    flex-direction: column !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.hs-showcase.hs-vertical .hs-item.hs-horizontal-slide {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.hs-showcase.hs-vertical .hs-item-intro-image,
.hs-showcase.hs-vertical .hs-item-intro-media,
.hs-showcase.hs-vertical .hs-item-intro-media-inner,
.hs-showcase.hs-vertical .hs-item-intro-media-inner img {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hs-showcase.hs-vertical .hs-item-intro-media-inner img {
    display: block !important;
}

.hs-showcase.hs-vertical .hs-intro-title {
    margin: 0 !important;
}

/* Hide custom scrollbar UI in responsive/vertical mode */
.hs-showcase.hs-vertical .scrollbar-track { 
    display: none !important; 
}

/* ==============================
   Per-item content vertical alignment (runtime)
   - The widget adds: .hs-va-top / .hs-va-center / .hs-va-bottom on .hs-item
   - CSS alone is not enough when the content is an Elementor template (auto height).
     JS will compute the needed offset and apply translateY() on .hs-item-content.
   ============================== */

.hs-item.hs-va-top .hs-item-content,
.hs-item.hs-va-center .hs-item-content,
.hs-item.hs-va-bottom .hs-item-content {
    transform: translate3d(0, 0, 0);
}

/* In responsive/vertical mode we always reset any runtime offset */
.hs-showcase.hs-vertical .hs-item-content,
.hs-slides-holder.hs-vertical .hs-item-content {
    transform: none !important;
}

/* ==============================
   Per-item content vertical alignment
   (Applied via .hs-item classes: hs-va-top / hs-va-center / hs-va-bottom)
   Note: Real alignment is applied at runtime (JS) for Elementor templates.
   These rules serve as a lightweight fallback.
   ============================== */
.hs-item.hs-va-top .hs-item-content { justify-content: flex-start; }
.hs-item.hs-va-center .hs-item-content { justify-content: center; }
.hs-item.hs-va-bottom .hs-item-content { justify-content: flex-end; }

/* ==============================
   Intro video support (intro layout)
   Mirrors image behavior exactly
   ============================== */

.hs-item-intro-media-inner video,
.hs-item-intro-media-inner .hs-intro-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
    transform: scale(1.08);
    transform-origin: center center;
}

/* Vertical / responsive mode: reset like images */
.hs-showcase.hs-vertical .hs-item-intro-media-inner video,
.hs-slides-holder.hs-vertical .hs-item-intro-media-inner video {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: cover;
}