/* ============================================================================
 * Atsys – Elements Carousel
 * Carrusel de Containers nativos de Elementor sobre Swiper.
 * ========================================================================== */

.atsys-ec {
    position: relative;
    width: 100%;
}

.atsys-ec-swiper {
    width: 100%;
    overflow: hidden;
}

.atsys-ec-slide {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Altura igualada: cada slide se estira a la altura del más alto.
 * Los Containers de Elementor dentro de cada slide ocupan el 100%.
 */
.atsys-ec--equal-height .atsys-ec-swiper .swiper-wrapper {
    align-items: stretch;
}

.atsys-ec--equal-height .atsys-ec-slide {
    height: auto;
}

.atsys-ec--equal-height .atsys-ec-slide > .e-con,
.atsys-ec--equal-height .atsys-ec-slide > .elementor-element {
    width: 100%;
    height: 100%;
    min-height: 100%;
    flex-grow: 1;
}

/* ── Navegación (flechas) ───────────────────────────────────────────────── */

.atsys-ec-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: #fff;
    color: #111;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.atsys-ec-nav:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.atsys-ec-nav:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.atsys-ec-prev { left: 8px; }
.atsys-ec-next { right: 8px; }

.atsys-ec-nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.atsys-ec-nav svg {
    display: block;
}

/* ── Paginación ─────────────────────────────────────────────────────────── */

.atsys-ec-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.atsys-ec-bullet {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: none;
    padding: 0;
}

.atsys-ec-bullet--active {
    background-color: #111;
    transform: scale(1.2);
}

/* ── Modo editor: pista visual para que el usuario sepa qué slide edita ─── */

.atsys-ec--editor .atsys-ec-slide {
    /* En el editor Swiper no está inicializado, así que mostramos los slides
     * en horizontal con scroll para que cada Container sea editable. */
    min-width: 0;
}