.elementor-309 .elementor-element.elementor-element-ab3c12b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 42px;--row-gap:0px;--column-gap:42px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:16px;--padding-right:16px;}.elementor-309 .elementor-element.elementor-element-9b7196e > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for container, class: .elementor-element-ab3c12b */.elementor-309 .elementor-element.elementor-element-ab3c12b .card {
    position: relative;
    max-width: 373px;  /* Mantiene un ancho fijo */
    height: 487px; /* Altura fija de 487px */
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.212);
    overflow: hidden;
    border-radius: 12px;
    display: flex;
    justify-content: center; /* Centrar la imagen verticalmente */
    align-items: center;
}


/* Imagen de la tarjeta */
.elementor-309 .elementor-element.elementor-element-ab3c12b .card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
    transition: 0.4s;
}

/* Agregar un pseudo-elemento para el degradado oscuro en hover */
.elementor-309 .elementor-element.elementor-element-ab3c12b .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity .2s;
    z-index: 1;
}

/* Nuevo contenedor del título con fondo degradado negro */
.elementor-309 .elementor-element.elementor-element-ab3c12b .title-overlay {
    position: absolute;
    bottom: 0; /* Colocar el título en la parte inferior */
    left: 0;
    width: 100%;
    height: 100px; /* Ajustamos la altura del título */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    display: flex;
    justify-content: flex-start; /* Alineamos el contenido a la izquierda */
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;/* Añadimos espacio a la izquierda */
    color: white;
    transition: transform .5s ease; /* Animación para desaparecer hacia abajo */
    z-index: 2; /* Aseguramos que esté por encima del degradado */
}

.elementor-309 .elementor-element.elementor-element-ab3c12b .title-overlay h3 {
    font-size: 26px;
    line-height: 32px;
    font-weight: bold;
    font-family: 'Public Sans';
}

/* Contenedor del texto con alineación a la izquierda */
.elementor-309 .elementor-element.elementor-element-ab3c12b .intro {
    height: auto;
    width: 100%;
    padding: 24px;
    position: absolute;
    top: -100%; /* Inicialmente fuera de la vista (arriba) */
    color: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, top .6s ease; /* Añadimos transición de opacidad y posición */
    text-align: left; /* Alineación a la izquierda */
    z-index: 3; /* Aseguramos que esté por encima del degradado */
}

.elementor-309 .elementor-element.elementor-element-ab3c12b .intro .a {
    font-size: 26px;
    line-height: 32px;
    color: #363636;
    font-weight: bold;
    text-align: left; /* Alineación del título */
    font-family: 'Public Sans';
}

.elementor-309 .elementor-element.elementor-element-ab3c12b .intro p {
    font-size: 16px;
    color: #363636;
    font-family: 'Public Sans';
    font-weight: 400;
    opacity: 0;
    line-height: 25px;
    transition: opacity .2s ease; /* Ajustamos la opacidad del párrafo */
    text-align: left; /* Alineación a la izquierda */
}

.elementor-309 .elementor-element.elementor-element-ab3c12b .card:hover {
    cursor: pointer;
}

/* Al hacer hover, ocultamos el título-overlay hacia abajo */
.elementor-309 .elementor-element.elementor-element-ab3c12b .card:hover .title-overlay {
    transform: translateY(100%); /* Desaparece hacia abajo */
    transition: transform .5s ease;
    visibility: hidden;
}

/* Mostramos el contenido animado al hacer hover */
.elementor-309 .elementor-element.elementor-element-ab3c12b .card:hover .intro {
    opacity: 1;
    visibility: visible;
    top: 0; /* Aparece de arriba hacia abajo */
    background-color: #fff;
    padding: 30px; 
    display: flex;
    gap: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: .2s ease;
}

/* Ajustamos el tamaño de fuente en el hover */

.elementor-309 .elementor-element.elementor-element-ab3c12b .card:hover .intro p {
    opacity: 1;
    visibility: visible;
}

/* Mostrar el degradado oscuro sobre la imagen al hacer hover */
.elementor-309 .elementor-element.elementor-element-ab3c12b .card:hover::before {
    opacity: 1;
}

/* Mover imagen hacia abajo cuando se hace hover */
.elementor-309 .elementor-element.elementor-element-ab3c12b .card:hover img {
    transform: translateY(45%); /* Mueve la imagen hacia abajo un 45% */
    transition: .2s;
}

@media (max-width:767px){
    .elementor-309 .elementor-element.elementor-element-ab3c12b .card{
        height: 440px;
    }
}/* End custom CSS */