@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* ---------- PARAMETROS GENERICOS E AGRUPAMENTOS------------*/
:root {
    --azul:rgb(0, 213, 255);
    --dark-bg:#121214;
    --dark-gray:#19191b;
    --mid-gray:#313133;
    --light-gray:#a4a3a9;
}
*{  
    font-family: 'Poppins', sans-serif;
    box-sizing:border-box;
    margin:0;
    padding:0;
    list-style:none;
    border:none;
    text-decoration:none;
    display:flex;
}
script,style,title,.hidden{
    visibility:hidden;
    display: none !important;
}
body,nav{
    background:var(--dark-bg);
    width: 100%;
    max-width: 100vw;
}
body:before{
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("../imagens/brazil-dotted-blue.svg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 85% center;
    background-size: auto 95%;
    opacity: 0.2;
    z-index:-1;
}
/* Agrupando cores de texto e estilos de fontes */
h1, h2, h3,h4, a,
a:visited,#cidade .material-icons,
.button .material-symbols-outlined {
    color: white;
}
h1,h2,h3,h4,p{
    display: block !important;
}
span {
    color: var(--azul);
    display: inline!important;
}
p {
    color: var(--light-gray);
}
.material-icons, .material-symbols-outlined {
    font-size: 24px;
    color: var(--azul);
}
#qualificacao .material-icons, #qualificacao .material-symbols-outlined {
    font-size: 30px;
}
/* Agrupando display e alinhamento comum */

#menu-desktop, .center, #logo, #detalhes-itens, #modulos, .button,#cidade a,#lista-estados a, #contato, #expertise div, nav, #cidade {
    align-items: center;
    justify-content: center;
}
body,.column,#hero-columns, #selecao-itens, #detalhes-itens, .bloco,#expertise div,#slogan,#selecao-cidade,#container,#contato div,#acesso {
    flex-direction: column;
}
#hero-rows, #modulos, #qualificacao, #expertise, #detalhes-itens, #hero-columns,#selecao-itens,#contato,#lista-estados {
    flex-wrap: wrap;
    gap:30px;
}
/* Padding agrupado */
#container, #hero-columns {
    padding: 50px;
}
/* Agrupando elementos com bordas arredondadas */
#cidade a, #selecao-cidade input, .bloco,#acesso {
    border-radius: 10px;
}
/* ----------- FIM DOS GENERICOS E AGRUPAMENTOS */
nav{
    padding:0 10px;
    justify-content: space-between!important;
    color:white;
    border-bottom:1px solid var(--mid-gray);
}
/* Estilo de botões */
.button{
    background: var(--azul);
    color: white;
    gap: 10px;
    padding: 8px 13px;
    border-radius: 20px;
    border: solid 2px var(--azul);
    font-size:14px;
    font-weight:600;
}
.button:hover {
    cursor: pointer;
    background: none;
}
#menu-desktop{
    justify-content: flex-end;
    gap:20px;
    width: 50%;
}
#acesso{
    position:absolute;
    right:05px;
    top:60px;
    gap:10px;
    align-items: flex-start;
    padding:20px 30px 30px;
    background:var(--dark-gray);
    border:solid 1px var(--mid-gray);
    font-weight:600;
    color: white!important;
    z-index:2;
}
#acesso div{
    gap:10px;
    align-items:center;
}
#acesso a{
    font-size:10px;
}
#detalhes-itens{
    min-width:250px;
    flex:1;
    transition: opacity 0.25s ease;
}
.visible{
    opacity: 1 !important;
    transition: opacity 0.5s ease;
}
.invisible{
    opacity: 0 !important;
    transition: opacity 0.5s ease;
}

#detalhes-itens p{
    max-width:500px;
    text-align: justify;
}
#cidade{
    width:100%;
    justify-content:flex-start!important;
    margin-bottom:10px;
}
#cidade a{
    background:var(--azul);
    padding:9px;
    border-radius:0 10px 10px 0;
    color:white;
}
#cidade a:hover{
    background:var(--mid-gray);
}
input{
    padding:10px;
    background:none;
    border:solid 1px var(--mid-gray);
    border-radius:10px;
    color:var(--light-gray);
}
#selecao-cidade input{
    border-radius:10px 0 0 10px;
}
#lista-estados{
    max-width:450px;
    gap:0px!important;
}
#lista-estados a{
    color:var(--light-gray);
    width:35px;
    font-size:14px;
    border-radius:5px;
}
.bloco{
    background:var(--dark-gray);
    border:solid 1px var(--mid-gray);
    padding:10px;
    font-size:0.7em;
    gap:10px;
    flex:1;
}
#modulos .bloco{
    min-width: 250px;
    font-size:0.6em;
    gap:5px;
}
#qualificacao .bloco{
    min-width:300px;
    width:300px!important;
    background-color:rgba(18, 18, 20, 0.8);;
    padding:30px;
    
}
#contato .bloco{
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    padding:20px;
    margin-top:20px;
    flex:1;
    overflow:none;
}
#modulos .bloco:hover, #lista-estados a:hover, #modulos .active{
    background:var(--mid-gray)!important;
}
#modulos{
    width:100%;
    max-width:510px;
    gap:10px!important;
}
#qualificacao, #expertise, #contato{
    margin:auto;
    max-width:1000px;
    justify-content:space-between;
    width:100%;
}
#expertise div,#contato > div{
    min-width:250px;
    flex:1;
}
#number{
    min-width: 200px!important;
}
#number h1{
  font-size: 5.0em;
}
#contato{
    flex-direction: row;
    margin-top:60px;    
}
#contato p{
    word-wrap: break-word; /* Quebra palavras longas */
    word-break: break-word; /* Compatibilidade adicional */
    hyphens: auto; /* Hifenização automática */
    overflow-wrap: break-word; /* Para navegadores mais modernos */
    text-align: left; /* Alinha o texto à esquerda */
    max-width: 100%; /* Garante que o texto respeite o tamanho do bloco */
}
.particle {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Impede que as partículas atrapalhem a interação com outros elementos */
    z-index: -1; /* Coloca as partículas atrás do conteúdo */
}
.circle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity:0;
    background-color: rgba(0, 150, 255, 0.8); /* Azul com transparência */
    animation: float 1s infinite ease-in-out, glow 2s infinite ease-in-out; /* Animações de movimento e opacidade/tamanho */
}
@media (max-width: 910px) {
    #modulos{
        max-width:none;
    }
}
@media (max-width: 500px) {
    #container, #hero-columns {
        padding:50px 0;
        width:90%;
        margin:0 auto;
    }
    #qualificacao .bloco{
        min-width: 250px
    }


}
/* Animação de movimento suave */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1); /* Posição inicial e escala normal */
    }
   
    50% {
        transform: translate(-3px, 3px) scale(1.5); /* Movimento circular */
    }
   
}

/* Animação de opacidade e tamanho */
@keyframes glow {
    0%, 100% {
        opacity: 0.0;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.5;
    }
}