@import url('header.css');
@import url('footer.css');

@import url('fontes.css');



:root{
    --delay-default: 250ms;
    --font-titulo: 'Urbane';
    --font-subtitulo: 'Urbane';
    --font-corpo: 'Gothan';
    --font-cor-neutra: #585E5E;
    --font-cor-neutro-bold: #3A3A3A;

    --cor-amarela: #FEC32B;
    --cor-azul: #53A0D6;
    --cor-roxa: #6957A1;
    --cor-verde: #99CB48;
    --cor-vermelha: #ED405E;

    --degrade-vermelho-leve: #EF2161;
    --degrade-vermelho-forte: #C01D3C;

    --degrade-azul-leve: #10A7E0;
    --degrade-azul-forte: #0077AF;

    --degrade-roxo-leve: #6B56A1;
    --degrade-roxo-forte: #4E3F7D;

    --degrade-verde-leve: #83C53F;
    --degrade-verde-forte: #589B3E;

    --degrade-amarelo-leve: #FFBD05;
    --degrade-amarelo-forte: #F87D1F;
    scroll-behavior: unset;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}



body {
    scroll-behavior: smooth;
    font-size: 100%;
    text-decoration: none;
}

main{
    overflow: hidden;
}

section{
    padding-block: 60px;
}

img {
    max-width: 100%;
}

/* Indicadores */

.indicadores-caixa{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);

    margin-inline: auto;
    gap: 20px;
    width: max-content;

    transition: var(--delay-default);


    .indicadores-filhos{
        display: flex;

        position: relative;
        transition: var(--delay-default);

        &:hover button, &:hover .imagem-indicador{
            scale: 0.9;
        }
        &:hover .seta{
            transform: translate(-55%, -5%) rotate(-90deg);
        }

        .seta{
            width: 50px;
            height: 50px;

            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) rotate(-90deg);
            transition: var(--delay-default);
            cursor: pointer;
        }

        &:nth-child(1) .seta{
            fill: var(--cor-azul);
        }
        &:nth-child(2) .seta{
            fill: var(--cor-roxa);
        }
        &:nth-child(3) .seta{
            fill: var(--cor-amarela);
        }
        &:nth-child(4) .seta{
            fill: var(--cor-vermelha);
        }
        &:nth-child(5) .seta{
            fill: var(--cor-verde);
        }
        &:nth-child(6) .seta{
            fill: var(--cor-vermelha);
        }
        &:nth-child(7) .seta{
            fill: var(--cor-azul);
        }
        &:nth-child(8) .seta{
            fill: var(--cor-amarela);
        }

        &:nth-child(1) button{
            background: var(--cor-amarela);
        }
        &:nth-child(2) button{
            background: var(--cor-azul);
        }
        &:nth-child(3) button{
            background: var(--cor-roxa);
        }
        &:nth-child(4) button{
            background: var(--cor-verde);
        }
        &:nth-child(5) button{
            background: var(--cor-roxa);
        }
        &:nth-child(6) button{
            background: var(--cor-verde);
        }
        &:nth-child(7) button{
            background: var(--cor-vermelha);
        }
        &:nth-child(8) button{
            background: var(--cor-azul);
        }
        
        button{
            width: 150px;
            height: 150px;

            padding: 20px;

            border: none;
            border-radius: 20px 40px;
            text-decoration: none;

            transition: var(--delay-default);

            scale: 0.8;
            transform: skew(6deg);

            span{
                display: block;

                color: white;
                font-weight: bold;
                font-size: 1.4rem;
                font-family: var(--font-subtitulo);
                line-height: 100%;
                text-align: center;
                margin-bottom: 5px;
                transform: skew(-6deg);
            }
            p {
                color: white;
                font-size: 0.8rem;
                line-height: 21px;
                margin: 0;
                font-weight: 400;
                text-align: center;
                font-family: var(--font-corpo);
                transform: skew(-6deg);
            }

        }
        .imagem-indicador{
            transform: skew(6deg);
            border-radius: 25px;
            overflow: hidden;
            cursor: pointer;
            transition: var(--delay-default);

            img{
                transform: skew(-6deg);
                width: 150px;
                height: 150px;
                object-fit: cover;
                scale: 1.08;
            }
        }
    }
    .indicadores-filhos.direita{

        &:hover .seta{
            transform: translate(-45%, -5%) rotate(0deg);
        }
        button{
            transform: skew(-6deg);
            span, p{
                transform: skew(6deg);
            }
        }
        .seta{
            transform: translateX(-50%) rotate(0deg);
        }
        .imagem-indicador{
            transform: skew(-6deg);
            img{
                transform: skew(6deg);
            }
        }
    }
}

/* Modal */
.modal-content {
    .modal-texto{
        padding-inline: 40px;
        h6 {
            font-family: var(--font-corpo);
            font-size: 12pt;
            font-weight: bold;
            text-align: left;
            margin-bottom: 1.5em;
        }
        p {
            font-family: var(--font-subtitulo);
            font-size: 12pt;
            text-align: justify;
            line-height: 1.5;
            text-indent: 1.25cm;
            margin-bottom: 1rem;
        }
    }
}

/* FIM Indicadores END */



/* Conteudo */

.conteudo {
    row-gap: 30px;
    position: relative;
    right: 130px;
    
    .container-texto{
        width: 50%;
        position: relative;

        h2 {
            text-transform: uppercase;
            font-family: var(--font-titulo);
            font-style: normal;
            font-weight: 800;
            font-size: 2rem;
            margin-bottom: 2rem;

            .texto-destacado{
                font-family: var(--font-titulo);
                font-style: normal;
                font-weight: 800;
            }
        }
        h3{
            font-family: var(--font-subtitulo);
            font-style: normal;
            font-weight: normal;
            font-size: 1.5rem;

            margin-bottom: 1.5rem;

            background: var(--font-cor-neutra);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        p{
            font-size: 1rem;
            text-indent: 30px;
            text-align: justify;
            font-family: var(--font-corpo);
            color: var(--font-cor-neutra);
            
            margin-bottom: 1rem;
        }
        .lista-de-indicadores{
            list-style: none;
            padding: 0;
            margin-block: 10px;

            display: grid;
            columns: 1;
            gap: 10px;

            li{
                padding-inline: 15px;
                padding-block: 15px;
                margin: 0;
                border-radius: 15px;

                .titulo-lista{
                    font-family: var(--font-subtitulo);
                    font-style: normal;
                    font-weight: 700;
                    font-size: 1rem;
                    padding-left: 30px;

                    position:relative;


                    &::before{
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 5px;
                        width: 20px;
                        height: 20px;
                        background-image: url("../img/seta-lista.svg");
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }
                p{
                    padding-left: 30px;
                    font-weight: 400;
                }
            }
        }
    }
    .painel-lateral {
        position: relative;

        width: 50%;
    
        h1{
            margin: auto;
            margin-bottom: 0px;
            padding-left: 0px;
    
            width: 490px;
    
            font-size: 40px;
            font-weight: 400;
            font-size: 42px;
            font-family: var(--font-corpo);
            font-style: normal;
            font-weight: normal;
            line-height: 55px;
    
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-emphasis-color: transparent;
            
        }
    
        .imagem-movel{
            position: sticky;
            top: 130px;
    
            .imagem-relativa {
                margin: 0 auto;
                overflow: hidden;
                border-radius: 60px 80px;

                width: 400px;
                height: 400px;

                transform: skew(6deg);
                
                img {
                    object-fit: cover;
                    background-color: white;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    transform: skew(-6deg);
                    scale: 1.08;
                }
                
            }
        }
    }
}

.conteudo.invertido{
    right: -130px;

    .painel-lateral{
        .imagem-movel{

            .imagem-relativa{
                transform: skew(-6deg);
                
                img{
                    transform: skew(6deg);
                }
            }
        }
    }
}

#investimento{
    .container-texto{
        h2{
            background: linear-gradient(90deg, var(--degrade-vermelho-leve) 0.21%, var(--degrade-vermelho-forte) 130.84%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;

            width: 300px;
    
            .texto-destacado{
                font-weight: 900;
            }
        }
        .seta{
            position: absolute;
            top: 12px;
            left: 270px;
    
            width: 60px;
            height: 60px;
            fill: var(--cor-amarela);
    
            z-index: -1;
        }
    }

}

#turismo{
    h2{
        background: linear-gradient(90deg, var(--degrade-roxo-leve) 0.21%, var(--degrade-roxo-forte) 130.84%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;

        width: 260px;
    }
    .seta{
        position: absolute;
        top: -50px;
        left: 320px;
        transform: translateX(-100px);
        fill: var(--cor-verde);
        width: 100px;
        height: 100px;
    }

    .conteudo {
        .painel-lateral {
            padding-top: 180px;


            .imagem-movel{
                position: relative;
                top: 0;
                
                
                &:nth-child(2){
                    top: -30px;
                    right: 30px;
                }
                .imagem-relativa{
                    transform: skew(6deg);

                    img{
                        transform: skew(-6deg);
                    }
                }

            }
            .seta-dupla{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                fill: var(--cor-verde);
                width: 160px;
                height: 200px;
                z-index: 2;
            }
        }
    }
}

#inovadora{
    h2{
        background: linear-gradient(90deg, var(--degrade-verde-leve) 0.21%, var(--degrade-verde-forte) 130.84%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .seta{
        position: absolute;
        top: 10%;
        right: 5%;
        fill: var(--cor-azul);
        width: 150px;
        height: 150px;
    }
}

#educacao{
    h2{
        background: linear-gradient(90deg, var(--degrade-amarelo-leve) 0.21%, var(--degrade-amarelo-forte) 130.84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .seta{
        position: absolute;
        top: -4rem;
        left: 3rem;
        transform: translateX(-100px) rotate(-90deg);
        fill: var(--cor-roxa);
        width: 100px;
        height: 100px;
    }
    .imagem-flutuante{
        position: absolute;
        top: -140px;
        left: 30%;
        width: 200px;
    }
}

#competitividade{
    h2{
        background: linear-gradient(90deg, var(--degrade-azul-leve) 0.21%, var(--degrade-azul-forte) 130.84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .seta{
        position: absolute;
        top: -4rem;
        left: 3rem;
        transform: translateX(-100px) rotate(-90deg);
        fill: var(--cor-roxa);
        width: 100px;
        height: 100px;
    }
    p{
        text-indent: 0;
    }
}

#transparente{
    height: 500px;

    h2{
        background: linear-gradient(90deg, var(--degrade-vermelho-leve) 0.21%, var(--degrade-vermelho-forte) 130.84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;

        width: 310px;
    }
    .selo-transparencia{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%);

        width: 200px;
        height: 200px;

        padding: 0;
    }
    .seta{
        position: absolute;
        top: -60px;
        left: 250px;

        fill: var(--cor-verde);

        width: 100px;
    }
}

#inovacao{
    h2{
        background: linear-gradient(90deg, var(--degrade-roxo-leve) 0.21%, var(--degrade-roxo-forte) 130.84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;

        width: 310px;
    }
    .botao-inova{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

        text-transform: uppercase;

        width: 300px;
        height: 70px;
        border: none;

        border-radius: 16px 10px;
        transform: skew(10deg); /* Inclina o elemento */
        
        background-color: var(--cor-vermelha);
        overflow: hidden;
        color: #fff;
        text-decoration: none;

    
        
        &::before{
            content: '';
            position: absolute;
            width: 0px;
            height: 0px;
            background-color: var(--cor-vermelha);
            clip-path: circle(50% at 50% 50%);
            z-index: -1; /* Coloca o pseudo-elemento atrás do botão */
            transition: calc(2*var(--delay-default));
        }
        &:hover::before{
            content: '';
            position: absolute;
            width: 350px;
            height: 350px;
            background-color: #C01D3C;
            z-index: -1; /* Coloca o pseudo-elemento atrás do botão */
        }
        p{
            font-family: var(--font-corpo);
            font-weight: 300;
    
            font-size: 1rem;
            color: #fff;
            text-indent: 0;
            margin: 0;

            transform: skew(-10deg); /* Inclina o elemento */

            span{
                font-family: var(--font-subtitulo);
                font-weight: 800;
        
                font-size: 1rem;
                color: #fff;
    
                transform: skew(-10deg); /* Inclina o elemento */
            }
        }
    }
    .seta{
        position: absolute;
        top: 30px;
        left: 400px;

        fill: var(--cor-amarela);

        width: 100px;
    }
    .seta-dupla{
        position: absolute;
        top: 30px;
        right: -250px;

        width: 200px;
    }
}

/* FIM Conteudo END */



/* Link */

.viva-link{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;

    width: 100%;
    height: 200px;

    background-color: var(--cor-roxa);

    .botao-viva-link{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;


        width: 300px;
        height: 70px;
        border: none;

        border-radius: 16px 10px;
        transform: skew(-10deg); /* Inclina o elemento */
        
        background-color: var(--cor-azul);
        overflow: hidden;
        color: #fff;
        text-decoration: none;

    
        
        &::before{
            content: '';
            position: absolute;
            width: 0px;
            height: 0px;
            background-color: var(--degrade-azul-leve);
            clip-path: circle(50% at 50% 50%);
            z-index: -1; /* Coloca o pseudo-elemento atrás do botão */
            transition: calc(2*var(--delay-default));
        }
        &:hover::before{
            content: '';
            position: absolute;
            width: 350px;
            height: 350px;
            background-color: var(--degrade-azul-forte);
            z-index: -1; /* Coloca o pseudo-elemento atrás do botão */
        }
        span{
            font-family: var(--font-subtitulo);
            font-weight: 800;
    
            font-size: 1.8rem;
            color: #fff;

            transform: skew(10deg); /* Inclina o elemento */
        }
    }
    p{
        font-size: 1rem;
        font-weight: 500;
        color: #fff;
        margin: 0;
    }
}

/* FIM Link END */



/* Banner */

.banner{
    height: 300px;
    width: 100vw;
    
    margin-block: 50px;
    padding: 0 10%;

    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    
    &.eixos-principais{
        background-image: url('../img/banner-eixos.webp');
        background-repeat: unset;
        background-position-x: 288px;

        .banner-texto{
            position: relative;
            top: 50%;
        
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
    
            width: 440px;
            height: 400px;
    
            padding: 20px;
            border: none;
            border-radius: 60px 80px;
    
            text-decoration: none;
            transition: var(--delay-default);
            transform: skew(10deg) translate(10%, -50%);
            
            background-color: var(--cor-vermelha);
            
            h2 {
                text-transform: uppercase;
                font-family: var(--font-titulo);
                font-style: normal;
                font-weight: 800;
                font-size: 2rem;
                line-height: 2.4rem;
                
                color: white;
                width: min-content;
    
                transform: skew(-10deg);
            }
        }
    }
    &.texto-institucional{
        background-image: url('../img/banner-prefeitura.webp');
        display: flex;
        justify-content: center;
        align-items: center;

        position: relative;

        .banner-texto{

            h2{
                font-family: var(--font-corpo);
                font-style: normal;
                font-weight: 800;
                font-size: 1.6rem;
                text-align: center;
                line-height: 2.4rem;

                color: white;
            }
            p{
                font-family: var(--font-corpo);
                font-style: normal;
                font-weight: 200;
                font-size: 1rem;
                text-align: center;
                line-height: 1.4rem;
                text-transform: none;
                text-transform: uppercase;

                color: white;
            }
        }
        .seta {
            position: absolute;
            top: -90px;
            right: -10px;

            width: 200px;
        }
        .logo {
            position: absolute;
            bottom: -150px;
            left: 40px;

            width: 250px;
        }
    }
}

/* FIM Banner END */



/* Video */

.container-video{
    display: flex;
    justify-content: center;
    align-items: center;

    background: rgb(15, 15, 15);
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(5px);

    width: 100vw;
    height: 75vh;

    padding-bottom: 38px;

    iframe{
        height: 100%;
        width: 100%;
    }
}

/* FIM Video END */



/* Animacoes */

/* Sem animacoes por enquanto */

/* FIM Animacoes END */



/* Responsividade */

@media (max-width: 1400px) {
    .banner {
        &.eixos-principais {
            background-position-x: 200px;
        }
    }
}

@media (max-width: 1117px) {
    #conteudo-inicial-logo {
        background-image: url('../img/logo-criciuma-mais-branca-retrato.webp');
        width: 315px;
        height: 103px;
    }
}

@media (max-width: 991px) {
    .indicadores-caixa{
        justify-content: center;
        
        row-gap: 20px;
        text-align: center;
    }
    
    .conteudo, .conteudo.invertido {
        right: unset;
        .container-texto {
            width: 100%;
        }
        .painel-lateral{
            display: none;
        }
    }

    #inovacao{
        .seta-dupla{
            display: none;
        }
    }

    .banner{

        &.eixos-principais{
            background-position: center;
            
            .banner-texto{ 
                width: min-content;
                
                width: 260px;
                height: 260px;
                top: 80%;
                border-radius: 50px 70px;

                h2{
                    font-size: 1.5rem;
                    
                    width: min-content;
                }
            }
        }
    }

    #transparente {
        .selo-transparencia {
            top: 20px;
            left: 70%;
            width: 150px;
        }
    }


    .painel-lateral {
        h1{
            font-size: 32px;
        }
    }

    .conteudo p {
        padding-right: 0;
        text-align: justify;
    }

    .painel-lateral {
        justify-content: center;
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    section{
        padding-block: 40px;
    }
}

@media (max-width: 730px) {
    
    #transparente {
        height: unset;
        .selo-transparencia {
            width: 150px;
            height: 150px;
            position: unset;
            transform: unset;
            margin: 0 auto;
        }
    }

    .viva-link{
        flex-direction: column;
        gap: 15px;

        height: 150px;
        padding-inline: 16%;

        p{
            text-align: center;
            font-size: 0.7rem;
        }
        .botao-viva-link{
            height: 50px;
            width: 100%;
            max-width: 300px;
            border-radius: 12px 6px;
            span{
                font-size: 1rem;

            }
            img{
                padding-block: 15px;
            }
        }
    }
    .indicadores-caixa {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: repeat(8, auto);
    }  
}

@media (max-width: 576px) {
    
    .container-texto {
        padding-inline: 12px;
    }

    .painel-lateral{
        h1{
            width: 350px;
        }

        .imagem-movel{
            .lazer-esporte {
                border-radius: 0 59px;
                
                img{
                    border-radius: 0 55px;
                }
            }
        }
        
    }
}

@media (max-width: 425px) {
    #conteudo-inicial{
        padding-inline: 0;
    }
    .indicadores-caixa {
        gap: 0;
    }
    .indicadores-filhos{
        transform: scale(0.9);
    }

    #allacessibilidade div.mereco {
        color: #fff;
        transition: none !important;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        height: 200px;
        font-size: 15px;
        margin-bottom: 0px;
        width: 100%;
        cursor: pointer;
        background-color: #0092DD;
    }

    .banner {
        &.texto-institucional {
            .seta {
                display: none;
            }
            .logo {
                position: absolute;
                bottom: -108px;
                left: 26%;
                transform: translateX(-50%);

                width: 150px;
            }
        }
    }

    #educacao {
        .seta {
            position: absolute;
            left: 325px;
            transform: translateX(-100px);
            width: 100px;
            height: 100px;
        }
    }

    #inovacao{
        .botao-inova{
            margin: auto;
        }
    }

    #transparente{
        .conteudo{
            gap: 0;
        }
    }

    .seta{
        display: none;
    }
}

@media (max-width: 365px) {
    .painel-lateral{
        h1{
            width: 300px;
        }
        .imagem-relativa {
            width: 300px;
        }
    }
}

/* FIM Responsividade END */