.elementor-20130 .elementor-element.elementor-element-75e1efe:not(.elementor-motion-effects-element-type-background), .elementor-20130 .elementor-element.elementor-element-75e1efe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #171819 0%, var( --e-global-color-5e7f631 ) 100%);}.elementor-20130 .elementor-element.elementor-element-75e1efe > .elementor-container{max-width:1200px;}.elementor-20130 .elementor-element.elementor-element-75e1efe > .elementor-background-overlay{opacity:0.35;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-20130 .elementor-element.elementor-element-75e1efe{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:-40px 0px 0px 0px;padding:90px 0px 90px 0px;}.elementor-bc-flex-widget .elementor-20130 .elementor-element.elementor-element-1de20f2.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-20130 .elementor-element.elementor-element-1de20f2.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-20130 .elementor-element.elementor-element-1de20f2 > .elementor-element-populated{padding:50px 20px 50px 20px;}.elementor-20130 .elementor-element.elementor-element-d077437 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-d077437{text-align:start;}.elementor-20130 .elementor-element.elementor-element-d077437 .elementor-heading-title{font-family:"Alumni Sans", Sans-serif;font-size:75px;font-weight:bold;text-transform:uppercase;line-height:63px;letter-spacing:-0.6px;color:#FFFFFF;}.elementor-20130 .elementor-element.elementor-element-8c857c8{text-align:start;font-family:"ZalandoSans", Sans-serif;font-size:17px;font-weight:400;line-height:1.4rem;color:var( --e-global-color-c5242dc );}.elementor-20130 .elementor-element.elementor-element-90c2559 > .elementor-widget-container{margin:0px 10px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-90c2559{z-index:1;}.elementor-20130 .elementor-element.elementor-element-90c2559 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-20130 .elementor-element.elementor-element-90c2559 .elementor-button .elementor-button-content-wrapper{gap:11px;}.elementor-20130 .elementor-element.elementor-element-90c2559 .elementor-button{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;text-transform:none;border-radius:5px 5px 5px 5px;padding:20px 30px 20px 30px;}.elementor-20130 .elementor-element.elementor-element-01061c5 img{border-radius:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-f3626a6{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(0, 1fr);--grid-auto-flow:row;}.elementor-20130 .elementor-element.elementor-element-f3626a6:not(.elementor-motion-effects-element-type-background), .elementor-20130 .elementor-element.elementor-element-f3626a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5e7f631 );}.elementor-20130 .elementor-element.elementor-element-f109695{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:start;--align-items:center;}.elementor-20130 .elementor-element.elementor-element-f109695.e-con{--align-self:center;--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:0;}.elementor-20130 .elementor-element.elementor-element-6acb1e4.elementor-element{--order:-99999 /* order start hack */;}.elementor-20130 .elementor-element.elementor-element-6acb1e4 .elementor-heading-title{font-size:105px;color:#FFFFFF;}.elementor-20130 .elementor-element.elementor-element-c181085 > .elementor-widget-container{margin:-32px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-c181085.elementor-element{--order:-99999 /* order start hack */;}.elementor-20130 .elementor-element.elementor-element-c181085 .elementor-heading-title{font-size:55px;color:var( --e-global-color-444396e );}.elementor-20130 .elementor-element.elementor-element-cad8f51.elementor-element{--order:-99999 /* order start hack */;}.elementor-20130 .elementor-element.elementor-element-cad8f51{color:#FFFFFF;}.elementor-20130 .elementor-element.elementor-element-979a485{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-20130 .elementor-element.elementor-element-47ddfe2{width:auto;max-width:auto;}.elementor-20130 .elementor-element.elementor-element-47ddfe2.elementor-element{--align-self:flex-start;--order:-99999 /* order start hack */;}.elementor-20130 .elementor-element.elementor-element-725cbd0{width:auto;max-width:auto;}.elementor-20130 .elementor-element.elementor-element-725cbd0.elementor-element{--align-self:flex-start;}.elementor-20130 .elementor-element.elementor-element-1bebbab{--display:flex;}.elementor-20130 .elementor-element.elementor-element-b0132a9.elementor-arrows-yes .elementor-main-swiper{width:calc( 1200px - 40px );}.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-main-swiper{width:1200px;}.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-main-swiper .swiper-slide{border-radius:10px;}.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-swiper-button{font-size:20px;}.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__text{color:#FFFFFF;}.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__name{color:#FFFFFF;}.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__title{color:#FFFFFF;}.elementor-20130 .elementor-element.elementor-element-adecbfc:not(.elementor-motion-effects-element-type-background), .elementor-20130 .elementor-element.elementor-element-adecbfc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-5e7f631 );}.elementor-20130 .elementor-element.elementor-element-adecbfc > .elementor-background-overlay{background-color:transparent;background-image:linear-gradient(180deg, #101010A1 56%, var( --e-global-color-5e7f631 ) 100%);opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-20130 .elementor-element.elementor-element-adecbfc > .elementor-container{max-width:1200px;}.elementor-20130 .elementor-element.elementor-element-adecbfc{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0px 0px -40px 0px;z-index:1;}.elementor-bc-flex-widget .elementor-20130 .elementor-element.elementor-element-499da3e.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-20130 .elementor-element.elementor-element-499da3e.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-20130 .elementor-element.elementor-element-499da3e > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:350px 0px 250px 0px;}.elementor-20130 .elementor-element.elementor-element-d57ff60 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-d57ff60{text-align:center;}.elementor-20130 .elementor-element.elementor-element-d57ff60 .elementor-heading-title{font-family:"Alumni Sans", Sans-serif;font-size:86px;font-weight:bold;text-transform:uppercase;line-height:68px;letter-spacing:-0.6px;color:#FFFFFF;}.elementor-20130 .elementor-element.elementor-element-076ade6 > .elementor-widget-container{margin:0px 10px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-076ade6 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-20130 .elementor-element.elementor-element-076ade6 .elementor-button .elementor-button-content-wrapper{gap:11px;}.elementor-20130 .elementor-element.elementor-element-076ade6 .elementor-button{font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:600;text-transform:none;border-radius:5px 5px 5px 5px;padding:20px 30px 20px 30px;}@media(max-width:1024px){.elementor-20130 .elementor-element.elementor-element-f3626a6{--grid-auto-flow:row;}.elementor-20130 .elementor-element.elementor-element-f109695{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-20130 .elementor-element.elementor-element-75e1efe{padding:0px 0px 50px 0px;}.elementor-20130 .elementor-element.elementor-element-1de20f2 > .elementor-element-populated{padding:20px 20px 20px 20px;}.elementor-20130 .elementor-element.elementor-element-d077437 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-d077437 .elementor-heading-title{font-size:37px;}.elementor-20130 .elementor-element.elementor-element-8c857c8{text-align:justify;font-size:16px;}.elementor-20130 .elementor-element.elementor-element-90c2559 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-90c2559 .elementor-button{font-size:16px;line-height:1.2em;border-radius:0px 0px 0px 0px;padding:10px 20px 10px 20px;}.elementor-20130 .elementor-element.elementor-element-f3626a6{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20130 .elementor-element.elementor-element-f109695{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-20130 .elementor-element.elementor-element-adecbfc{margin:0px 0px -41px 0px;padding:150px 10px 40px 10px;z-index:1;}.elementor-20130 .elementor-element.elementor-element-499da3e > .elementor-element-populated{margin:20px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 10px 20px 10px;}.elementor-20130 .elementor-element.elementor-element-d57ff60 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-d57ff60 .elementor-heading-title{font-size:37px;}.elementor-20130 .elementor-element.elementor-element-076ade6 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20130 .elementor-element.elementor-element-076ade6 .elementor-button{font-size:16px;line-height:1.2em;border-radius:0px 0px 0px 0px;padding:10px 20px 10px 20px;}}/* Start custom CSS for button, class: .elementor-element-90c2559 *//* --- BOTÓN GRADIENTE IMPERIO (USANDO ID) --- */

/* Nota: Este .elementor-20130 .elementor-element.elementor-element-90c2559 busca el ID en el contenedor del widget y aplica el estilo al botón interior */
#btn-oro .elementor-button {
    /* El efecto Oro */
    background-image: linear-gradient(to right, #AA853C 0%, #F5D06F 51%, #AA853C 100%) !important;
    background-size: 200% auto !important;
    background-color: transparent !important; /* Evita colores de fondo del tema */

    /* Tipografía y Estilo */
    color: #000000 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    
    /* Bordes y Sombras */
    border: none !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(170, 133, 60, 0.3) !important;
    
    /* Animación */
    transition: all 0.5s ease !important;
}

/* --- EFECTO HOVER (Al pasar el mouse) --- */
#btn-oro .elementor-button:hover {
    background-position: right center !important; /* Mueve el brillo */
    transform: translateY(-3px) !important; /* Se eleva */
    box-shadow: 0 6px 20px rgba(170, 133, 60, 0.5) !important; /* Sombra más intensa */
    color: #000000 !important;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-01061c5 *//* --- CONTENEDOR PRINCIPAL --- */
.elementor-20130 .elementor-element.elementor-element-01061c5 {
    position: relative;
    overflow: hidden !important; 
    border-radius: 20px !important; 
    background-color: transparent !important;
}

/* --- IMAGEN: MÁSCARA DIAGONAL MODERNA --- */
.elementor-20130 .elementor-element.elementor-element-01061c5 img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    /* LA MÁSCARA MODERNA (60 grados)
       - '60deg': Define la inclinación (diagonal desde abajo-izq hacia arriba-der).
       - 'transparent 5%': La esquina inferior izquierda es totalmente transparente (se ve el fondo).
       - 'black 85%': La imagen se vuelve totalmente visible casi llegando a la esquina opuesta.
       
       Resultado: Un degradado suave que borra la parte de abajo a la izquierda.
    */
    -webkit-mask-image: linear-gradient(60deg, transparent 5%, black 85%) !important;
    mask-image: linear-gradient(60deg, transparent 5%, black 85%) !important;

    /* Animación de Zoom */
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
}

/* --- ANIMACIÓN 1: ZOOM AL PASAR EL MOUSE --- */
.elementor-20130 .elementor-element.elementor-element-01061c5:hover img {
    transform: scale(1.08) !important; /* Zoom elegante del 8% */
}

/* --- ANIMACIÓN 2: DESTELLO (SHINE) --- */
.elementor-20130 .elementor-element.elementor-element-01061c5::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    
    /* Luz blanca, suave y elegante */
    background: linear-gradient(to right, 
                rgba(255,255,255,0) 0%, 
                rgba(255,255,255,0.3) 50%, 
                rgba(255,255,255,0) 100%);
                
    transform: skewX(-25deg);
    z-index: 2;
    pointer-events: none;
    transition: none;
}

/* Disparar el destello en Hover */
.elementor-20130 .elementor-element.elementor-element-01061c5:hover::after {
    left: 150%;
    transition: left 0.7s ease-in-out !important;
}/* End custom CSS */
/* Start custom CSS for testimonial-carousel, class: .elementor-element-b0132a9 *//* --- VARIABLES ORIGINALES --- */
.elementor-20130 .elementor-element.elementor-element-b0132a9{
    --radius: 20px;
    --height: 550px;
    --overlay: 0.75;
}

.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-main-swiper{
    overflow: hidden;
    /* Añadido un padding inferior para dar aire al texto al fondo */
    padding-bottom: 20px; 
}

/* --- ESTRUCTURA PRINCIPAL (Respetando tu código original) --- */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide{
    display: flex;
    align-items: flex-end; /* Mantiene el contenido abajo */
    border-radius: var(--radius);
    height: var(--height);
    position: relative;
    /* CRUCIAL: Esto evita que la animación se salga del borde redondeado */
    overflow: hidden !important; 
}

/* Overlay oscuro original */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0,0,0);
    background: linear-gradient(20deg, rgba(0,0,0,var(--overlay)) 0%, rgba(0,0,0,0) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
    pointer-events: none; /* Permite que el mouse interactúe con lo de abajo si hace falta */
}

/* --- ANIMACIÓN DE LA IMAGEN --- */
.elementor-20130 .elementor-element.elementor-element-b0132a9 img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    /* Asegura que la imagen cubra todo el área sin estirarse */
    object-fit: cover; 
    /* Transición suave para el efecto de zoom */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Evita parpadeos en algunos navegadores durante la animación */
    backface-visibility: hidden;
}

/* El efecto al pasar el mouse: un zoom suave (5%) */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide:hover img {
    transform: scale(1.05);
}

/* --- VISIBILIDAD Y ORDEN DEL TEXTO --- */

/* Este es el contenedor que envuelve tanto el texto como el footer en Elementor.
   Lo convertimos en columna para poder reordenar los elementos internos.
*/
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10; /* Asegura que todo el bloque de texto esté sobre la imagen */
    padding: 25px; /* Espacio interno para que el texto no toque los bordes */
    width: 100%;
}

/* El área del nombre y cargo (Footer) */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__footer{
    display: block;
    /* ORDEN 1: Lo forzamos a aparecer primero */
    order: 1;
    margin-bottom: 15px; /* Espacio debajo del nombre */
    text-align: left; /* Alineación a la izquierda */
}

/* El texto del testimonio en sí */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__content {
    /* ORDEN 2: Lo forzamos a aparecer después del nombre */
    order: 2;
    color: #ffffff; /* Texto blanco */
    text-align: left; /* Alineación a la izquierda */
    font-size: 15px; /* Ajusta el tamaño según necesites */
    line-height: 1.4em;
}


/* Estilos originales para el nombre */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__cite{
    z-index: 2; /* Redundante ahora, pero lo dejamos por si acaso */
    position: relative;
    font-style: normal;
}
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__name{
    margin-bottom: 5px;
    font-weight: bold;
    color: #fff;
    font-size: 1.1em;
}
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__title {
     color: rgba(255,255,255, 0.8); /* Color un poco más apagado para el cargo */
}


/* Ocultar flechas (Original) */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-swiper-button-prev,
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-swiper-button-next{
    display: none;
}

/* --- MEDIA QUERIES ORIGINALES --- */
@media (max-width: 1024px){
    .elementor-20130 .elementor-element.elementor-element-b0132a9{
        --height: 370px;
    }
}
@media (max-width: 767px){
    .elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-main-swiper{
        width: 100% !important;
    }
    /* Ajustamos un poco el padding en móviles */
    .elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial-wrapper {
        padding: 15px;
    }
}
/* --- 3. OCULTAR EL TEXTO LARGO (LO QUE PEDISTE) --- */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__content {
    display: none !important;
}

/* --- 4. CONFIGURACIÓN DEL NOMBRE Y CARGO --- */

/* Contenedor del nombre y título */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__cite {
    position: relative;
    z-index: 10; /* Encima de la imagen */
    width: 100%;
    text-align: left; /* Alineado a la izquierda */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* A) EL NOMBRE (Siempre visible) */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__name {
    color: #fff;
    font-size: 24px; /* Tamaño grande */
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
    /* Pequeña animación para que suba cuando aparece el cargo */
    transition: transform 0.4s ease;
}

/* B) EL CARGO / TÍTULO (Oculto inicialmente) */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__title {
    color: rgba(255,255,255, 0.8); /* Blanco un poco transparente */
    font-size: 14px;
    font-weight: 400;
    display: block;
    
    /* ESTADO INICIAL: OCULTO */
    opacity: 0;
    max-height: 0; /* Altura 0 para que no ocupe espacio */
    transform: translateY(10px); /* Un poco desplazado hacia abajo */
    transition: all 0.4s ease; /* Transición suave */
}

/* --- INTERACCIÓN (HOVER) --- */

/* Cuando pasas el mouse, aparece el CARGO */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide:hover .elementor-testimonial__title {
    opacity: 1;
    max-height: 30px; /* Se abre el espacio */
    transform: translateY(0); /* Sube a su sitio */
}

/* Opcional: El nombre sube un poquito para dejar espacio */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide:hover .elementor-testimonial__name {
    transform: translateY(-5px);
}


/* --- OTROS --- */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-swiper-button-prev,
.elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-swiper-button-next{
    display: none;
}

/* Móvil */
@media (max-width: 767px){
    .elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide{
        height: 400px;
        padding: 20px;
    }
    .elementor-20130 .elementor-element.elementor-element-b0132a9 .elementor-testimonial__name {
        font-size: 20px;
    }
}
/* =========================================
   NUEVA ANIMACIÓN: DESTELLO ELEGANTE
   ========================================= */

/* Creamos una "barra de luz" invisible inclinada */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide:after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%; /* Empieza escondida a la izquierda */
    width: 100%; /* Ancho del destello */
    height: 100%;
    /* El gradiente de luz blanca suave */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    /* Inclinamos la barra para que sea elegante */
    transform: skewX(-25deg);
    z-index: 2; /* Encima de la imagen y el overlay */
    pointer-events: none;
    /* Duración y suavidad del paso del destello */
    transition: left 0.7s ease-in-out;
}

/* AL PASAR EL MOUSE: Movemos la barra de luz hacia la derecha */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide:hover:after {
    left: 150%; /* Termina escondida a la derecha */
    transition: left 0.7s ease-in-out;
}
/* =========================================
   2. OVERLAY INTEGRADO CON EL FONDO #101010
   ========================================= */
.elementor-20130 .elementor-element.elementor-element-b0132a9 .swiper-slide:before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* EL CAMBIO ESTÁ AQUÍ:
       Usamos linear-gradient hacia arriba (to top).
       Empieza con tu color #101010 sólido abajo y se vuelve transparente arriba.
    */
    background: linear-gradient(to top, 
                #101010 0%, 
                rgba(16, 16, 16, 0.9) 25%, 
                rgba(16, 16, 16, 0) 60%);
                
    z-index: 1;
    pointer-events: none;
}/* End custom CSS */