/* Waquim Split Slider v2.3 — Frontend */
*,*::before,*::after{box-sizing:border-box}

/* ── Slider ── */
.wss-slider{position:relative;width:100%;overflow:hidden;height:92vh;min-height:580px;max-height:960px}

/* ── Track ── */
.wss-track{display:flex;height:100%}
/* Slide transition: se maneja por JS según data-transition */

/* ── Slide ── */
.wss-slide{
    display:flex;
    flex:0 0 100%;width:100%;height:100%;overflow:hidden;
    /* Fade: todos ocultos por defecto cuando transition=fade */
}
.wss-slider[data-transition="fade"] .wss-slide{
    position:absolute;inset:0;
    opacity:0;
    transition:opacity 1s ease;
    pointer-events:none;
}
.wss-slider[data-transition="fade"] .wss-slide.is-active{
    opacity:1;pointer-events:auto;position:relative;
}

/* ── Text side ── */
.wss-text-side{
    flex:0 0 45%;display:flex;align-items:center;
    padding:0 5% 0 7%;z-index:2;
}
.wss-layout-text-right{flex-direction:row-reverse}

/* ── Text inner — elementos animados individualmente ── */
.wss-text-inner{width:100%;max-width:480px}

/* Cada elemento empieza invisible y desplazado */
.wss-tag,
.wss-title,
.wss-body,
.wss-btn {
    opacity:0;
    transform:translateY(24px);
    transition:
        opacity  0.7s ease,
        transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cuando el slide está activo, los elementos entran en cascada */
.wss-slide.is-active .wss-tag   { opacity:0.72 !important; transform:translateY(0); transition-delay:0.15s; }
.wss-slide.is-active .wss-title { opacity:1    !important; transform:translateY(0); transition-delay:0.3s;  }
.wss-slide.is-active .wss-body  { opacity:0.88 !important; transform:translateY(0); transition-delay:0.45s; }
.wss-slide.is-active .wss-btn   { opacity:1    !important; transform:translateY(0); transition-delay:0.6s;  }

/* Cuando sale, reset rápido */
.wss-slide:not(.is-active) .wss-tag,
.wss-slide:not(.is-active) .wss-title,
.wss-slide:not(.is-active) .wss-body,
.wss-slide:not(.is-active) .wss-btn {
    opacity:0 !important;
    transform:translateY(24px);
    transition:opacity 0.2s ease, transform 0.2s ease;
}

/* ── Tipografía ── */
.wss-tag{
    display:block !important;
    font-family:'helvetica-neue-lt-pro','Helvetica Neue',Helvetica,Arial,sans-serif !important;
    font-size:.68rem !important;
    font-weight:400 !important;
    letter-spacing:.28em !important;
    text-transform:uppercase !important;
    margin:0 0 1.6rem 0 !important;
    background:none !important;
    text-decoration:none !important;
}
.wss-title{
    display:block !important;
    font-family:'quiverleaf-cf','Times New Roman',Georgia,serif !important;
    font-size:3rem !important;
    font-weight:300 !important;
    line-height:1.12 !important;
    letter-spacing:-.01em !important;
    margin:0 0 1.6rem 0 !important;
    padding:0 !important;
    background:none !important;
}
.wss-body{
    display:block !important;
    font-family:'helvetica-neue-lt-pro','Helvetica Neue',Helvetica,Arial,sans-serif !important;
    font-size:.95rem !important;
    font-weight:300 !important;
    line-height:1.75 !important;
    margin:0 0 2.4rem 0 !important;
    padding:0 !important;
    max-width:36ch !important;
    background:none !important;
}
.wss-btn{
    display:inline-block !important;
    font-family:'helvetica-neue-lt-pro','Helvetica Neue',Helvetica,Arial,sans-serif !important;
    font-size:.68rem !important;
    font-weight:400 !important;
    letter-spacing:.22em !important;
    text-transform:uppercase !important;
    text-decoration:none !important;
    padding:.95em 2.6em !important;
    border-radius:100px !important;
    border-style:solid !important;
    border-width:1px !important;
    background:transparent !important;
    cursor:pointer !important;
    transition:background-color .3s ease,color .3s ease !important;
}

/* ── Media ── */
.wss-media-side{flex:0 0 55%;position:relative;overflow:hidden;background:#000}
.wss-video-wrap{position:absolute;inset:0;overflow:hidden}
.wss-video-wrap video{
    position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    object-fit:cover !important;object-position:center !important;
    border:none !important;pointer-events:none !important;
}
.wss-video-wrap iframe{
    position:absolute !important;
    top:50% !important;left:50% !important;
    width:100% !important;height:100% !important;
    transform:translate(-50%,-50%) scale(1.35) !important;
    border:none !important;pointer-events:none !important;display:block !important;
}
.wss-image-wrap{position:absolute;inset:0}
.wss-image-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* ── Nav ── */
.wss-nav{position:absolute;bottom:2.5rem;left:7%;display:flex;align-items:center;gap:1.2rem;z-index:10}
.wss-prev,.wss-next{
    background:transparent;border:1px solid rgba(240,238,235,.4);color:#f0eeeb;
    width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;cursor:pointer;transition:border-color .25s,background .25s;padding:0;
}
.wss-prev:hover,.wss-next:hover{background:rgba(240,238,235,.15);border-color:rgba(240,238,235,.85)}
.wss-dots{display:flex;gap:.45rem;align-items:center}
.wss-dot{width:6px;height:6px;border-radius:50%;background:rgba(240,238,235,.35);border:none;cursor:pointer;padding:0;transition:background .3s,transform .3s}
.wss-dot.is-active{background:#f0eeeb;transform:scale(1.5)}

/* Progress bar autoplay */
.wss-progress{
    position:absolute;bottom:0;left:0;height:2px;
    background:rgba(240,238,235,.5);width:0%;z-index:10;
    transition:width linear;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:900px){
    .wss-slider{height:auto;max-height:none;min-height:0}
    .wss-slide{flex-direction:column !important;height:auto}

    /* Fade en mobile también */
    .wss-slider[data-transition="fade"] .wss-slide{position:absolute}
    .wss-slider[data-transition="fade"] .wss-slide.is-active{position:relative}

    .wss-text-side{
        flex:none;width:100%;
        /* Más padding en mobile para que respire */
        padding:4.5rem 7% 3.5rem !important;
        align-items:flex-start;
    }
    .wss-text-inner{max-width:100%}

    /* Tamaños mobile */
    .wss-title{font-size:clamp(1.6rem,7vw,2.4rem) !important;margin-bottom:1.2rem !important}
    .wss-body{max-width:100% !important;margin-bottom:2rem !important}
    .wss-tag{margin-bottom:1.2rem !important}

    .wss-media-side{flex:none;width:100%;height:65vw;min-height:240px}
    .wss-video-wrap iframe{transform:translate(-50%,-50%) scale(1) !important}
    .wss-nav{
        position:relative;bottom:auto;left:auto;
        padding:1.5rem 7% 2rem;
        justify-content:center;width:100%;
    }
}

@media(max-width:480px){
    .wss-text-side{padding:4rem 6% 3rem !important}
    .wss-title{font-size:clamp(1.5rem,8vw,2rem) !important}
    .wss-media-side{height:70vw}
}