.lp {
    gap: 2rem;
    margin-top: 0;
    padding-top: 0;
    margin: 0;

    .circle {
        position: absolute;
        left: 0;
        top: 300px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        z-index: 0;
        opacity: 0.3;

        &.one {
            left: -300px;
            border: 1px solid var(--laranja-boopt);
        }

        &.two {
            left: -400px;
            border: 1px solid var(--azul-sv);
        }
    }



    main {
        z-index: 1;
        padding: 9rem 5rem 0;
        display: flex;
        gap: 4rem;
        flex-direction: column;
        max-width: 1000px;
    }

    p,
    strong {
        line-height: 1.5;
    }

    header {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 100;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        background-color: color-mix(in srgb, var(--off-white), transparent 30%);
        background: linear-gradient(var(--off-white), transparent);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 3px 4px 17.4px 9px rgba(0, 0, 0, 0.05);
        padding: 1rem 6rem;
        display: flex;
        justify-content: center;

        >div {
            display: flex;
            width: 100%;
            height: 40px;
            gap: 1rem;
            align-items: center;
            max-width: 1000px;
        }

        img {
            height: 100%;
        }

        a {
            margin-left: auto;
        }
    }
}

.sales-enablement {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    img {
        max-width: 600px;
        clip-path: inset(0 16% 0 29%);
        margin-left: -9%;
    }

    h2 {
        font-size: 30px;
        font-weight: 800;
        background: linear-gradient(30deg, var(--azul-sv) 20%, var(--laranja-boopt) 80%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
        text-align: center;

        a {
            color: #ddd;
            transition: 100ms;
            font-size: 40px;

            &:hover {
                color: var(--azul-sv)
            }
        }
    }

    button.btn {
        transform: scale(1);
        transition: transform 150ms ease;

        &:hover {
            transform: scale(1.1);
        }
    }
}

.lead {
    background: radial-gradient(ellipse at 0% 100%, var(--laranja-boopt), var(--azul-sv) 70%);
    border-radius: var(--border-radius);
    display: grid;
    grid-template-columns: auto max-content;
    justify-content: space-between;
    padding: 1rem;
    height: 40px;
    gap: 1rem;
    align-items: center;

    >img {
        max-height: 30px;
        width: 100%;
        object-fit: contain;
    }

    .btn {
        border: none;
        color: var(--azul-sv);
        background: var(--off-white);
        font-weight: 500;
        scale: 1;
        transition: all 100ms;
        margin-left: auto;

        &:hover {
            scale: 1.05;
        }
    }
}


.historia-boopt {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 2rem;

    >h2 {
        font-size: 28px;
        font-weight: 500;
        grid-area: 1/1/span 1/span 1;
    }

    >p {
        font-size: 14px;
        font-weight: 400;
        grid-area: 2/1/span 1/span 1;
    }

    >img {
        max-height: 170px;
        align-self: center;
        justify-self: center;
        grid-area: 1/2/span 2/span 1;
    }

    >div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

.vela {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .promo {
        display: grid;
        position: relative;
        width: inherit;
        height: 400px;
        overflow: hidden;
        border-radius: var(--border-radius);

        >img {
            position: absolute;
        }

        >.barco {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(60%);
        }

        >.radar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.2;
        }

        >.logo {
            align-self: flex-end;
            justify-self: center;
            margin: 2rem;
            max-width: 500px;
            max-height: 30%;
        }
    }

    .mockup {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 1rem;

        >h2 {
            font-size: 28px;
            grid-area: 1/1/span 1/span 1;
        }

        >img {
            max-height: 250px;
            object-fit: contain;
            width: 100%;
            grid-area: 1/2/span 2/span 1
        }

        >p {
            grid-area: 2/1/span 1/span 1;
            font-size: 14px;
            font-weight: 400;
        }
    }
}

.map-lista {
    display: flex;
    flex-direction: column;

    h1 {
        display: flex;
        gap: 1rem;

        div {
            flex-grow: 1;
            height: 8px;
            background-image: linear-gradient(90deg, #FBB72D, #FF7730);
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
            border-radius: var(--border-radius);
        }
    }

    h2 {
        text-align: center;
    }

    ul {
        padding: 0;
        list-style-type: none;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;

        li {
            padding: 1rem;
            font-size: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #000;
            background: linear-gradient(white, white) padding-box,
                linear-gradient(160deg, var(--amarelo-vela), var(--laranja-vela)) border-box;
            border: 4px solid transparent;
            border-radius: 18px;
            box-shadow: 4px 6px 4px 0px rgba(0, 0, 0, 0.1);

            span {
                min-width: 80px;
                width: 80px;
                height: 80px;
                color: var(--laranja-vela);
                margin-bottom: 1rem;
            }

        }
    }
}


footer {
    &.index {
        background-color: #fff;
        padding: 1rem 2rem;
        width: calc(100% - 4rem);
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            height: 50px;
        }
    }
}

@media only screen and (max-width: 1000px) {
    .lp {
        header {
            padding: 1rem 1rem;

            >div {
                height: 30px;
            }
        }

        main {
            padding: 9rem 1rem 0;
        }
    }

    .sales-enablement h1 {
        font-size: 40px;
    }

    .map-lista ul {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .lead {
        grid-template-columns: auto;
        grid-template-rows: repeat(2, 1fr);
        height: fit-content;
    }

    .historia-boopt>h2,
    .vela .mockup>h2 {
        font-size: 24px;
        grid-area: 1/1/span 1/span 2;
    }

    .historia-boopt>p,
    .vela .mockup>p {
        grid-area: 2/1/span 1/span 1;
    }

    .historia-boopt>img,
    .vela .mockup>img {
        grid-area: 2/2/span 1/span 1;
    }

    .vela .promo {
        height: 200px;
    }

    .map-lista {
        h1 div {
            display: none;
        }

        ul {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(4, auto);

            li {
                flex-direction: row;

                span {
                    margin-bottom: 0;
                    margin-right: 1rem;
                }
            }
        }
    }

    footer.index {
        flex-direction: column;
    }

}