@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Outfit:wght@100..900&display=swap');

:root {
    --c-negro: #000;
    --c-blanco: #fff;
    --c-primario: #00d9d5; /*78d8d4*/
    --c-secundario: #b3f5fc;
    --c-secundario-oscuro: #3ab5ad;
    --c-gris: #656565;
    --c-gris-claro: #f1f1f1;

    --f-primaria: "Funnel Display", sans-serif;
    --f-secundaria: "Outfit", serif;
}

a {
    cursor: pointer !important;
}

/* HEADER */
.popup-menu {
    .dialog-close-button {
        transform: rotate(0deg);
        transition: all 0.4s ease;

        svg {
            fill: var(--c-negro);
            transition: all 0.4s ease;
        }

        &:hover {
            transform: rotate(90deg);

            svg {
                fill: var(--c-primario) !important;
            }
        }
    }
}

.menu-header {
    .menu-item {
        & > a {
            color: var(--c-negro);
            background-color: transparent !important;
            font-family: var(--f-primaria);
            font-size: 22px;
            line-height: 1.35em !important;
            letter-spacing: 0.5px;
            justify-content: space-between;
            padding: 10px 30px;
            position: relative;
            z-index: 1;
            transition: all 0.45s ease;
            overflow: hidden;

            &::before {
                content: "";
            }

            &::after {
                content: "";
                background-color: var(--c-primario);
                height: 100%;
                width: 0;
                border-radius: 0 200px 200px 0;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: -1;
                transition: all 0.4s ease;
            }

            &.highlighted {
                color: var(--c-primario);
            }

            .sub-arrow {
                transition: all 0.45s ease;
            }

            &:hover, &:active, &:target, &:focus {
                color: var(--c-blanco);
            
                &::after {
                    width: 100%;
                }

                .sub-arrow {
                    fill: var(--c-blanco);
                }
            }
        }

        &.menu-item-has-children {
            .sub-menu {
                .menu-item {
                    & > a {
                        color: var(--c-negro);
                        font-size: 16px;
                        padding-left: 50px;
                        border: 0;

                        &::before {
                            content: "";
                            background-color: var(--c-gris-claro);
                            height: 100%;
                            width: 0;
                            border-radius: 0 200px 200px 0;
                            position: absolute;
                            left: 0;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                            z-index: -1;
                            transition: all 0.4s ease;
                        }

                        &::after {
                            content: "";
                            background-color: transparent;
                            background: url(/wp-content/uploads/2025/08/ico-suma.webp);
                            background-repeat: no-repeat;
                            background-size: contain;
                            background-position: center center;
                            height: 18px;
                            width: 18px;
                            opacity: 0;
                            position: absolute;
                            left: 20px;
                            top: 0;
                            bottom: 0;
                            margin: auto;
                            z-index: -1;
                            transition: all 0.4s ease;
                        }


                        &:hover {
                            padding-left: 65px;

                            &::before {
                                width: 60px;
                            }

                            &::after {
                                opacity: 1;
                            }
                        }
                    }

                    &.current-menu-item {
                        & > a {
                            color: var(--c-secundario-oscuro);

                            &::before {
                                width: 60px;
                            }

                            &::after {
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }

        &.current-menu-item {
            & > a {
                color: var(--c-blanco);
            
                &::after {
                    width: 100%;
                }

                .sub-arrow {
                    fill: var(--c-blanco);
                }
            }
        }
    }
}

.links-header {
    svg {
        max-width: 16px !important;
    }
}

/* FOOTER */
.tit-footer {
    font-family: var(--f-primaria);
    font-size: 22px;
    line-height: 1.2em;
}

.link-footer {
    .elementor-icon-box-title {
        font-family: var(--f-primaria);
        font-size: 18px;
        line-height: 1.2em;
        padding-bottom: 5px;
        font-weight: 300;
    }

    a {
        color: var(--c-gris);
        line-height: 1.3em;
        transition: all 0.35s ease;

        &:hover {
            color: var(--c-primario);
        }
    }
}

/* TÍTULOS */
.tit {
    h1 {
        font-family: var(--f-primaria);
        font-size: clamp(3rem, 5vw,55px);
        font-weight: 300;
        line-height: 1.3em;
        text-shadow: none !important;
    }

    h2 {
        font-family: var(--f-primaria);
        font-size: clamp(2rem, 2.5vw, 40px);
        font-weight: 300;
        line-height: 1.3em;
        text-shadow: none !important;
    }

    h3 {
        font-family: var(--f-primaria);
        font-size: clamp(1.5rem, 1.85vw, 30px);
        font-weight: 300;
        text-transform: uppercase;
        line-height: 1.3em;
        text-shadow: none !important;
    }
}

.subtit {
    h2 {
        font-family: var(--f-primaria);
        font-size: clamp(1.5rem, 1.85vw, 30px);
        font-weight: 300;
        text-transform: uppercase;
        line-height: 1.3em;
        text-shadow: none !important;
    }

    h3 {
        font-family: var(--f-primaria);
        font-size: clamp(1.25rem, 1.65vw, 24px);
        font-weight: 400;
        line-height: 1.3em;
        text-shadow: none !important;
    }

    p {
        font-family: var(--f-primaria);
        font-size: clamp(1.15rem, 1.25vw, 22px);
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        line-height: 1.3em;
        text-shadow: none !important;
    }
}

/* TEXTOS */
body.elementor-page {
    font-weight: 300;
}

.f16 {
    font-family: var(--f-secundaria);
    font-size: 16px;
    line-height: 1.45em;
    font-weight: 300;

    p, span, ul, ol, li {
        font-family: var(--f-secundaria);
        font-size: 16px;
        line-height: 1.45em;
        font-weight: 300;
    }
}

.f18 {
    font-family: var(--f-secundaria);
    font-size: 18px;
    line-height: 1.45em;
    font-weight: 300;

    p, span, ul, ol, li {
        font-family: var(--f-secundaria);
        font-size: 18px;
        line-height: 1.45em;
        font-weight: 300;
    }
}

.f20 {
    font-family: var(--f-secundaria);
    font-size: 20px;
    line-height: 1.45em;
    font-weight: 300;

    p, span, ul, ol, li {
        font-family: var(--f-secundaria);
        font-size: 20px;
        line-height: 1.45em;
        font-weight: 300;
    }
}

.f300 {
    font-weight: 300;
}

.f400 {
    font-weight: 400;
}

.f500 {
    font-weight: 500;
}

.f600 {
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.azul {
    color: var(--c-primario);
}

.azul-claro {
    color: var(--c-secundario);
}

.azul-oscuro {
    color: var(--c-secundario-oscuro);
}

/* LISTAS */
.lista {
    ul {
        padding-top: 0;
        
        li {
            position: relative;
            padding: 0 0 0 25px;
            margin-bottom: 10px;

            &::before {
                content: "";
                background-color: transparent;
                background: url(/wp-content/uploads/2025/08/ico-suma.webp);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center center;
                height: 18px;
                width: 18px;
                position: absolute;
                left: 0;
                top: 5px;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

/* DECORACIONES Y ANIMACIONES */
.blur {
    backdrop-filter: blur(3px);
}

/* HOME */
.caja-trat {
    overflow: hidden;

    &::before {
        transition: all 0.4s ease
        
    }

    .blur {
        height: 100%;
        max-height: 280px;
        justify-content: flex-start;
        -moz-transition: max-height 0.4s ease;
        -webkit-transition: max-height 0.4s ease;
        -o-transition: max-height 0.4s ease;
        transition: max-height 0.4s ease;

        .tit {
            transform: translateY(0);
            transition: all 0.4s ease;
        }

        .f16 {
            transform: translateY(0);
            transition: all 0.4s ease;
        }

        .ico-trat {
            opacity: 0;
            transition: all 0.5s ease;
        }
    }

    &:hover {

        &::before {
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        .blur {
            -moz-transition: max-height 0.4s ease;
            -webkit-transition: max-height 0.4s ease;
            -o-transition: max-height 0.4s ease;
            transition: max-height 0.4s ease;
            max-height: 100%;

            .tit {
                transform: translateY(150px);
                transition: all 0.4s ease;
            }

            .f16 {
                transform: translateY(150px);
                transition: all 0.4s ease;
            }

            .ico-trat {
                opacity: 1;
                transition: all 0.4s ease;
            }
        }
    }
}

/* FORMULARIO */
.form-contacto_wrapper {
    .gform_heading {
        display: none !important;
    }
}

.form-contacto {
    .gfield_label {
        font-family: var(--f-secundaria);
        font-size: 18px;
        font-weight: 300;
        letter-spacing: 0.5px;
        line-height: 1.3em;
        color: var(--c-negro);
        text-align: center;
        justify-content: center;
    }

    input, textarea {
        font-family: var(--f-secundaria) !important;
        font-size: 16px;
        background-color: var(--c-blanco);
        color: var(--c-negro);
        border: 1px solid var(--c-gris);
        border-radius: 0;
        padding: 8px 15px;
    }

    .campo-clinica {
        .gfield_radio {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 40px;

            .gchoice {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 20%;

                label {
                    margin: 0;
                    font-family: var(--f-secundaria);
                    font-size: 18px;
                    font-weight: 400;
                    letter-spacing: 0.5px;
                    line-height: 1.3em;
                    text-transform: uppercase;
                    padding-bottom: 60px;
                    position: relative;

                    &::after {
                        content: "";
                        width: 200px;
                        height: 60px;
                        position: absolute;
                        bottom: 0;
                        left: -50px;
                    }

                    &#label_1_4_0 {
                        &::after {
                            background: url(/wp-content/uploads/2021/09/Sumadental_Sagasta.jpg);
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: contain;
                        }
                    }
                
                    
                    &#label_1_4_1 {
                        &::after {
                            background: url(/wp-content/uploads/2021/09/Sumadental_Santa-Isabel.jpg);
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: contain;
                        }
                    }
                }
            }
        }
    }

    .campo-aceptacion {
        .gchoice {
            justify-content: center;
            
            label {
                font-family: var(--f-secundaria);
                font-size: 16px;
                font-weight: 300;
            }
        }
    }

    .gform-footer {
        justify-content: center;

        input[type="submit"],
        #gform_submit_button_1 {
            font-family: var(--f-primaria);
            font-size: 18px;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 1.3em;
            letter-spacing: 0.5px;
            background-color: var(--c-negro) !important;
            color: var(--c-blanco) !important;
            border: none;
            border-radius: 100px;
            padding: 15px 30px 15px 30px;
            transition: all 0.35s ease;

            &:hover {
                background-color: var(--c-primario) !important;
            }
        }
    }

    #input_1_7 {
        display: flex;
        justify-content: center;
    }
}

/* --- RESPONSIVE --- */
@media screen and (max-width: 1024px) {
    .salto-pc {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .form-contacto {
        .gform_fields {
            row-gap: 25px;
        }

        .campo-clinica {
            .gfield_radio {
                flex-direction: column;

                .gchoice {
                    width: 100%;
                }
            }
        }
    }

    .links-header {
        ul {
            li:first-child {
                display: none;
            }
        }
    }
}