/**
 * Estilos del Frontend para Rapid WP Slider
 */

/* Contenedor principal del Slider */
.rws-slider-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: var(--rws-bg-color, #ffffff);
}

/* Diapositiva individual */
.rws-slide-inner {
    display: flex;
    position: relative;
    width: 100%;
    height: 500px; /* Altura por defecto */
    min-height: 350px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--rws-bg-color, #ffffff);
}

/* Imagen de la diapositiva */
.rws-slide-image-container {
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border-radius: var(--rws-image-border-radius, 0) !important;
    transition: clip-path 0.4s ease !important;
}

.rws-slide-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    object-position: var(--rws-image-position, center center) !important;
    border-radius: var(--rws-image-border-radius, 0) !important;
    min-height: 100% !important;
    min-width: 100% !important;
    max-height: none !important;
    max-width: none !important;
}

/* Capa de oscurecimiento (Overlay) */
.rws-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, var(--rws-overlay-opacity, 0.4));
    z-index: 1;
    pointer-events: none;
}

/* Contenedor de Texto */
.rws-slide-content {
    display: flex;
    flex-direction: column;
    padding: 40px 60px;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
    justify-content: center;
    border: var(--rws-border-width, 0px) var(--rws-border-style, none) var(--rws-border-color, transparent);
    border-radius: var(--rws-border-radius, 0px);
}

/* Tipografía y Elementos de Texto */
.rws-slide-title {
    font-size: var(--rws-title-font-size, 48px) !important;
    font-family: var(--rws-title-font-family, inherit) !important;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 15px 0;
    color: var(--rws-title-color, #111111) !important;
}

.rws-slide-subtitle {
    font-size: var(--rws-subtitle-font-size, 20px) !important;
    font-family: var(--rws-subtitle-font-family, inherit) !important;
    font-weight: 500;
    line-height: 1.45;
    margin: 0 0 25px 0;
    color: var(--rws-subtitle-color, #666666) !important;
}

/* Sombras Premium para mejorar contraste en Overlay */
.rws-layout-overlay .rws-slide-title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 8px rgba(0, 0, 0, 0.3);
}

.rws-layout-overlay .rws-slide-subtitle {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* Botones de acción */
.rws-slide-btn-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

/* Alineamiento de los botones en base a la posicion del texto */
.rws-pos-left-top .rws-slide-btn-wrap,
.rws-pos-left-center .rws-slide-btn-wrap,
.rws-pos-left-bottom .rws-slide-btn-wrap,
.rws-layout-split .rws-slide-btn-wrap {
    justify-content: flex-start;
}

.rws-pos-center-top .rws-slide-btn-wrap,
.rws-pos-center-center .rws-slide-btn-wrap,
.rws-pos-center-bottom .rws-slide-btn-wrap {
    justify-content: center;
}

.rws-pos-right-top .rws-slide-btn-wrap,
.rws-pos-right-center .rws-slide-btn-wrap,
.rws-pos-right-bottom .rws-slide-btn-wrap {
    justify-content: flex-end;
}

.rws-slide-button {
    display: inline-block;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.25s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.rws-slide-button.rws-btn-primary {
    background-color: var(--rws-btn-bg-color, #2271b1) !important;
    color: var(--rws-btn-text-color, #ffffff) !important;
    border: var(--rws-btn-border-width, 0px) solid var(--rws-btn-border-color, transparent) !important;
    border-radius: var(--rws-btn-border-radius, 6px) !important;
}

.rws-slide-button.rws-btn-primary:hover {
    background-color: var(--rws-btn-hover-bg-color, #135e96) !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

.rws-slide-button.rws-btn-secondary {
    background-color: var(--rws-btn2-bg-color, #64748b) !important;
    color: var(--rws-btn2-text-color, #ffffff) !important;
    border: var(--rws-btn2-border-width, 0px) solid var(--rws-btn2-border-color, transparent) !important;
    border-radius: var(--rws-btn2-border-radius, 6px) !important;
}

.rws-slide-button.rws-btn-secondary:hover {
    background-color: var(--rws-btn2-hover-bg-color, #475569) !important;
    transform: translateY(-2px);
    text-decoration: none !important;
}

.rws-slide-button:active {
    transform: translateY(0);
}

/* ==========================================================================
   MÁSCARAS DE FORMAS (CLIP-PATH)
   ========================================================================== */
.rws-mask-circle {
    clip-path: ellipse(50% 50% at 50% 50%);
}
.rws-mask-diagonal-left {
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
.rws-mask-diagonal-right {
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.rws-mask-curve-left {
    clip-path: ellipse(100% 130% at 20% 50%);
}
.rws-mask-curve-right {
    clip-path: ellipse(100% 130% at 80% 50%);
}
.rws-mask-blob {
    clip-path: polygon(0% 15%, 15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%);
}

/* ==========================================================================
   ESTILOS DE DISEÑO (LAYOUTS)
   ========================================================================== */

/* 1. LAYOUT: OVERLAY (Texto sobre la imagen) */
.rws-layout-overlay .rws-slide-image-container {
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

.rws-layout-overlay .rws-slide-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* Posiciones de texto para OVERLAY */
/* Izquierda */
.rws-pos-left-top {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}
.rws-pos-left-center {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}
.rws-pos-left-bottom {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
}

/* Centro */
.rws-pos-center-top {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}
.rws-pos-center-center {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.rws-pos-center-bottom {
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

/* Derecha */
.rws-pos-right-top {
    justify-content: flex-start;
    align-items: flex-end;
    text-align: right;
}
.rws-pos-right-center {
    justify-content: center;
    align-items: flex-end;
    text-align: right;
}
.rws-pos-right-bottom {
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
}

/* Limitar ancho de texto en overlay para mejorar lectura */
.rws-layout-overlay .rws-slide-title,
.rws-layout-overlay .rws-slide-subtitle {
    max-width: 700px;
}

/* 2. LAYOUT: SPLIT (Imagen a un lado, texto al otro) */
.rws-layout-split .rws-slide-inner {
    display: flex;
    align-items: stretch !important;
    gap: var(--rws-split-gap, 0px) !important;
}

/* Split: Imagen izquierda, texto derecha */
.rws-direction-left-image .rws-slide-inner {
    flex-direction: row;
}

/* Split: Texto izquierda, imagen derecha */
.rws-direction-right-image .rws-slide-inner {
    flex-direction: row-reverse;
}

.rws-layout-split .rws-slide-image-container {
    /* El ancho se asigna dinámicamente vía estilo inline en PHP */
    height: 100% !important;
    box-sizing: border-box !important;
}

.rws-layout-split .rws-slide-content {
    flex-grow: 1;
    width: auto;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   AJUSTES PREMIUM DE SPLIDE (Puntos y Flechas)
   ========================================================================== */

/* Flechas personalizadas */
.splide__arrows .rws-splide-arrow {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.splide__arrows .rws-splide-arrow svg {
    fill: currentColor !important;
    width: 18px !important;
    height: 18px !important;
}

.splide__arrows .rws-splide-arrow:hover {
    background: #ffffff !important;
    color: #1e1e2d !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.splide__arrows .splide__arrow--prev {
    left: 20px !important;
}

.splide__arrows .splide__arrow--next {
    right: 20px !important;
}

/* Si es diseño split, las flechas pueden contrastar en negro si la imagen no cubre */
.rws-theme-dark-arrows .rws-splide-arrow {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #333333 !important;
}
.rws-theme-dark-arrows .rws-splide-arrow:hover {
    background: #1e1e2d !important;
    color: #ffffff !important;
}

/* Puntos de navegación (Pagination) */
.splide__pagination {
    bottom: 25px !important;
    gap: 8px !important;
    z-index: 10;
}

.splide__pagination__page {
    width: 10px !important;
    height: 10px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    border: none !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    opacity: 1 !important;
}

.splide__pagination__page.is-active {
    background: #ffffff !important;
    transform: scale(1.3) !important;
}

.rws-theme-dark-dots .splide__pagination__page {
    background: rgba(0, 0, 0, 0.2) !important;
}
.rws-theme-dark-dots .splide__pagination__page.is-active {
    background: var(--rws-btn-bg-color, #2271b1) !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .rws-slide-inner {
        height: 450px;
    }
    .rws-slide-title {
        font-size: 34px;
    }
    .rws-slide-subtitle {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .rws-slide-inner {
        height: auto !important; /* Altura auto para permitir crecimiento dinámico */
        min-height: 480px !important;
        flex-direction: column !important; /* Forzar apilado */
    }

    .rws-layout-split .rws-slide-image-container {
        width: 100% !important; /* Imagen ocupa el 100% arriba */
        height: 180px !important; /* Reducida la altura para dar más espacio al texto */
        flex-basis: auto !important; /* Evita que flex-basis: 50% inline actúe como altura en flex-direction: column */
    }

    .rws-layout-split .rws-slide-content {
        width: 100% !important;
        height: auto !important; /* Altura auto con min-height para evitar desbordes */
        min-height: 280px !important;
        flex-grow: 1;
        padding: 30px 20px !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .rws-layout-split .rws-slide-content .rws-slide-btn-wrap {
        justify-content: center !important;
    }

    .rws-layout-overlay .rws-slide-content {
        position: relative !important; /* Pasar a relativo en móvil para que el contenedor crezca dinámicamente si hay mucho texto */
        width: 100% !important;
        height: auto !important;
        min-height: 480px !important;
        padding: 40px 20px !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: rgba(0, 0, 0, calc(var(--rws-overlay-opacity, 0.4) + 0.15)) !important; /* Un poco más de contraste en móvil */
    }

    /* En overlay móvil, la imagen se posiciona absoluta cubriendo todo */
    .rws-layout-overlay .rws-slide-image-container {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .rws-layout-overlay .rws-slide-content .rws-slide-btn-wrap {
        justify-content: center !important;
    }

    .rws-slide-title {
        font-size: 24px !important; /* Reducido para evitar desbordes */
        line-height: 1.25 !important;
        word-break: normal !important;
        hyphens: none !important;
        text-align: center !important;
    }
    
    .rws-slide-subtitle {
        font-size: 14px !important; 
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
        word-break: normal !important;
        hyphens: none !important;
        text-align: center !important;
    }

    .rws-slide-btn-wrap {
        margin-top: 15px !important;
        gap: 12px !important;
    }

    .rws-slide-button {
        padding: 10px 22px !important;
        font-size: 14px !important;
    }

    .splide__arrows .rws-splide-arrow {
        width: 36px !important;
        height: 36px !important;
        background: rgba(0, 0, 0, 0.3) !important; /* Más contraste en móvil */
    }
    
    .splide__arrows .splide__arrow--prev {
        left: 10px !important;
    }

    .splide__arrows .splide__arrow--next {
        right: 10px !important;
    }
}

/* Ajustes finos para teléfonos pequeños */
@media (max-width: 480px) {
    .rws-slide-title {
        font-size: 20px !important;
    }
    .rws-slide-subtitle {
        font-size: 13px !important;
    }
    .rws-slide-button {
        width: 100%; /* Botones de ancho completo para facilitar pulsación */
        text-align: center;
    }
    .rws-slide-btn-wrap {
        width: 100%;
        flex-direction: column;
    }
}