html {
    scroll-behavior: smooth;
}

.bg-blur {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: white;
}

.blur5 {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.color-blanco {
    color: #fff !important;
}

.antetitulo {
    p {
        font-size: 16px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }
}

.subtit {
    p {
        font-family: var(--title-font);
        font-size: 30px;
    }
}

.bnt-hero-home {
    position: relative;
    overflow: hidden !important;

    &::after {
        content: "";
        position: absolute;
        transition: all 0.4s ease;
        width: 200px;
        height: 200px;
        top: 0;
        left: -200px;
        z-index: 1;
        background-color: #000;
    }

    .bnt-hero-home-txt {
        z-index: 10;
        color: #000 !important;
    }

    .bnt-hero-home-ico {
        z-index: 2;
    }


    &:hover {
        &::after {
            left: 0px;
            transition: all 0.4s ease;
        }

        .bnt-hero-home-txt {
            color: #fff !important;
            transition: all 0.4s ease;
        }

        .bnt-hero-home-ico {
            fill: #fff !important;
            transition: all 0.4s ease;
        }
    }
}

.bloq-tratamientos {

    .tit-trata {
        h3 {
            font-family: var(--title-font);
            font-size: 40px;
            text-transform: uppercase;
        }

    }

    .elementor-swiper-button {
        padding: 30px;
        border: 1px solid #fff !important;
        border-radius: 50px;
    }

    .bg-blur-col {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(7px);
            -webkit-backdrop-filter: blur(7px);
            transition: all 0.4s ease;
        }

        h3 {
            opacity: 1;
            transition: all 0.4s ease;
        }

        &:hover {
            &::after {
                background: none;
                backdrop-filter: blur(0px);
                -webkit-backdrop-filter: blur(0px);
                transition: all 0.4s ease;

            }

            h3 {
                opacity: 0;
                transition: all 0.4s ease;
            }
        }
    }


}

/* botones */

.btn-norm {
    .elementor-button {
        background-color: transparent !important;

        .elementor-button-text {
            text-transform: uppercase;
            color: #000;
            font-weight: 600;
            line-height: 30px;
        }

        .elementor-button-icon {
            border: 1px solid #8F8F8F;
            border-radius: 30px;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            overflow: hidden;
            position: relative;
            z-index: 1;
            transition: all 0.4s ease;

            &::after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                top: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                z-index: -1;
                border-radius: 100%;
                background-color: #8f8f8f;
                transform: translateX(-10px);
                transition: all 0.4s ease;
            }

            path {
                fill: #000;
                transition: all 0.4s ease;
            }
        }

        &:hover {
            .elementor-button-icon {
                transition: all 0.4s ease;

                &::after {
                    transform: translateX(0);
                    width: 100%;
                    height: 100%;
                    transition: all 0.4s ease;
                }

                path {
                    fill: #fff;
                    transition: all 0.4s ease;
                }
            }
        }
    }

    &.btn-blanco {
        .elementor-button {
            .elementor-button-text {
                color: #fff;
            }
        }

        .elementor-button-icon {
            position: relative;
            z-index: 1;

            &::after {
                content: '';
                position: absolute;
                width: 0;
                height: 0;
                top: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                z-index: -1;
                border-radius: 100%;
                background-color: #8f8f8f;
                transform: translateX(-10px);
                transition: all 0.4s ease;
            }

            path {
                fill: #fff;
            }
        }

        &:hover {
            .elementor-button-icon {
                &::after {
                    transform: translateX(0);
                    width: 100%;
                    height: 100%;
                    transition: all 0.4s ease;
                }
            }
        }
    }

}

.hero-block {
    position: relative;
    overflow: hidden;
    /* importante */
}

.hero-block::after {
    content: '';
    position: absolute;
    inset: 0;

    /* Degradado de abajo (opaco) a mitad (transparente) */
    background: linear-gradient(to top,
            rgba(10, 10, 20, 0.85) 0%,
            rgba(10, 10, 20, 0.4) 30%,
            rgba(10, 10, 20, 0) 55%,
            transparent 100%);

    /* Blur que se desvanece igual que el degradado */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to top,
            black 0%,
            black 25%,
            transparent 55%);
    mask-image: linear-gradient(to top,
            black 0%,
            black 25%,
            transparent 55%);

    pointer-events: none;
    z-index: 1;
}

.cursor-flecha {
    .img-curso {
        position: relative;
        transition: all 0.4s ease;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: none;
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            transition: all 0.4s ease;

        }
    }

    :hover {
        .img-curso {
            transition: all 0.4s ease;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);

            &::after {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(7px);
                -webkit-backdrop-filter: blur(7px);
                transition: all 0.4s ease;
            }

        }
    }
}

/* BLOG HOME */
.blog-home {
    .swiper {
        overflow: visible;
    }

    .elementor-swiper-button {
        padding: 10px;
        border: 1px solid var(--color-black) !important;
        border-radius: 100%;
        top: -70px !important;
        bottom: unset !important;

        &.elementor-swiper-button-prev {
            right: 60px !important;
            left: unset !important;
        }

        &.elementor-swiper-button-next {
            right: 0px !important;
        }
    }
}

.filtro-blog {
    button {
        font-family: var(--body-font);
        text-transform: uppercase;
        font-weight: 600;
        font-size: 15px;
    }
}

/* TIMELINE */
.img-timeline>div {
    position: relative;
    overflow: hidden;

    &::before,
    &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 35px;
        right: 0;
        left: 0;
        margin: auto;
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }

    &::before {
        top: 0;
        background: linear-gradient(180deg, #ffffff2e, transparent);
    }

    &::after {
        bottom: 0;
        background: linear-gradient(0deg, #ffffff2e, transparent);
    }
}

/* ANIMACIÓN PIEDRA */
.piedra-izq,
.piedra-dch {
    z-index: 15;
}

/* El contenido debe estar por encima del ::after */
.hero-block>* {
    position: relative;
    z-index: 2 !important;
}

.tit-h2 {
    h2 {
        font-family: var(--title-font);
        font-size: var(--subtith2-size);
        text-transform: uppercase;
    }
}
.tit-h3 {
    h3 {
        font-family: var(--title-font);
        font-size: var(--subtith3-size);
        text-transform: uppercase;
    }
}

.tit-peq {
    p {
        text-transform: uppercase;
        font-size: var(--subtit-size);
        color: var(--primary-color);
    }
}

.font-tit {
    * {
        font-family: var(--title-font);
    }
}

.txt-accent {
    text-transform: uppercase;
    font-weight: 600;
}