.sobre-page {
    .topo {
        padding: 80px 10%;
        background: var(--bg-medium);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        flex-direction: row;

        .logo-animada {
            background: var(--color-primary);
            clip-path: polygon(0% 0%, 100% 0, 100% 70%, 80% 100%, 0% 100%);
            width: 50%;
            height: auto;
            aspect-ratio: 16/9;
            padding: 40px;

            & svg {
                height: 100%;
            }
        }

        .chamadas {
            width: 45%;

            & h1 {
                color: var(--link-color);
                font-family: 'Prototype';
                font-size: 4rem;
                line-height: 1.1;
                margin: 0 auto 0px;

                & .high {
                    color: var(--color-primary);

                    sup {
                        top: -1.2em;
                        font-size: 40%;
                        font-family: Tahoma;
                        font-weight: 600;
                    }
                }
            }

            & p.sub {
                font-size: 1.4rem;
                line-height: 1.5;
                color: var(--link-color);
                margin: 0px 0;
            }
        }
    }

    .historia {
        padding: 80px 15%;

        & p {
            font-size: 1.4rem;
            line-height: 1.5;
            color: var(--link-color);
            margin: 10px 0;

            strong {
                color: var(--color-primary);
            }
        }

        ul.pilares {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 30px;

            li {
                width: 33.333%;
                font-size: 1.1rem;
                line-height: 1.4;
                color: var(--link-color);
                margin: 20px 0;
                background: var(--bg-color-secundary);
                padding: 30px;
                cursor: default;
                border-radius: 15px;
                transition: .3s;

                & strong {
                    color: var(--color-primary);
                    display: block;
                    font-size: 120%;
                }

                &:hover {
                    border-color: var(--color-primary);
                }
            }
        }

        h2.sub-pilares {
            font-size: 2.5rem;
            color: var(--link-color);
            font-family: 'Prototype';
            line-height: 1.1;
            margin: 40px 0 10px;

            strong {
                color: var(--color-primary);
                font-weight: 400;
            }
        }
    }

    .video {
        padding: 100px 25%;
        background: var(--bg-escuro);

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        .modal-content {
            background-color: transparent;
        }

        .btn-close {
            filter: invert(1);
            opacity: 1;
        }

        .modal-lg,
        .modal-xl {
            --bs-modal-width: 1000px;
        }
    }

    .topicos {
        padding: 0px 15% 80px;

        h2 {
            font-size: 2.5rem;
            color: var(--link-color);
            font-family: 'Prototype';
            line-height: 1.1;
            margin: 0 0 40px;
            width: 100%;
        }

        .topico {
            aspect-ratio: 4/3;
            background: var(--bg-escuro);
            color: #fff;
            padding: 30px 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 15px;
            transition: .3s;

            & h4 {
                margin: 0;
                font-size: 2.5rem;
                font-weight: 600;
                font-family: 'Prototype';
            }

            & p {
                margin: 0;
                font-size: 1.2rem;
                line-height: 1;
            }

            &:hover {
                background: var(--color-primary);
            }
        }
    }

    .atalhos {
        padding: 80px 15%;
        background: var(--bg-medium);

        & ul {
            display: flex;
            gap: 30px;
            flex-direction: row;
            flex-wrap: wrap;
            list-style: none;
            padding: 0;

            & li {
                width: calc(33.33% - 30px);
                margin: 0;
                background: var(--bg-color-secundary);
                border-radius: 15px;
                display: flex;
                align-items: center;
                border: solid 1px var(--bg-color-secundary);

                & .atalho {
                    display: flex;
                    padding: 30px;
                    gap: 10px;
                    justify-content: center;
                    align-items: center;

                    & .icone {
                        width: 60px;
                        margin: 10px 0;

                        & svg {
                            max-width: 50px;
                            max-height: 60px;
                            margin: 0 auto;
                            display: block;
                        }
                    }

                    & h4 {
                        font-weight: 600;
                        margin: 0;
                        font-size: 1.2rem;
                        line-height: 1.2;
                    }
                }

                &:hover {
                    border-color: var(--color-primary);
                }
            }
        }
    }

    @media screen and (max-width: 1600px) {
        .topo {
            padding: 80px;

            & .chamadas {
                & h1 {
                    font-size: 3rem;
                }
            }
        }

        .historia {
            padding: 80px 10%;
        }

        .video {
            padding: 80px 20%;
        }

        .topicos {
            padding: 0px 10% 60px;

            h2 {
                font-size: 2.2rem;
                margin: 0 0 20px;
            }

            .topico {
                & h4 {
                    font-size: 2.3rem;
                }
            }
        }

        .atalhos {
            padding: 70px 10%;
        }
    }

    @media screen and (max-width: 1024px) {
        .topo {
            padding: 60px;
            flex-direction: column;

            .logo-animada,
            .chamadas {
                width: 100%;
            }

            .logo-animada {
                & svg {
                    height: 100%;
                    width: 50%;
                }
            }
        }

        .historia {
            padding: 60px;

            ul.pilares {
                flex-direction: column;
                gap: 15px;

                li {
                    width: 100%;
                    margin: 0;
                }
            }
        }

        .video {
            padding: 60px;
        }

        .topicos {
            padding: 0 60px 60px;

            h2 {
                width: 100%;
            }
        }

        .atalhos {
            padding: 60px;

            & ul {
                & li {
                    width: calc(50% - 30px);

                    & .atalho {
                        padding: 25px;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 480px) {
        .topo {
            padding: 30px;
            & .chamadas {
                & h1 {
                    font-size: 2.2rem;
                }
                & p.sub {
                 font-size: 1.2rem;
                }
            }            
        }
        .historia {
            padding: 30px;
            & p{
                font-size: 1.1rem;
            }
            h2.sub-pilares {
                font-size: 1.6rem;
                margin: 20px 0 10px;
            }
            & ul.pilares {
                li {
                    font-size: 1rem;
                }
            } 
                       
        }
        .video {
            padding: 40px 30px;
        }   
        .topicos {
            padding: 0 30px 30px;
            h2 {
                font-size: 1.8rem;
            }            
        }             
        .atalhos {
            padding: 40px 30px;
            & ul {
                & li {
                    width: 100%;
                }
            }
        }
    }
}