.elementor-544 .elementor-element.elementor-element-4687cf5{--display:flex;--min-height:478px;--border-radius:16px 16px 16px 16px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-544 .elementor-element.elementor-element-48f396d{width:100%;max-width:100%;top:0px;}body:not(.rtl) .elementor-544 .elementor-element.elementor-element-48f396d{left:0px;}body.rtl .elementor-544 .elementor-element.elementor-element-48f396d{right:0px;}.elementor-544 .elementor-element.elementor-element-48f396d .jet-listing-dynamic-image{justify-content:flex-start;}.elementor-544 .elementor-element.elementor-element-48f396d .jet-listing-dynamic-image__figure{align-items:flex-start;}.elementor-544 .elementor-element.elementor-element-48f396d .jet-listing-dynamic-image a{display:flex;justify-content:flex-start;width:100%;max-width:100%;}.elementor-544 .elementor-element.elementor-element-48f396d .jet-listing-dynamic-image img{width:100%;max-width:100%;height:478px;object-fit:cover;border-radius:18px 18px 18px 18px;}.elementor-544 .elementor-element.elementor-element-48f396d .jet-listing-dynamic-image__caption{text-align:left;}.elementor-544 .elementor-element.elementor-element-b84e4e5{--display:flex;--min-height:478px;--justify-content:flex-end;--padding-top:0px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;--z-index:1;}.elementor-544 .elementor-element.elementor-element-8c675b4 .jet-listing-dynamic-field__content{color:#232424;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:300;line-height:24px;text-align:left;}.elementor-544 .elementor-element.elementor-element-8c675b4 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-544 .elementor-element.elementor-element-8c675b4 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-544 .elementor-element.elementor-element-8c675b4 .jet-listing-dynamic-field{justify-content:flex-start;}.elementor-544 .elementor-element.elementor-element-8933b24 .jet-listing-dynamic-field__content{color:#232424;font-family:"Montserrat", Sans-serif;font-size:24px;font-weight:600;line-height:28px;text-align:left;}.elementor-544 .elementor-element.elementor-element-8933b24 .jet-listing-dynamic-field .jet-listing-dynamic-field__inline-wrap{width:auto;}.elementor-544 .elementor-element.elementor-element-8933b24 .jet-listing-dynamic-field .jet-listing-dynamic-field__content{width:auto;}.elementor-544 .elementor-element.elementor-element-8933b24 .jet-listing-dynamic-field{justify-content:flex-start;}.jet-listing-item.single-jet-engine.elementor-page-544 > .elementor{width:416px;margin-left:auto;margin-right:auto;}@media(min-width:768px){.elementor-544 .elementor-element.elementor-element-4687cf5{--width:100%;}.elementor-544 .elementor-element.elementor-element-b84e4e5{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-4687cf5 *//* =========================================================
   CARD SERVICIO
========================================================= */

.card-servicio {
    --card-speed: 0.7s;
    --card-ease: cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;
    overflow: hidden;
    isolation: isolate;

    /*
     * Ya existe el borde desde el inicio,
     * pero transparente.
     *
     * Así al hacer hover NO cambia el tamaño de la card.
     */
    border: 1px solid transparent;

    transition:
        border-color 0.5s ease;
}


/* =========================================================
   IMAGEN DINÁMICA
========================================================= */

.card-servicio .card-servicio-imagen {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden;

    z-index: 0;
}


/*
 * Elementor / JetEngine puede generar varios wrappers,
 * así que hacemos que ocupen toda la card.
 */

.card-servicio .card-servicio-imagen .elementor-widget-container,
.card-servicio .card-servicio-imagen .jet-listing,
.card-servicio .card-servicio-imagen .jet-listing-dynamic-image {
    width: 100%;
    height: 100%;
}


/* Imagen */

.card-servicio .card-servicio-imagen img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;

    opacity: 0.33;

    transform: scale(1);

    transition:
        opacity 0.7s var(--card-ease),
        transform 1s var(--card-ease);
}


/* =========================================================
   CONTENEDOR DE TEXTOS
========================================================= */

.card-servicio .card-servicio-contenido {
    position: relative;

    width: 100%;
    height: 100%;

    z-index: 2;

    /*
     * IMPORTANTE:
     * No ponemos padding aquí.
     * Puedes seguir manejándolo desde Elementor.
     */

    overflow: hidden;
}


/* =========================================================
   GRADIENTE NORMAL
========================================================= */

.card-servicio .card-servicio-contenido::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            #FFFFFF00 15%,
            #D7F0DC 100%
        );

    opacity: 1;

    pointer-events: none;

    z-index: 0;

    transition:
        opacity 0.7s var(--card-ease);
}


/* =========================================================
   GRADIENTE HOVER

   Este es el oscuro que se aprecia en tu video.
========================================================= */

.card-servicio .card-servicio-contenido::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(18, 18, 18, 0) 20%,
            rgba(18, 18, 18, 0.88) 100%
        );

    opacity: 0;

    pointer-events: none;

    z-index: 0;

    transition:
        opacity 0.7s var(--card-ease);
}


/* =========================================================
   CONTENIDO POR ENCIMA DE LOS GRADIENTES
========================================================= */

.card-servicio .card-servicio-contenido > * {
    position: relative;

    z-index: 1;
}


/* =========================================================
   TÍTULO
========================================================= */

.card-servicio .card-servicio-titulo,
.card-servicio .card-servicio-titulo *,
.card-servicio .card-servicio-titulo .jet-listing-dynamic-field__content {
    color: #232424 !important;

    transition:
        color 0.5s var(--card-ease);
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.card-servicio .card-servicio-descripcion,
.card-servicio .card-servicio-descripcion *,
.card-servicio .card-servicio-descripcion p,
.card-servicio .card-servicio-descripcion .jet-listing-dynamic-field__content {
    color: #232424 !important;

    transition:
        color 0.5s var(--card-ease);
}


/* Evita márgenes inesperados si el campo genera <p> */

.card-servicio .card-servicio-descripcion p {
    margin-top: 0;
    margin-bottom: 0;
}


/* =========================================================
   HOVER GENERAL
========================================================= */


/* Borde */

.card-servicio:hover {
    border-color: #CECECF;
}


/* Imagen recupera opacidad y hace zoom */

.card-servicio:hover .card-servicio-imagen img {
    opacity: 1;

    transform: scale(1.045);
}


/* Desaparece gradiente verde */

.card-servicio:hover .card-servicio-contenido::before {
    opacity: 0;
}


/* Aparece gradiente oscuro */

.card-servicio:hover .card-servicio-contenido::after {
    opacity: 1;
}


/* Título azul */

.card-servicio:hover .card-servicio-titulo,
.card-servicio:hover .card-servicio-titulo *,
.card-servicio:hover .card-servicio-titulo .jet-listing-dynamic-field__content {
    color: #66C6DF !important;
}


/* Descripción blanca */

.card-servicio:hover .card-servicio-descripcion,
.card-servicio:hover .card-servicio-descripcion *,
.card-servicio:hover .card-servicio-descripcion p,
.card-servicio:hover .card-servicio-descripcion .jet-listing-dynamic-field__content {
    color: #F6F6F6 !important;
}/* End custom CSS */