* {
    box-sizing: border-box;
}

/* =========================================================
   SLIDER PRINCIPAL
========================================================= */

.slider-container {
   width: 95%;
    max-width: 1200px;
    margin: -20px auto 0;
    background: #ffffff;
    border-radius: 14px;
    /* IMPORTANTE */
    overflow: visible;
    border: 1px solid #e5e9e6;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.10);

    position: relative;
}


/* =========================================================
   TITULO PRINCIPAL
========================================================= */

.slider-title {
    position: relative;
    padding: 10px 20px 10px;
    color: #168447;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .5px;
}


/* línea decorativa */

.slider-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 2px;
    background: #168447;
    border-radius: 10px;
}


/* =========================================================
   ÁREA DEL SLIDER
========================================================= */

.slider {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #f4f7f5;
}


/* =========================================================
   SLIDE
========================================================= */

.slide {

    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.22,.61,.36,1);
}


.slide.active {

    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* =========================================================
   IMAGEN
========================================================= */

.slide-image {

    position: relative;
    width: 43%;
    height: calc(100% - 24px);
    margin: 12px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #e9ecea;
    box-shadow:
        0 4px 14px rgba(0,0,0,.10);
    transform: scale(.98);
    transition:
        transform .8s ease;
}


/* zoom al aparecer */

.slide.active .slide-image {

    transform: scale(1);
}


/* =========================================================
   PEQUEÑO DEGRADADO SOBRE LA IMAGEN
========================================================= */

.slide-image::after {

    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(22,132,71,.04),
            rgba(0,0,0,.10)
        );
    pointer-events: none;
}


/* =========================================================
   CONTENIDO
========================================================= */

.slide-content {

    width: 57%;
    padding: 20px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/*
/* =========================================================
   ETIQUETA "AVISO"
========================================================= *

.slide-content::before {

    content: "AVISO";
    display: inline-block;
    width: fit-content;
    padding: 4px 11px;
    margin-bottom: 9px;
    background: rgba(22,132,71,.10);
    color: #168447;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}*/


/* =========================================================
   TITULO DEL AVISO
========================================================= */

.slide-content h2 {

    margin: 0 0 10px;
    color: #168447;
    font-size: 36px !important;
    font-weight: 400;
    line-height: 1.10;
    letter-spacing: -.4px;
    overflow: hidden;
}


/* =========================================================
   DESCRIPCIÓN DEL AVISO
========================================================= */

.slide-content p {
    margin: 0 0 12px;
    max-width: 600px;
    color: #000000;
    font-size: 26px;
    line-height: 1.3;
    overflow: hidden;
    font-weight: 300 !important;
}

.slide-content p img{
    max-width:100%;
}


/* =========================================================
   INFORMACIÓN DEL AVISO
========================================================= */

.slide-info {

    margin-bottom: 13px;
    color: #000000;
    font-size: 18px;
    line-height: 1.45;
    overflow: hidden;
    font-weight: 400;
}


/*===================
IMAGEN COMPLETA DEL SLIDER CON TITULO
===================*/

/* Contenedor alineando sus elementos en una sola columna */
.slide.slide-full {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important; /* Alinea todo estrictamente a la izquierda */
    position: absolute;
    inset: 0;
}

/* La imagen mantiene sus medidas e introduce una posición relativa */
/* IMAGEN PARA COMPUTADORA (Pantallas grandes) */
.slide.slide-full .slide-image {
    position: relative !important;
    width: calc(100% - 24px) !important; 
    height: calc(100% - 24px) !important; 
    margin: 12px !important; 
    
    /* Ruta de la imagen alargada (1138x300) */
    background-image: url('../images/imgslider/fesapauv_fb.png'); 
    background-size: cover;
    background-position: center;
}

/* El título se vuelve un hijo absoluto directo de la IMAGEN para calzar exacto */
.slide.slide-full .slide-content.content-overlay {
    position: absolute !important;
    width: auto !important;
    
    /* Coordenadas respecto al inicio exacto de la IMAGEN */
    left: 20px;   /* Pequeño espacio hacia adentro de la imagen para que respire */
    bottom: 20px; /* Separación del borde inferior de la imagen */
    z-index: 10;
    
    /* Caja protectora para los detalles */
    background-color: rgba(57, 90, 109, 0.7); 
    padding: 12px 48px; 
    border-radius: 8px; 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
}

/* Ajuste del texto */
.slide.slide-full .content-overlay .h2ok {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.8rem;
    font-weight: 400;
}


/*===================
IMAGEN AMPLIADA DEL SLIDER
===================*/
/* Fuerza al contenedor a ignorar el diseño de dos columnas */
.slide.slide-full-cover {
    display: block !important; /* O 'flex' si tu diseño base lo requiere */
    width: 100%;
    padding: 0; /* Elimina márgenes internos para que la imagen llegue al borde */
}

/* Hace que la imagen ocupe todo el ancho y alto disponible */
.slide.slide-full-cover .slide-image {
    width: 100% !important;
    height: 100%; /* Ajusta a un valor fijo (ej. 400px) si el slider pierde altura */
    min-height: 450px; /* Asegura una altura mínima visible */
    background-size: cover;
    background-position: center;
}






/* =========================================================
   BOTÓN
========================================================= */

.slide-button {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 5px 10px;
    background: #168447;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    border-radius: 6px;
    box-shadow:
        0 4px 10px rgba(22,132,71,.20);
    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


.slide-button:hover {

    background: #161069;
    transform: translateY(-2px);
    box-shadow:
        0 7px 16px rgba(22,132,71,.28);
}


.slide-button:active {

    transform: translateY(0);
}


/* =========================================================
   FLECHAS
========================================================= */

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 50%;
    background: rgba(255,255,255,0.97);
    color: #168447;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* posiciones */

.arrow-left {

    left: -21px;
}


.arrow-right {

    right: -21px;
}


/* hover */

.slider-arrow:hover {

    background: #168447;
    color: #fff;
    box-shadow:
        0 6px 17px rgba(0,0,0,.22);
}


.arrow-left:hover {

    transform:
        translateY(-50%)
        translateX(-2px)
        scale(1.06);
}


.arrow-right:hover {

    transform:
        translateY(-50%)
        translateX(2px)
        scale(1.06);
}


.slider-arrow:active {

    transform:
        translateY(-50%)
        scale(.92);
}


/* =========================================================
   INDICADORES
========================================================= */

.slider-dots {

     display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 0 14px;
    background: #fff;
    border-top: 1px solid #edf0ee;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}


.dot {

    width: 7px;
    height: 7px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 10px;
    background: #cfd5d1;
    cursor: pointer;
    transition:
        width .3s ease,
        background .3s ease,
        transform .25s ease;
}


.dot:hover {

    background: #168447;
    transform: scale(1.2);
}


.dot.active {

    width: 26px;
    height: 7px;
    background: #168447;
    border-radius: 10px;
    box-shadow:
        0 2px 6px rgba(22,132,71,.25);
}


/* =========================================================
   ANIMACIÓN DEL CONTENIDO
========================================================= */

.slide.active .slide-content h2 {

    animation:
        slideText .6s ease .08s both;
}


.slide.active .slide-content p {

    animation:
        slideText .6s ease .16s both;
}


.slide.active .slide-info {

    animation:
        slideText .6s ease .22s both;
}


.slide.active .slide-button {

    animation:
        slideText .6s ease .28s both;
}


@keyframes slideText {

    from {

        opacity: 0;

        transform:
            translateX(15px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .slide-content {

        padding-right: 35px;
    }

    .slide-content h2 {

        font-size: 29px;
    }

    .slide .h2ok {

        font-size: 34px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 700px) {

    .slider-container {

        width: 100%;
        margin-top: -10px;
        border-radius: 11px;
    }


    .slider-title {

        padding: 13px 17px 9px;
        font-size: 21px;
    }

    /* línea decorativa */

.slider-title::after {
    margin-left: auto;
    margin-right: auto;
}


    .slider {

        height: 400px;
    }


    .slide {

        flex-direction: column;
        transform:
            translateY(20px);
    }


    .slide.active {

        transform:
            translateY(0);
    }


    .slide-image {

        width: calc(100% - 24px);
        height: 150px;
        margin: 12px;
        flex-shrink: 0;
    }


    .slide-content {

        width: 100%;
        padding: 10px 25px 20px;
    }


    .slide-content::before {

        padding: 4px 9px;
        margin-bottom: 7px;
        font-size: 9px;
    }


    .slide-content h2 {
        
        font-size: 26px !important;
        line-height: 1.15;
        margin-bottom: 8px;
    }


    .slide-content p {
        font-size: 20px !important;
        line-height: 1.4;
    }

    .slide-content p img{
    max-width:100%;
}


    .slide-info {
        margin-top: -15px;
        font-size: 16px !important;
    }


    .slide-button {
        margin-left: auto;
        margin-right: auto;
        margin-top: -10px;
        padding: 3px 15px;
        font-size: 14px;
    }


    .slider-arrow {

        width: 35px;
        height: 35px;
        font-size: 18px;
    }


    .arrow-left {
        left: -15px;
    }

    .arrow-right {
        right: -15px;
    }

}

/* VISTA DE CELULAR (Pantallas menores a 768px de ancho) */
@media (max-width: 768px) {
    .slide.slide-full .slide-image {
        background-image: url('../images/imgslider/fesapauv_fb_movil.png') !important; 
        background-size: cover;
    }
    
    .slide.slide-full .slide-content.content-overlay {
        left: 50% !important;
        bottom: 20px;
        transform: translateX(-50%);
        
        /* Ajuste para móvil: cambiamos max-content por un ancho mínimo adaptado */
        width: auto !important;
        min-width: 200px !important; /* Le da una base ancha al recuadro negro */
        max-width: 90%; /* Evita que se salga de las pantallas más chicas */
        
        text-align: center;
        padding: 10px 20px !important;
    }
    
    .slide.slide-full .content-overlay .h2ok {
        font-size: 1.3rem;
    }
}



.slider-container,
.slider-container h2,
.slider-container p,
.slider-container a,
.slider-container button,
.slider-container div {
    font-family: inherit;
    text-shadow: none;
}




/* Modificaciones exclusivas para el slider de pantalla completa */
.slide.slide-full {
    display: block !important; /* Desactiva el flex de dos columnas */
}

.slide.slide-full .slide-image {
    width: calc(100% - 24px) !important; /* Ocupa todo el ancho restando los márgenes */
    height: calc(100% - 24px); /* Mantiene la misma proporción de altura */
    margin: 12px; /* Conserva el mismo margen estético que los demás */
}

/* Modificaciones exclusivas para el slider de solo texto */
.slide.slide-text-full {
    display: block !important; /* Desactiva el flex de dos columnas */
}

.slide.slide-text-full .slide-content {
    width: 100% !important; /* Fuerza al texto a ocupar todo el ancho disponible */
    box-sizing: border-box; /* Asegura que el padding no deforme el tamaño */
    text-align: center; /* Opcional: Centra el texto para que se vea más equilibrado */
    align-items: center; /* Opcional: Centra elementos internos (como iconos o botones) */
}

/* Ajusta la imagen completa para que se adapte perfectamente al contenedor */
.slide.slide-full .slide-image {
    background-size: contain; /* Cambia de 'cover' a 'contain' para mostrar la imagen completa */
    background-repeat: no-repeat; /* Evita que la imagen se duplique si sobra espacio */
    background-position: center; /* La mantiene perfectamente centrada */
    background-color: #e9ecea; /* Mantiene el fondo gris claro de tu diseño en las zonas vacías */
}

/* Caja del título sobre la imagen (Escritorio) */
.slide.slide-full .slide-content.content-overlay {
    position: absolute !important;
    width: auto !important;
    
    /* Forzamos a que la caja mida un poco más que el texto */
    min-width: 400px !important; 
    text-align: center; /* Centra el texto dentro de ese nuevo espacio extra */
    
    left: 20px;   
    bottom: 20px; 
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7); 
    padding: 12px 24px !important; /* Regresa a un padding estándar seguro */
    border-radius: 8px; 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
}

/* Estilos opcionales para mejorar la legibilidad del título */
.slide.slide-full .content-overlay .h2ok {
    margin: 0;
    color: #ffffff; /* Cambia el color si el fondo de tu imagen es oscuro */
    font-size: 2rem; /* Ajusta el tamaño de la letra si lo necesitas */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Agrega sombra para que resalte sobre cualquier color de imagen */
}