/* Ajustamos cada diapositiva individual dentro del slider */
.slider-portafolio .slide,
.slider-portafolio .swiper-slide,
.slider-portafolio .item {
    position: relative;
    border-radius: 24px !important; /* Esquinas redondeadas de Figma */
    overflow: hidden !important;
    min-height: 340px !important; /* Alto de la tarjeta */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Lleva los textos abajo */
    padding: 24px !important;
    background-size: cover !important;
    background-position: center !important;
}

/* El degradado fucsia sobre cada foto */
.slider-portafolio .slide::before,
.slider-portafolio .swiper-slide::before,
.slider-portafolio .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado lineal de transparente arriba a fucsia abajo */
    background: linear-gradient(to top, rgba(240, 0, 117, 0.95) 0%, rgba(240, 0, 117, 0.4) 50%, rgba(240, 0, 117, 0) 100%) !important;
    z-index: 1;
    pointer-events: none;
}

/* Forzamos que los textos se lean perfectos en blanco y alineados a la izquierda */
.slider-portafolio h3, 
.slider-portafolio p,
.slider-portafolio h2,
.slider-portafolio span {
    position: relative !important;
    z-index: 2 !important;
    color: #ffffff !important;
    text-align: left !important;
    margin: 0 !important;
}

/* Estilos de tipografía */
.slider-portafolio h3,
.slider-portafolio h2 {
    font-size: 20px !important;
    font-weight: bold !important;
    margin-bottom: 6px !important;
}

.slider-portafolio p {
    font-size: 14px !important;
    opacity: 0.85 !important;
}