/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


body {
    font-family: var(--f-secundaria);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.3em;

    p {
        margin-bottom: 20px;

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

        b,
        strong {
            font-weight: 500;
        }
        
        a {
            text-decoration: underline;
            transition: all 0.35s ease;
        }
    }   
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2em;
    font-family: var(--f-primaria);
    font-weight: 300;
}

.tit {
    h1 {
        font-size: clamp(36px, 5vw, 70px);
    }

    h2 {
        font-size: clamp(32px, 3vw, 50px);
    }

    h3 {
        font-size: clamp(26px, 2vw, 32px);
    }

    h4 {
        font-size: clamp(20px, 1.5vw, 24px);
    }
}

.subtit {
    h1 {
        font-size: clamp(30px, 4vw, 45px);
    }

    h2 {
        font-size: clamp(26px, 2.5vw, 32px);
    }

    h3 {
        font-size: clamp(20px, 1.5vw, 24px);
    }

    h4 {
        font-size: clamp(18px, 1.5vw, 20px);
    }
}

.subtit-p {
    p {
        font-family: var(--f-primaria);
        font-size: clamp(18px, 1vw, 22px);
        line-height: 1.2em;
    }
}

.f300 {
    font-weight: 300;

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 300;
    }
}

.f400 {
    font-weight: 400;

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 400;
    }
}

.f500 {
    font-weight: 500;

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 500;
    }

    b,
    strong {
        font-weight: 700;
    }
}

.f600 {
    font-weight: 600;

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 600;
    }
}

.f700 {
    font-weight: 700;

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 700;
    }
}

.f-texto {
    font-family: var(--f-secundaria);
}

.c-blanco {
    color: var(--c-blanco-puro);

    a {
        color: var(--c-blanco-puro);

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

.lista {
    ul {
        list-style: none;
        margin: 0 0 0 25px;

        li {
            position: relative;
            margin-bottom: 10px;

            &::before {
                content: "";
                position: absolute;
                background-color: var(--c-azul-gris);
                width: 10px;
                height: 10px;
                top: 7px;
                left: -20px;
                border-radius: 20px;
            }
        }
    }
}

/* BLOQUE CON LOGO CENTRAL */
.seccion-icono-animado {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;

    * {
        box-sizing: border-box;
    }

    .contenedor-seccion {
        position: relative;
        max-width: 1300px;
        margin: auto;
        min-height: 800px;

        .uomo-ico {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.85);
            width: 300px;
            height: 300px;
            z-index: 0;
            opacity: 0;
            filter: drop-shadow(0 0 26px rgba(217, 187, 132, 0.35));
            transition: opacity 900ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1);
            
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
            }
        }

        .tit {
            h3, p {
                opacity: 0;
                transform: translateY(50px);
                transition: opacity 1000ms ease, transform 1000ms ease;
            }

            &.is-shown {
                h3, p {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }

        .text-top {
            position: absolute;
            width: 35%;
            color: var(--c-blanco-puro);
            top: 0;
            left: 56%;
            text-align: left;

            &::before {
                content: '';
                background-color: var(--c-marron-mostaza);
                position: absolute;
                top: 0;
                left: -40px;
                width: 1px;
                height: 0;
                transition: all 0.7s ease;
            }

            &.is-shown {
                &::before {
                    height: 300px;
                }
            }
        }

        .text-right {
            position: absolute;
            width: 25%;
            color: var(--c-blanco-puro);
            top: 44%;
            right: 0;
            text-align: left;

            &::before {
                content: '';
                background-color: var(--c-marron-mostaza);
                position: absolute;
                top: 50%;
                left: -68%;
                right: 100%;
                width: 0;
                height: 1px;
                transition: all 0.7s ease;
            }

            &.is-shown {
                &::before {
                    width: 180px;
                }
            }
        }

        .text-bottom {
            position: absolute;
            width: 35%;
            color: var(--c-blanco-puro);
            bottom: 0;
            left: 50%;
            text-align: left;

            &::before {
                content: '';
                background-color: var(--c-marron-mostaza);
                position: absolute;
                bottom: 0;
                left: -40px;
                width: 1px;
                height: 0;
                transition: all 0.7s ease;
                z-index: 1;
            }

            &.is-shown {
                &::before {
                    height: 300px;
                }
            }
        }

        .text-left {
            position: absolute;
            width: 25%;
            color: var(--c-blanco-puro);
            top: 38%;
            left: 0;
            text-align: left;

            &::before {
                content: '';
                background-color: var(--c-marron-mostaza);
                position: absolute;
                top: 50%;
                right: -68%;
                width: 0;
                height: 1px;
                z-index: 2;
                transition: all 0.7s ease;
                z-index: 1;
            }

            &.is-shown {
                &::before {
                    width: 180px;
                }
            }
        }

        &.is-active {
            .uomo-ico {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }

    &.pag-tratamientos {
        .contenedor-seccion {
            min-height: 400px;

            .uomo-ico {
                left: 25%;   
            }

            .tit {
                color: var(--c-azul-oscuro);
                width: 30% !important;

                &.text-top {
                    &::before {
                        width: 0;
                        height: 1px;
                        top: 50%;
                        bottom: unset;
                        right: unset;
                        left: -220px;
                    }

                    &.is-shown {
                        &::before {
                            width: 200px;
                        }
                    }
                }

                &.text-right {
                    top: 25%;
                    right: unset;
                    left: 56%;

                    &::before {
                        width: 0;
                        height: 1px;
                        top: 50%;
                        bottom: unset;
                        right: unset;
                        left: -220px;
                    }

                    &.is-shown {
                        &::before {
                            width: 200px;
                        }
                    }
                }

                &.text-bottom {
                    top: 50%;
                    left: 56%;
                    bottom: unset;

                    &::before {
                        width: 0;
                        height: 1px;
                        top: 50%;
                        bottom: unset;
                        right: unset;
                        left: -220px;
                    }

                    &.is-shown {
                        &::before {
                            width: 200px;
                        }
                    }
                }

                &.text-left {
                    top: 75%;
                    right: unset;
                    left: 56%;

                    &::before {
                        width: 0;
                        height: 1px;
                        top: 50%;
                        bottom: unset;
                        right: unset;
                        left: -220px;
                    }

                    &.is-shown {
                        &::before {
                            width: 200px;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1024px) {
        &.pag-tratamientos {
            .contenedor-seccion {
                .uomo-ico {
                    width: 250px;
                    height: 250px;
                    left: 15%;
                }
            }
        }
    }

    @media screen and (max-width: 850px) {
        margin-top: -250px;
        z-index: 0;

        .contenedor-seccion {
            display: flex;
            flex-direction: column;
            min-height: unset;
            padding-top: 250px;

            .uomo-ico {
                top: 15%;
                height: 200px;
                left: unset;
                right: -150px;

                img {
                    object-position: center right;
                }
            }

            .tit {
                position: relative;
                width: 100% !important;
                padding: 40px 0;
                top: unset;
                left: unset;
                bottom: unset;
                right: unset;
                
                &::before {
                    width: 100% !important;
                    height: 1px !important;
                    bottom: 0 !important;
                    top: initial !important;
                    left: 0;
                    right: 0;
                }
            }
        }

        &.pag-tratamientos {
            margin-top: 0;

            .contenedor-seccion {
                padding-top: 220px;

                .uomo-ico {
                    top: 20%;
                    left: 45%;
                    width: 200px;
                }

                .tit {
                    text-align: center;
                    width: 100% !important;
                    left: unset !important;

                    &::before {
                        left: 0 !important;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 767px) {
        margin-top: -225px;

        .contenedor-seccion {
            padding-top: 180px;

            .uomo-ico {
                top: 9%;
                height: 150px;
            }
        }

        &.pag-tratamientos {
            .contenedor-seccion {
                padding-top: 160px;
                
                .uomo-ico {
                    width: 150px;
                    top: 15%;
                }
            }
        }
    }
}

/* CAJA CARACTERÍSTICAS -- qué es uomo -- */
.carrusel-caracteristicas {
    .swiper {
        padding: 0 10% 0 15% !important;
    }

    @media screen and (max-width: 1900px) {
        .swiper {
            padding: 0 10% 0 12% !important;
        }
    }
    
    @media screen and (max-width: 1700px) {
        .swiper {
            padding: 0 10% 0 10% !important;
        }
    }

    @media screen and (max-width: 1400px) {
        .swiper {
            padding: 0 12% 0 20px !important;
        }
    }
}

.caja-caracteristica {
    overflow: hidden !important;

    .tit-caracteristica {
        h3 {
            transition: var(--all-transition);
        }
    }

    .txt-caracteristica {
        opacity: 0;
        transform: translateY(100%);
        transition: var(--all-transition);
    }

    .superposicion-caracteristica {
        opacity: 0;
        left: -100% !important;
        transition: var(--all-transition);
    }

    &:hover {
        .tit-caracteristica {
            h3 {
                color: var(--c-blanco-puro) !important;
            }
        }

        .txt-caracteristica {
            opacity: 1;
            transform: translateY(0);
        }

        .superposicion-caracteristica {
            opacity: 1;
            left: 0 !important;
        }
    }

    @media screen and (max-width: 1024px) {
        .tit-caracteristica {
            h3 {
                color: var(--c-blanco-puro) !important;
            }
        }

        .txt-caracteristica {
            opacity: 1;
            transform: translateY(0);
        }

        .superposicion-caracteristica {
            opacity: 1;
            left: 0 !important;
        }
    }
}

/* CAJA TRATAMIENTO */
.caja-tratamiento {
    overflow: hidden !important;

    .tit-tratamiento {
        transform: translateY(350%);
        transition: var(--all-transition);
    }

    .txt-tratamiento {
        opacity: 0;
        transition: var(--all-transition);
    }

    &:hover {
        .tit-tratamiento {
            transform: translateY(0);
        }

        .txt-tratamiento {
            opacity: 1;
        }
    }

    @media screen and (max-width: 1024px) {
        .tit-tratamiento {
            transform: translateY(0);
        }

        .txt-tratamiento {
            opacity: 1;
        }
    }
}

/* BLOQUE EQUIPO */
.caja-trapecio1 {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 40% 100%);

    @media screen and (max-width: 767px) {
        clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
    }
}

.caja-trapecio2 {
    clip-path: polygon(0 0, 100% 0%, 60% 100%, 0 100%);

    @media screen and (max-width: 767px) {
        clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);
    }
}