.secao-home{
    
    margin-top: 150px;
    width: 100vw;

    scroll-snap-align: start;

}

.rwg-navegacao{
    
    margin-top: 45px;
    
}

/* ILUSTRACAO */

negrito{
    font-weight: 900;
    color: var(--cor-azul-escuro);
}

linke{
    font-weight: 900;
    color: var(--cor-principal)!important;
}

linke a{
    appearance: none!important;
    text-decoration: none;
    color: var(--cor-principal)!important;
}

.ilustracao-caixa{
    margin-top: 50px;
    padding: 20px 25px 20px 25px;
    background-color: var( --cor-cinza-1 );
    border-radius: 10px;
    
    text-align: justify;
    color: var(--cor-azul-escuro);
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    line-height: 28px;
}

.ilustracao-explicacao-linha{
    display: flex;
    margin-top: 50px;
}
.ilustracao-coluna{
    width: 50%;
}

.ilustracao-titulo{
    color: var(--cor-azul-escuro);
    font-size: 42px;
    font-weight: 800;
    text-transform: uppercase;
    font-style: italic;
    margin-top: -10px;
}
.ilustracao-texto{
    text-align: justify;
    color: var(--cor-azul-escuro-30);
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    line-height: 28px;
    margin-top: 20px;
}

.ilustracao-detalhe{
    background: var(--cor-principal);
    z-index: 2;
    position: relative;
}

.ilustracao-desenho{
    box-shadow: 0px 0px 32px -14px var(--cor-azul-escuro-30);
    border-radius: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
}
.ilustracao-desenho:hover .item_overlay, .ilustracao-desenho:hover .conteudo-item {
    opacity: 1;
}

.item_overlay{
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, transparent 30%, var(--cor-principal) 120%);
    border-radius: 15px!important;
    opacity: 0;
    transition: opacity 0.5s;
}

.conteudo-item {
    font-size: 24px;
    font-weight: 800;
    font-style: italic;
    text-align: left;
    color: white;
    height: 30px;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: all 0.5s;
    transform: translate( 15px, -295px);
    
    text-transform: uppercase;
}

#d1{
    background-image: url(/uploads/portfolio/ilustracoes-mini/BUSTO-43.webp); 
    
    width: 55%;
    height: 200px;
}
#d1:hover .conteudo-item { transform: translate( 15px, -195px); }

#d2{
    background-image: url(/uploads/portfolio/ilustracoes-mini/BUSTO-4.webp);
    
    width: 65%;
    height: 240px;
    
    margin-left: auto;
}
#d2:hover .conteudo-item { transform: translate( 15px, -234px); }

#d3{
    background-image: url(/uploads/portfolio/ilustracoes-mini/CORPO-4.webp); 
    
    width: 40%;
    height: 160px;
    
    margin-left: 16%;
}
#d3:hover .conteudo-item { transform: translate( 15px, -153px); }

#q1{ 
    width: 28px; 
    height: 20px; 
    border-radius: 5px;
    
    margin-bottom: -20px; 
    
    margin-left: auto;
    margin-right: 25%;

}
#q2{ 
    width: 40px; 
    height: 30px; 
    border-radius: 10px;
    
    margin-bottom: -15px; 
    margin-top: -78px;
    
    margin-left: auto;
    margin-right: 10%;
}
#q3{ 
    width: 50px; 
    height: 40px; 
    border-radius: 10px;
    
    margin-bottom: -30px; 
    margin-top: -90px;
    

}

/* outra parte */

#d4{
    background-image: url(/uploads/portfolio/ilustracoes-mini/CABECA-7.webp); 
    
    width: 55%;
    height: 200px;
    
    margin-left: auto;
}
#d4:hover .conteudo-item { transform: translate( 15px, -195px); }

#d5{
    background-image: url(/uploads/portfolio/ilustracoes-mini/BUSTO-22.webp);
    
    width: 65%;
    height: 240px;
    
    margin-top: -100px;

}
#d5:hover .conteudo-item { transform: translate( 15px, -234px); }

#d6{
    background-image: url(/uploads/portfolio/ilustracoes-mini/CORPO-19.webp); 
    
    width: 40%;
    height: 160px;
    
    margin-right: 16%;
    margin-left: auto;
    
    margin-top: -70px;
}
#d6:hover .conteudo-item { transform: translate( 15px, -153px); }

#q4{ 
    width: 28px; 
    height: 20px; 
    border-radius: 5px;
    
    margin-bottom: -20px; 
    
    margin-left: 25%;

}
#q5{ 
    width: 50px; 
    height: 40px; 
    border-radius: 10px;
    
    margin-bottom: -15px; 
    margin-top: -10px;
    
    margin-left: auto;
    margin-right: 10%;
}
#q6{ 
    width: 40px; 
    height: 30px; 
    border-radius: 10px;
    
    margin-top: -30px;
    margin-left: 10%;

}

/* outra parte */

#d7{
    background-image: url(/uploads/portfolio/ilustracoes-mini/BUSTO-9.webp); 
    
    width: 55%;
    height: 200px;
    
}
#d7:hover .conteudo-item { transform: translate( 15px, -195px); }

#d8{
    background-image: url(/uploads/portfolio/ilustracoes-mini/BUSTO-35.webp);
    
    width: 65%;
    height: 240px;
    
    margin-left: auto;

}
#d8:hover .conteudo-item { transform: translate( 15px, -234px); }

#q7{ 
    width: 28px; 
    height: 20px; 
    border-radius: 5px;
    
    margin-bottom: -20px; 
    
    margin-left: auto;
    margin-right: 10%;

}
#q8{ 
    width: 50px; 
    height: 40px; 
    border-radius: 10px;
    
    margin-bottom: -15px; 
    margin-top: -90px;
    
    margin-left: auto;
    margin-right: 12%;
}
#q9{ 
    width: 40px; 
    height: 30px; 
    border-radius: 10px;
    
    margin-left: 10%;
    
    margin-top: -135px;
    margin-bottom: 105px;

}


/* Streampack Tabela */

.pacotes{

    display:flex;
    margin-top: 80px;
    margin-bottom: 50px;

}

.pacotes .pacote{

    width: 33.3%;

    overflow: hidden;
    background-color: var(--cor-cinza-1);
    border-radius: 8px;
    
    font-weight: 800;
    font-style: italic;
    
    cursor: pointer;

    transition: transform 1s;

    padding: 30px;

}

.pacotes #pacote1{margin-right: 16px;}
.pacotes #pacote2{margin-right: 16px; margin-left:16px; transform: translate(-18px, 0px);}
.pacotes #pacote3{margin-left: 16px;}

.pacotes .etiqueta{

    background: var(--cor-cinza-1 )!important;
    color: var(--cor-principal);
    border-radius: 30px;
    font-size: 14px!important;
    line-height: 14px;
    font-weight: 900!important;
    font-style: italic!important;
    padding: 8px 22px;
    margin-bottom: 10px;

    -webkit-text-stroke: 0.4px var(--cor-principal);
    letter-spacing: 1px;

    display: none;
    
}

.pacotes .titulo{

    color: var( --cor-principal );

    font-size: 33px;
    font-weight: 900;
    font-style: italic;

    line-height: 33px;

}

.pacotes .valor{

    display:flex;
    color: var(--cor-azul-escuro);

    margin-bottom: 30px;
    margin-top: 8px;

}

    .pacotes .valorAntes{
        
        margin-right: 5px;
        font-weight: 800;
        font-size: 30px;
        margin-top: 23px;

    }

    .pacotes .valorDepois{
        
        font-size: 58px;
        line-height: 65px;

    }

.pacotes .item{
    display: flex;
    margin-top: 11px;
    font-size: 17px;
    line-height: 26px;

    opacity: 0.3;

    color: var(--cor-azul-escuro);
}    

    .pacotes .item i {
        color: var(--cor-azul-escuro);
        margin-right: 10px;
        font-size: 26px;
    }  

    .pacotes .item.incluso i {
        color: var(--cor-verde-2);
    }      

    .pacotes .item.incluso{
        opacity: 1;
    }

/* Ativo */

.pacotes .pacote.ativo{
    
    background: var(--cor-principal);

}

.pacotes #pacote1.ativo{ transform: translate(18px, 0px) scale(1.1); }
.pacotes #pacote1.ativo ~ #pacote2{ transform: translate(18px, 0px); }

.pacotes #pacote2.ativo{ transform: scale(1.1); }

.pacotes #pacote3.ativo{ transform: translate(-18px, 0px) scale(1.1); }
.pacotes #pacote3.ativo + #pacote2{ transform: translate(-18px, 0px); }

.pacotes .pacote.ativo .etiqueta{ 
    display: inline-block;
}

.pacotes .pacote.ativo .titulo{


  color:var( --cor-cinza-1 )!important;
  
}

.pacotes .pacote.ativo .valor{
  
    color: white;
  
}

.pacotes .pacote.ativo .item{
    color:var( --cor-cinza-1 );
    opacity: 0.5;
}

.pacotes .pacote.ativo .item.incluso{
    opacity: 1;
}

    .pacotes .pacote.ativo .item i {
        color:var( --cor-cinza-1 );
    }  

/* MOBILE */

@media (max-width: 767px) {
    
    .widgetTabelaStreampack{
       width: auto;
       display: inline-flex;
   }
   
    .colunaS{
       margin-top: 0px;
       margin-bottom: 0px;
       width: 250px!important;
   }
   
    .widgetTabelaStreampack{
 
       display: inline-flex;
       padding-bottom: 30px;
       
       position: relative;
       width: 100%;
       height: auto;
       overflow-x: scroll;
       overflow-y: hidden;
       white-space: nowrap;
       transition: all 0.2s;
       will-change: transform;
       user-select: none;
       cursor: pointer;
       
   }

    .colunaS{
       
       width: 250px;
   
       min-width: 250px;
       
       margin-right: 15px!important;
       
       display: flex;
       display: inline-block;
       
       background: #505050;
       background-size: cover!important;
       background-position: center!important;
       background-size: auto 100%!important;
      
       transition: .8s;
      
       cursor: grab;
      
       border-radius: 15px;
       margin-bottom: -30px;
       /*
       @media screen and (max-width: 500px) {
         min-height: 200px;
         min-width: 200px;
       }*/
     
   }

   #c1S{margin-right: 0px; margin-left: 30px;}
   #c2S{margin-right: 0px; margin-left:0px;}
   #c3S{margin-left: 0px; margin-right: 30px!important;}
   
    .tabelaTituloS{

       font-size: 26px!important;
       line-height: 29px;
       
       padding-left: 30px;
   
   }
   
    .tabelaPrecoS{

 
       justify-content:center;
   
   
       font-size: 42px;
       line-height: 42px;
       color: var(--e-global-color-9f0c5ba);
       
       text-align: left;
   
       padding-top: -5px;
       padding-left: 30px;
   
   }
   
    .valorAntesS{
   
       font-size: 24px;

   
   }
   
    .tabelaListaElementosS{

     line-height: 25px;

   }

    .item_lista{
       
       font-family: "Lato", Sans-serif;
       font-size: 15px;
       font-weight: 900;
       font-style: italic;
       letter-spacing: 0px;
   
       
   }
   
    .bxs-check-circle{
       margin-right: 7px;
       font-size: 1em;
   }
   
    .fa-times-circle{
       margin-right: 7px;
       font-size: 1em;
   }
   
       
    .botaoRodapeS{
   
       font-size: 15px;
       line-height:30px;
       margin-bottom: 30px!important;
       margin-top: 30px!important;
       margin-right: 30px;
       margin-left: 30px;
       
   }
   
    .tabelaGeralS{
       
       margin-bottom: 0px!important;
       
   }

   


}

.avulsos-titulo-box{
    font-size: 23px;
    font-weight: 800;
    font-style: italic;
    color: var(--cor-azul-escuro);

    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0px;

    transition: transform .3s;
}

.avulsos-titulo-box:hover{

    color: var(--cor-principal);
    transform: scale(1.1);
}

.avulsos-titulo{
    cursor: pointer;
}

.avulsos-titulo-box i{
    font-size: 29px;
    padding-left: 6px;
}

/* Ilustração Tabela */

.estilos{

    display:flex;
    margin-top: 60px;
    margin-bottom: 65px;

}

.estilos .estilo{

    width: 33.3%;

    overflow: hidden;
    background-color: var(--cor-cinza-1);
    border-radius: 8px;
    
    font-weight: 800;
    font-style: italic;
    
    cursor: pointer;

    transition: transform 1s;

    position: relative;

}

.estilos #estilo1{margin-right: 16px;}
.estilos #estilo2{margin-right: 16px; margin-left:16px; transform: translate(-18px, 0px);}
.estilos #estilo3{margin-left: 16px;}

.estilos .cabecalho{
    height: 275px;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--cor-azul-escuro);
}

    .estilos .valor{

        display:flex;
        color: var(--cor-branco);

        padding-top: 53px;
        padding-bottom: 10px;

        width: fit-content;
        margin-left: auto;
        margin-right: auto;

        position: relative;
        z-index: 1;

    }

        .estilos .valorAntes{
            
            margin-right: 5px;
            font-weight: 800;
            font-size: 50px;
            margin-top: 50px;

        }

        .estilos .valorDepois{
            
            font-size: 110px;
            line-height: 110px;

        }
    
    .estilos .subtitulo{

        color: var(--cor-branco);
        
        font-size: 25px!important;
        line-height: 14px;
        font-weight: 900!important;
        font-style: italic!important;
        text-align: center;
        
        opacity: 0.5;

        position: relative;
        z-index: 1;
            
    }    

.estilos .overlay{

    opacity: 0.8;
    background-image: linear-gradient(180deg,var(--cor-azul-escuro-30) 40%,var(--cor-principal) 150%);
    height: 275px;
    width: 100%;
        
    position: absolute;
    top: 0px;
}

.estilos .tabela{
    padding: 40px;
    margin-top: -67px;
}

    .estilos .titulo{

        color: var( --cor-branco );
        background: var(--cor-principal);

        font-size: 22px;
        font-weight: 900;
        font-style: italic;
        text-transform: uppercase;
        text-align: center;

        line-height: 50px;
        height: 50px;

        border-radius: 8px;

        margin-bottom: 35px;

        position: relative;
        z-index: 1;
    }

.estilos .item{
    display: flex;
    margin-top: 8px;
    font-size: 20px;
    line-height: 35px;

    color: var(--cor-azul-escuro);
    width: fit-content;
}   

.estilos .item.selecionado{
    border-left: solid 5px var(--cor-principal);
    padding-left: 16px;
}

    .estilos .pre-texto{
        color: var(--cor-principal);
        margin-right: 6px;
    } 

/* Ativo */

.estilos .estilo.ativo{
    
    background: var(--cor-principal);

}

.estilos #estilo1.ativo{ transform: translate(18px, 0px) scale(1.1); }
.estilos #estilo1.ativo ~ #estilo2{ transform: translate(18px, 0px); }

.estilos #estilo2.ativo{ transform: scale(1.1); }

.estilos #estilo3.ativo{ transform: translate(-18px, 0px) scale(1.1); }
.estilos #estilo3.ativo + #estilo2{ transform: translate(-18px, 0px); }

.estilos .estilo.ativo .titulo{ 
    color: var( --cor-azul-escuro );
    background: var(--cor-cinza-1);
}

.estilos .estilo.ativo .item{
    color: var(--cor-branco-30);
}   

.estilos .estilo.ativo .item.selecionado{
    border-left: solid 5px var(--cor-branco);
}

    .estilos .estilo.ativo .pre-texto{
        color: var(--cor-branco);
    } 


/* Pop Up */

.pop-up{
    background: var(--cor-azul-escuro-30);
    width: 100vw;
    height: 100vh;
    position: fixed;

    left: 0px;
    top: 0px;

    z-index: 99;
    margin-left: 0px;
    top: 0;
    left: 0;
    backdrop-filter: blur(5px);

    
}

.pop-up .base{
    background: var(--cor-azul-escuro);
    border-radius: 10px;
    width: 100%;
    height: 60vh;
    margin-top: 20vh;

    position: relative;
    padding: 60px;

    background-image: url(/uploads/fundoRuido3.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 60%;

    box-shadow: 0px 0px 32px -14px var(--cor-azul-escuro-30);
}

.pop-up .base .titulo{
    color: var(--cor-branco);
    font-size: 50px;
    font-weight: 800;
    text-transform: uppercase;
    font-style: italic;
}

.pop-up .base .subtitulo{
    color: var(--cor-branco);
    text-align: justify;
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.4em;
    opacity: 0.6;
    width: calc(100% - (35% + 102px));

    margin-top: 20px;
}

.pop-up .base .valor{
    color: var(--cor-branco);
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
    font-style: italic;
    position: absolute;
    bottom: 60px;
    opacity: 0.5;
}

.pop-up .itens{

    background: var(--cor-branco);
    border-radius: 10px;
    width: 35%;

    position: absolute;
    z-index: 2;
    right: 60px;
    top: 60px;

    padding: 20px;

}

.pop-up .itens .titulo{
    color: var(--cor-azul-escuro);
    font-size: 37px;
    font-weight: 900;
    text-transform: uppercase;
    font-style: italic;
}

.pop-up .itens .subtitulo{
    color: var(--cor-azul-escuro);
    font-size: 19px;
    font-weight: 900;
    font-style: italic;
    line-height: 1.4em;
    opacity: 0.6;
    margin-top: 0px;
    width: auto;
}



.pop-up .itens .conteudo{

    padding-top: 30px;
}

    .pop-up .item{
        display: flex;
        margin-top: 4px;
        font-size: 20px;
        line-height: 35px;
    
        color: var(--cor-azul-escuro);
        width: fit-content;

        font-weight: 800;
        font-style: italic;

        text-transform: uppercase;

        cursor: pointer;
    }   
    
    .pop-up .item.selecionado{
        border-left: solid 5px var(--cor-principal);
        padding-left: 16px;
    }
    
        .pop-up .pre-texto{
            color: var(--cor-principal);
            margin-right: 6px;
        } 

.pop-up .itens .botao{
    font-size: 19px;
    font-weight: 900;
    font-style: italic;
    background: var(--cor-principal);
    padding: 14px 0px;
    transition: 0.4s transform;
    border-radius: 10px!important;
    cursor: pointer!important;
    box-shadow: 0px 0px 30px rgba(97,125,182,0.3)!important;
    color: var(--cor-branco);
    text-align: center;

    margin-top: 20px;
}

.pop-up .itens .botao:hover{
    background: transparent;
    box-shadow: inset 0px 0px 0px 3.5px !important;
    color: var(--cor-azul-escuro);
}

.pop-up i{
    color: var(--cor-branco);
    font-size: 38px;
    position: absolute;
    right: 15px;
    top: 15px;
    font-weight: 900;

    cursor: pointer;
    z-index: 1;
}

.pop-up .rwg-background-overlay{
    background-image: url(/uploads/logoGrande.webp);
    filter: invert(91%) sepia(12%) saturate(131%) hue-rotate(193deg) brightness(96%) contrast(89%);
    background-position: 13vw -23vh;
    background-repeat: no-repeat;
    background-size: 72vw auto;
    opacity: 0.6;
    mix-blend-mode: overlay;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;

}

/* Mobile Geral */
@media (max-width: 1199px) { 

    .secao-home, .secao-ilustracao, .secao-streampack{
        padding: 0px 30px;
    }

    .estilos{
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }

        .estilos .estilo{
            width: 100%;
            margin-left: 0px!important;
            margin-right: 0px!important;
            transform: none!important;
        }

    .pacotes{
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }
    
        .pacotes .pacote{
            width: 100%;
            margin-left: 0px!important;
            margin-right: 0px!important;
            transform: none!important;
        }


    .avulsos-titulo-box{
        padding: 0px;
        font-size: 19px;
        text-align: center;
        margin-bottom: 50px;
    }

    .pop-up{
        padding: 0px 30px;
    }

        .pop-up .itens {
            width: 100%;
            position: initial;
        }

        .pop-up .item{
            font-size: 17px;
            line-height: 27px;
        }

        .pop-up .base{
            padding: 30px;
            height: 55vh;
            margin-top: 10vh;
        }

        .pop-up .base .subtitulo{
            width: 100%;
            font-size: 16px;
            margin-bottom: 30px;
        }

        .pop-up .base .titulo {
            font-size: 35px;
        }

        .pop-up .itens .titulo {
            font-size: 35px;
        }

        .pop-up .itens .conteudo {
            padding-top: 0px;
        }


}