/* ================================================================
   IEP Slider - Public CSS
   Blue Ark Solutions 2025
   Proporcion recomendada de imagenes: 1400 x 500 px
   ================================================================ */

:root {
    --iep-font-serif:       'Cormorant Garamond', Georgia, serif;
    --iep-font-sans:        'DM Sans', system-ui, sans-serif;
    --iep-slide-gap:        24px;
    --iep-slide-per-view:   3;
    --iep-slide-aspect:     calc(500 / 1400 * 100%);
    --iep-title-size:       11px;
    --iep-title-weight:     600;
    --iep-title-color:      #1B212B;
    --iep-title-transform:  uppercase;
    --iep-title-spacing:    .1em;
    --iep-btn-size:         44px;
    --iep-btn-bg:           #E2E8EA;
    --iep-btn-color:        #1B212B;
    --iep-btn-bg-hover:     #1B212B;
    --iep-btn-color-hover:  #ffffff;
}

/* Wrapper — position relative es CRITICO para las flechas */
.iep-slider-wrap {
    position: relative !important;
    padding: 40px 56px;
    box-sizing: border-box;
    overflow: visible !important;
}

/* Clip — solo recorta el track */
.iep-slider-clip {
    overflow: hidden;
    position: relative;
}

/* Track */
.iep-slider-track {
    display: flex;
    gap: var(--iep-slide-gap);
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    user-select: none;
    touch-action: pan-y;
}

/* Slide */
.iep-slide {
    flex: 0 0 calc(
        (100% - (var(--iep-slide-per-view) - 1) * var(--iep-slide-gap))
        / var(--iep-slide-per-view)
    );
    min-width: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease;
}
.iep-slider-wrap.iep-ready .iep-slide {
    opacity: 1;
    transform: translateY(0);
}
.iep-slider-wrap.iep-ready .iep-slide:nth-child(1) { transition-delay: .05s; }
.iep-slider-wrap.iep-ready .iep-slide:nth-child(2) { transition-delay: .12s; }
.iep-slider-wrap.iep-ready .iep-slide:nth-child(3) { transition-delay: .19s; }
.iep-slider-wrap.iep-ready .iep-slide:nth-child(4) { transition-delay: .26s; }
.iep-slider-wrap.iep-ready .iep-slide:nth-child(5) { transition-delay: .33s; }
.iep-slider-wrap.iep-ready .iep-slide:nth-child(6) { transition-delay: .40s; }

.iep-slide-inner {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image wrap */
.iep-slide-img-wrap {
    position: relative;
    width: 100%;
    padding-top: var(--iep-slide-aspect);
    overflow: hidden;
    background: #f0f0f0;
}
.iep-slide-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease;
    display: block;
}
.iep-slide-inner:hover .iep-slide-img-wrap img {
    transform: scale(1.04);
}

/* Overlay negro sobre imagen */
.iep-slide-img-wrap .iep-cat-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.82) !important;
    color: #fff !important;
    font-family: var(--iep-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 14px;
    line-height: 1;
    pointer-events: none;
    display: block !important;
    opacity: 1 !important;
}

/* Titulo debajo de la imagen */
.iep-slide-title {
    display: block;
    margin-top: 12px;
    font-size:      var(--iep-title-size);
    font-weight:    var(--iep-title-weight);
    color:          var(--iep-title-color);
    text-transform: var(--iep-title-transform);
    letter-spacing: var(--iep-title-spacing);
    text-align: center;
}

/* ================================================================
   FLECHAS — posicion absoluta respecto a .iep-slider-wrap
   left:0 y right:0 quedan sobre el padding de 56px
   ================================================================ */
.iep-slider-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    width:  var(--iep-btn-size);
    height: var(--iep-btn-size);
    background: var(--iep-btn-bg) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--iep-btn-color) !important;
    transition: background .25s ease, color .25s ease;
    outline: none;
    padding: 0;
}
.iep-slider-btn:hover {
    background: var(--iep-btn-bg-hover) !important;
    color:      var(--iep-btn-color-hover) !important;
}
.iep-slider-prev {
    left: 0 !important;
    right: auto !important;
}
.iep-slider-next {
    right: 0 !important;
    left: auto !important;
}
.iep-slider-btn svg {
    pointer-events: none;
    display: block;
}

/* Tablet: 2 slides */
@media (max-width: 1024px) {
    .iep-slider-wrap { --iep-slide-per-view: 2; padding: 32px 48px; }
}

/* Mobile: 1 slide */
@media (max-width: 640px) {
    .iep-slider-wrap { --iep-slide-per-view: 1; padding: 24px 44px; }
}