/* == Importação de fontes == */ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* == Reset de estilos == */ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    scroll-behavior: smooth;
}

:focus {
    outline: 2px solid var(--cor-destaque);
    outline-offset: 2px;
}

:root {
    --primaria: #4f46e5;
    --secundaria: #7c3aed;
    --escuro: #0f172a;
    --maisEscuro: #0a0f1c;
    --claro: #e2e8f0;
    --vidro: rgba(255, 255, 255, 0.1);

    /* Extras */
    --color-00: #0000001a;
    --bgcolor01: #0D1017;
    --main-color: #6EF700;
    --bg-color-01: #181829;
    --text-color: var(--claro);
    --bg-color-02: #0D1017;
    --bg-divInicial: #0d1017a0;
}

html {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: var(--bgcolor01);
    color: var(--claro); 
}

.navbar {
    background-color: var(--color-00);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 1.2rem 8%;
    display: flex;
    justify-content: center;
}

.menu {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

.menu-link {
    font-weight: 500;
    color: var(--claro);
    position: relative;
}

.menu-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, var(--primaria), var(--secundaria));
    transition: width 0.3s ease;
}

.menu-link:hover::after {
    width: 100%;
}

.logo {
    font-size: 1.5rem;
    color: var(--secundaria);
    font-weight: 600;
    cursor: default;
    margin-left: 7px;
}

.particulas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.5;
    background: radial-gradient(circle at 10% 20%, var(--primaria) 0%, transparent 20%), radial-gradient(circle at 90% 80%, var(--secundaria) 0%, transparent 20), var(--maisEscuro);
}

.moon-btn {
    position: fixed;
    top: 1.5rem;
    right: 2rem;
    background-color: transparent;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 0 12px var(--primaria);
    transition: 0.4s ease;
}

.moon-btn i {
    font-size: 2rem;
    color: var(--primaria);
    transition: 0.4s ease;
}

.moon-btn.menu-open i {
    color: white; /* Ícone branco quando aberto */
    background: radial-gradient(circle at 30% 30%, #a100ff 40%, #5a007f 70%, #2a003f 100%); /* Fundo gradiente */
    border-radius: 50%; /* Mantém forma circular */
    padding: 8px; /* Espaçamento interno do ícone */
    box-shadow: inset -3px -3px 6px rgba(255, 255, 255, 0.1), /* Iluminação interna */
                inset 3px 3px 6px rgba(0, 0, 0, 0.4), /* Sombra interna */
                0 0 20px #a100ff, /* Sombra externa rosa */
                0 0 35px #a100ff; /* Sombra externa maior */
}

.moon-menu {
    position: absolute; /* Posiciona relativo ao botão */
    top: 65px; /* Abaixo do botão */
    right: 0; /* Alinhado à direita */
    background: linear-gradient(90deg, var(--bg-color-01), var(--color-00)); /* Graduê entre primária e secundária */
    border: 2px solid var(--primaria); /* Borda colorida */
    border-radius: 1rem; /* Cantos arredondados */
    padding: 0.8rem 1rem; /* Espaçamento interno */
    display: none; /* Inicialmente oculto */
    flex-direction: column; /* Itens empilhados */
    gap: 0.7rem; /* Espaço entre itens */
    box-shadow: 0 0 15px var(--primaria); /* Sombra ao redor do menu */
}

.moon-menu li {
    list-style: none; /* Remove marcador de lista */
}

.moon-menu li a {
    color: var(--primaria); /* Cor dos links */
    font-weight: 500; /* Peso médio */
    transition: 0.3s; /* Transição suave ao hover */
}

.moon-menu li a:hover {
    color: white; /* Texto branco ao hover */
    text-shadow: 0 0 5px var(--primaria); /* Sombra de texto colorida */
}

.menu-link,
.moon-menu li a {
    cursor: pointer; /* Deixa claro que são clicáveis */
}

/* == Home == */ /* Seção principal de apresentação */
.home .home-box {
    min-height: 100vh; /* Ocupa toda a altura da tela */
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-direction: column; /* Itens em coluna */
    padding: 0rem 2rem; /*6rem no topo e embaixo (espaçamento vertical) 2rem nas laterais (espaçamento horizontal)*/
    padding-bottom: 100px;  /*Adiciona espaço de 100px no fim */
}

.foto-perfil {
    width: 200px; /* Largura fixa da imagem */
    height: 200px; /* Altura fixa da imagem */
    object-fit: cover;
    box-shadow: 15px 5px 4px rgba(0, 0, 0, 0.68); /* Sombra forte atrás */
    border-radius: 50%; /* Torna circular */
    border: 4px solid var(--vidro); /* Borda translúcida */
    overflow: hidden; /* Esconde partes que extravasam */
    margin: 4rem 0 0rem 0; /* Margens: 10px topo, 25px base */
    animation: flutuar 5s ease-in-out infinite; /* Animação de flutuação */
}

@keyframes flutuar {
    0%, 100% {
        transform: translateY(0); /* Posição inicial e final */
    }
    50% {
        transform: translateY(-20px); /* Move para cima no meio da animação */
    }
    100% {
        transform: translateY(0); /* Volta para a posição original */
    }
}

.home h1 {
    font-size: 1.7rem; /* Tamanho do título */
    color: var(--primaria); /* Cor primária */
    margin-bottom: 0.3rem; /* Espaço abaixo do título */
    margin-top: 1.5rem; 
}

.home .baixo {
    font-size: 1.2rem; /* Tamanho do subtítulo */
    text-align: center; /* Centraliza texto */
}

span {
    color: var(--main-color);
}

/* Centralizando os ícones de mídias sociais */
.social-mediafooter {
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

/* Estilização dos links das mídias sociais */
.social-media a {
    display: inline-flex; /* Flex container inline para centralizar ícones */
    justify-content: center; /* Centraliza horizontal */
    align-items: center; /* Centraliza vertical */
    width: 2rem; /* Largura fixa */
    height: 2rem; /* Altura fixa */
    border: solid 0.15rem var(--primaria); /* Borda circular colorida */
    border-radius: 50%; /* Torna circular */
    font-size: 1.5rem; /* Tamanho do ícone */
    color: var(--primaria); /* Cor da borda e do ícone */
    margin: 1rem 1rem 1.5rem 0rem; /* Margens ao redor (voltar para 1.5rem ao terminar com o cliente da upwork) */
    transition: 0.5s ease; /* Transição suave ao hover */ 
}

.social-media a:hover {
    background: var(--primaria); /* Fundo primário ao passar */
    color: var(--bg-color-02); /* Cor de ícone contrastante */
    box-shadow: 0 0 0.3rem var(--primaria); /* Sombra leve */
}

/* Estilização das telas divididas da Home */
/* Container c/ as telas divididas */
.telas-divididas {
    display: flex;
    width: 100%;
    min-height: 100vh; /* min-height é melhor que height fixo para evitar cortes */
    flex-direction: row; /* Coloca os itens lado a lado */
}

/* Divisão da Home: sem usar position: absolute para não quebrar a responsividade */
.tela-esquerda, .tela-direita {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tela-esquerda {
    background-color: var(--bg-divInicial);
}

.tela-esquerda p {
    margin-left: 1rem; 
}

.tela-direita {
    margin-top: 0; /* Removendo o margin-top absoluto antigo */
}

/* === Estilização da Copy Dinâmica === */
.copy-container {
    max-width: 500px;
    text-align: left; /* Alinhamento elegante para leitura */
    margin-left: 1rem;
}

.copy-titulo {
    font-size: 2.2rem;
    color: var(--claro);
    line-height: 1.3;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.palavra-dinamica {
    color: var(--main-color); /* Usa o seu verde de destaque */
    position: relative;
    display: inline-block;
}

/* Efeito do cursor piscando */
.palavra-dinamica::after {
    content: '|';
    position: absolute;
    right: -12px;
    color: var(--primaria);
    animation: piscar-cursor 0.8s infinite;
}

@keyframes piscar-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.copy-texto {
    font-size: 1.1rem;
    color: var(--claro);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.btn-copy {
    background: linear-gradient(45deg, var(--primaria), var(--secundaria));
    color: var(--claro);
    padding: 0.8rem 2rem;
    margin-left: 1rem;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-block;
}

.btn-copy:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(163, 53, 255, 0.4);
}

/* Regra importante para Responsividade: empilhar as telas no celular */
@media (max-width: 900px) {
    .telas-divididas {
        flex-direction: column; /* Coloca a copy em cima e o perfil embaixo */
    }
    .tela-esquerda, .tela-direita {
        width: 100%;
        min-height: 50vh; /* Cada uma ocupa metade da tela */
    }
    .copy-container {
        text-align: center; /* Centraliza no celular */
    }
}

/* ============================ */

.services h2 {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 2.5rem; /* Tamanho grande para destaque */
    margin-bottom: 1rem; /* Espaço inferior amplo */
    margin-top: 1.7rem; /* Espaço Superior */
}

.services h2 :hover {
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa ao passar o mouse */
    transition: 0.3s ease; /* Transição suave */
}

.services-container {
    display: flex; /* Exibe caixas de serviço em linha */
    gap: 2rem; /* Espaçamento entre caixas */
    overflow-x: auto; /* Habilita rolagem horizontal quando necessário */
    padding: 3rem 3rem 3rem 3rem; /* Espaçamento interno em todos os lados */
    scroll-behavior: smooth; /* Suaviza rolagem via CSS */
    /*cursor: grab;  Cursor de “agarrar” para interagir */
    margin-bottom: 2rem; /* Ajuda a afastar da próxima seção */
}

.services-container:active {
    cursor: grabbing; /* Cursor “agarrando” enquanto arrasta */
}

.services-box {
    flex: 0 0 calc(30% - 1rem); /* Largura relativa para caber três caixas com gap */
    min-width: 300px; /* Garante largura mínima */
    max-width: 250px; /* Limita largura máxima */
    background-color: var(--bg-color-02); /* Fundo escuro */
    border: 2px solid var(--primaria); /* Borda roxa */
    border-radius: 1.2rem; /* Cantos arredondados */
    padding: 0.5rem; /* Espaçamento interno */
    text-align: center; /* Centraliza conteúdo de texto */
    display: flex; /* Flex container para alinhar itens internos */
    flex-direction: column; /* Itens empilhados verticalmente */
    justify-content: start; /* Começa ao topo */
    transition: transform 0.5s ease; /* Animação suave ao hover */
    cursor: pointer; /* Indica clicável */
}

.services-box:hover {
    transform: scale(1.05); /* Aumenta levemente ao passar o mouse */
    box-shadow: 0 0 15px var(--primaria); /* Sombra roxa de destaque */
}

.services-box i {
    font-size: 5rem; /* Ícone grande */
    color: var(--primaria); /* Cor primária */
    margin-bottom: 1rem; /* Espaço abaixo do ícone */
    margin-top: 1rem;
}

.services-box h3 {
    font-size: 1.2rem; /* Tamanho de subtítulo */
    margin-bottom: 1.3rem; /* Espaço abaixo do título */
}

.services-box p {
    flex-grow: 1; /* Ocupa espaço restante */
    color: var(--claro); /* Cor clara de texto */
    letter-spacing: 0.03rem; /* Espaçamento entre letras */
    font-size: 0.9rem; /* Tamanho de fonte um pouco menor */
    cursor: pointer; /* Indica interatividade */
    padding-bottom: 1.75rem; /* Espaço para evitar sobreposição com o botão */
}

.services-box .btn {
    background-color: var(--primaria); /* Fundo primário */
    color: var(--bg-color-01); /* Texto escuro contrastante */
    padding: 0.6rem 1.2rem; /* Espaçamento interno do botão */
    border-radius: 0.8rem; /* Bordas arredondadas */
    transition: 0.3s; /* Transição suave */
    font-weight: 500; /* Peso médio */
    display: inline-block; /* Bottão em linha com dimensões */
    margin-bottom: 1rem; /* Espaço abaixo do botão */
}

.services-box .btn:hover {
    background-color: var(--claro); /* Fundo claro ao hover */
    color: var(--bg-color-02); /* Texto escuro no hover */
    box-shadow: 0 0 10px var(--primaria); /* Sombra roxa leve */
}

.seta-indicativa { /* seleciona o elemento com a classe “seta-indicativa” */
    text-align: center; /* centraliza horizontalmente o texto dentro do elemento */
    margin-top: 1rem; /* adiciona espaço de 1rem acima do elemento */
    font-size: 0.95rem; /* define o tamanho da fonte como 0.95 vezes o tamanho base */
    color: #fff; /* define a cor do texto como branco */
    animation: piscar 2s infinite alternate; /* aplica a animação “piscar” com duração de 2s, repetição infinita e alternância de direção a cada ciclo */
    opacity: 1; /* garante que o elemento esteja totalmente opaco (visível) */
    margin-bottom: 2rem; /* adiciona espaço de 2rem abaixo do elemento */
} /* fim do bloco .seta-indicativa */

@keyframes piscar { /* declara os quadros-chave da animação “piscar” */
    from { color: var(--main-color); } /* início da animação: texto com a cor definida pela variável --main-color */
    to { color: #fff; } /* fim da animação: texto com cor branca */
} /* fim do bloco @keyframes piscar */

/* Esconde a barra de rolagem horizontal apenas na seção de serviços */
.services-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer/Edge */
}

.services-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.p-rodapeservices {
    font-size: 1rem; /* define o tamanho da fonte como 1rem */
    font-weight: 700; /* aplica peso de fonte 700 (negrito) */
    margin: 0.5rem 0 1rem; /* margem: 0.5rem topo, 0 laterais, 1rem base */
    color: var(--claro); /* define a cor do texto usando a variável --claro */
    text-align: center; /* alinha o texto ao centro */
    margin-top: 5rem; /* define margem superior de 5rem */
    margin-bottom: 1.5rem; /* define margem inferior de 1.5rem */
}

/* Seção Diferenciais */

.diferenciais h2 {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 2.5rem; /* Tamanho grande para destaque */
    margin-top: 1.7rem; /* Espaço Superior */
}

.diferenciais .h4-diferenciais {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 0.9rem; /* Tamanho */
    margin-bottom: 6rem; /* Espaço inferior amplo */
}

.card-3d { /* seleciona o container do card tridimensional */
  width: 260px; /* define a largura fixa do card */
  height: 230px; /* define a altura fixa do card */
  margin: 1rem; /* adiciona espaçamento externo ao redor do card */
  perspective: 1000px; /* configura a profundidade da perspectiva 3D */
  transform-style: preserve-3d; /* mantém o filho em 3D para rotacionar corretamente */
  transition: box-shadow 0.3s ease; /* anima a sombra ao passar o mouse */
  position: relative; /* posiciona o card relativamente para filhos absolutos */
} /* fim do bloco .card-3d */

.card-inner { /* seleciona o elemento interno que será girado */
  width: 100%; /* ocupa 100% da largura do pai (.card-3d) */
  height: 100%; /* ocupa 100% da altura do pai (.card-3d) */
  transition: transform 0.8s ease; /* anima a rotação ao girar o card */
  transform-style: preserve-3d; /* mantém o conteúdo em 3D durante a rotação */
  position: relative; /* permite posicionamento interno de faces front/back */
} /* fim do bloco .card-inner */

.card-3d:hover .card-inner { /* no hover do card principal, aplica ao .card-inner */
  transform: rotateY(180deg); /* gira 180 graus no eixo Y para mostrar o verso */
} /* fim da regra de hover */

.card-front, .card-back { /* aplica estilo comum às faces frontal e traseira */
  position: absolute; /* posiciona cada face sobreposta dentro do .card-inner */
  width: 100%; /* faz cada face ocupar toda a área do card */
  height: 100%; /* faz cada face ocupar toda a área do card */
  backface-visibility: hidden; /* oculta o verso de cada face quando girado */
  border-radius: 1rem; /* arredonda os cantos das faces */
  padding: 1rem 0.8rem; /* adiciona espaçamento interno nas faces */
  display: flex; /* usa flexbox para alinhar conteúdo */
  flex-direction: column; /* empilha filhos verticalmente */
  justify-content: space-evenly; /* distribui espaços iguais entre filhos */
  align-items: center; /* centraliza filhos horizontalmente */
  text-align: center; /* centraliza o texto dentro de cada face */
  background: linear-gradient(145deg, var(--bg-color-01), var(--bg-color-02)); /* define degradê de fundo */
  box-shadow: 0 0 20px rgba(0, 255, 128, 0.15); /* adiciona sombra suave ao redor */
  border: 1px solid var(--primaria); /* contorno usando cor primária */
} /* fim do bloco .card-front, .card-back */

.card-front i { /* seleciona ícones dentro da face frontal */
  font-size: 2rem; /* tamanho grande para o ícone */
  color: var(--primaria); /* cor primária para destaque do ícone */
  margin-bottom: 0.7rem; /* espaço abaixo do ícone */
} /* fim do bloco .card-front i */

.card-front h3 { /* seleciona títulos <h3> na face frontal */
  font-size: 1.1rem; /* tamanho de fonte levemente maior */
  margin-bottom: 0.3rem; /* espaço abaixo do título */
  color: var(--claro); /* cor clara para o texto */
  word-break: break-word; /* quebra palavras longas para ajustar à largura */
  text-wrap: balance; /* ajusta a quebra de texto para balancear linhas */
  max-width: 90%; /* limita a largura máxima do título */
} /* fim do bloco .card-front h3 */

.card-front p,
.card-back p { /* aplica estilo a parágrafos em ambas as faces */
  font-size: 0.85rem; /* define tamanho de texto menor para descrição */
  color: var(--claro); /* cor clara para legibilidade */
  text-align: center; /* centraliza texto nos parágrafos */
  padding: 0 0.5rem; /* adiciona padding lateral aos parágrafos */
  line-height: 1.3; /* define altura de linha confortável */
} /* fim do bloco .card-front p, .card-back p */

.card-back { /* seleciona a face traseira do card */
  transform: rotateY(180deg); /* gira 180 graus para iniciar virada para trás */
} /* fim do bloco .card-back */

.diferenciais-container { /* seleciona o container de cards diferenciados */
  display: flex; /* habilita layout flexível para filhos */
  flex-wrap: wrap; /* permite quebra de linha quando não couberem */
  justify-content: center; /* centraliza os cards horizontalmente */
  gap: 2rem; /* espaço uniforme entre os cards */
  position: relative; /* posicionamento relativo para posicionamentos internos */
} /* fim do bloco .diferenciais-container */

/* == Link Ler Mais (é um botão) == */
.ler-mais {
    color: #aaa; /* Cor cinza para o link */
    font-weight: 600; /* Semi-negrito */
    text-decoration: none; /* Remove sublinhado */
    transition: 0.3s ease; /* Transição suave ao hover */
}

.ler-mais:hover {
    color: var(--primaria); /* Cor primária ao passar */
    text-shadow: 0 0 5px rgba(128, 0, 255, 0.5); /* Sombra roxa suave */
    cursor: pointer; /* Indica interatividade */
}

/* == Modal (balão do "ler mais") == */
.modal {
    display: none; /* Inicialmente escondido */
    position: fixed; /* Fixa em tela cheia */
    z-index: 999; /* Acima de quase tudo */
    left: 0; /* Alinha à esquerda da viewport */
    top: 0; /* Alinha ao topo da viewport */
    width: 100%; /* Largura total da viewport */
    height: 100%; /* Altura total da viewport */
    overflow: auto; /* Habilita scroll interno se necessário */
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro semitransparente */
    backdrop-filter: blur(4px); /* Efeito de desfoque atrás do modal */
}

.modal-content { /* Container interno do modal */
    background-color: var(--bg-color-02); /* Cor de fundo do conteúdo do modal */
    margin: 3rem auto; /* Margem superior de 10% e centralização horizontal automática */
    padding: 2rem; /* Espaçamento interno de 2rem em todos os lados */
    border: 2px solid var(--primaria); /* Borda de 2px na cor primária */
    border-radius: 1rem; /* Cantos arredondados de 1rem */
    width: 90%; /* Largura de 90% do elemento pai */
    max-width: 500px; /* Largura máxima de 500px */
    box-shadow: 0 0 15px var(--primaria); /* Sombra difusa roxa ao redor */
}

.close { /* Botão “X” de fechar modal */
    color: var(--primaria); /* Cor primária para o “X” */
    float: right; /* Posiciona o “X” à direita do container */
    font-size: 1.8rem; /* Tamanho de fonte de 1.8rem */
    font-weight: bold; /* Peso de fonte negrito */
    cursor: pointer; /* Cursor de mãozinha ao passar */
}

.close:hover { /* Estado hover do botão fechar */
    color: var(--secundaria); /* Muda a cor para secundária ao passar o mouse */
}

.ler-mais, /* Link “ler mais” dentro do modal */ 
.close { /* e o botão de fechar compartilham cursor interativo */
    cursor: pointer; /* Cursor de apontar para ambos */
}

/* === Texto dentro do Modal === */ 
.titulo-modal{ /*h3*/ /* Título principal dentro do modal (tag h3) */
    margin-top: 3rem; /* Espaço acima de 3rem */
    margin-bottom: 2rem; /* Espaço abaixo de 2rem */
    text-align: center; /* Centraliza o texto */
    font-size: 1.5rem; /* Tamanho de fonte de 1.5rem */
    font-weight: 700; /* Fonte extra-negrito */
}

h3:hover { /* Efeito hover para qualquer h3 */
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa suave no texto */
    transition: 0.3s ease; /* Transição suave de 0.3s */
}

.modal p { /* Parágrafos dentro do container .modal */
    color: var(--claro); /* Cor clara para o texto */
    font-size: 1rem; /* Tamanho de fonte de 1rem */
    line-height: 1.5; /* Altura de linha de 1.5 para melhor leitura */
    margin-bottom: 1rem; /* Espaço abaixo de 1rem */
    margin-top: 1rem; /* Espaço acima de 1rem */
}

.modal .p1, .p2, .p3 { /* Classes .p1, .p2, .p3 dentro de .modal */
    margin-bottom: 0.3rem; /* Espaço inferior de 0.3rem */
    margin-top: 1rem; /* Espaço superior de 1rem */
}

/* === /Texto dentro do Modal === */ /* Fim da seção de estilo de texto */

/* === Seção de Projetos === */ /* Início da seção de projetos */
.projetos { /* Container principal de projetos */
    padding: 0rem 2rem; /* Espaçamento vertical de 6rem e horizontal de 2rem */
    padding-bottom: 100px; /* Adiciona espaço de 100px no fim */
}

.projetos h2 {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 2.5rem; /* Tamanho grande para destaque */
    margin-bottom: 6rem; /* Espaço inferior amplo */
    margin-top: 1rem;
}

h2 :hover {
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa ao passar o mouse */
    transition: 0.3s ease; /* Transição suave */
}

/* Container usando Grid */ 
.Projetos-container { /* Grid que organiza os cards de projeto */
    display: grid; /* Usa layout em grade */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* Colunas adaptativas de no mínimo 260px, que é o valor original */
    gap: 1.5rem; /* Espaço de 1.5rem entre células */
    max-width: 1500px; /* Largura máxima de 1200px */
    margin: 0 auto; /* Centraliza horizontalmente */
}

/* Card dos projetos */
.Projetos-box { /* Caixa individual de cada projeto */
    position: relative; /* Permite posicionamento absoluto de filhos */
    border-radius: 1rem; /* Cantos arredondados de 1rem */
    overflow: hidden; /* Esconde conteúdo que extravase */
    box-shadow: 0 0 20px rgba(163, 53, 255, 0.6); /* Sombra neon roxa ao redor */
    background-color: rgba(255, 255, 255, 0.02); /* Fundo branco translúcido */
    backdrop-filter: blur(8px); /* Desfoque de fundo */
    transition: transform 0.3s ease; /* Transição suave ao aplicar transformações */
}

.Projetos-box:hover { /* Hover no card de projeto */
    transform: translateY(-5px); /* Leve elevação de 5px */
}

/* Imagem do projeto */
.Projetos-box img { /* Imagem dentro do card */
    width: 100%; /* Largura total do card */
    height: 100%; /* Altura total do card */
    object-fit: cover; /* Cobre todo o espaço mantendo proporção */
    border-radius: 1rem; /* Mesmos cantos arredondados do card */
    transition: transform 0.5s ease; /* Transição suave para zoom */
}

.Projetos-box img:hover { /* Hover sobre a imagem */
    transform: scale(1.1); /* Zoom de 10% */
}

/* Layer de informações */
.Projetos-box .Projetos-layer { /* Camada sobre a imagem com detalhes */
    position: absolute; /* Posiciona sobre a imagem */
    bottom: 0; /* Alinhado à base do card */
    left: 0; /* Alinhado à esquerda do card */
    width: 100%; /* Largura total do card */
    height: 100%; /* Altura total do card */
    background: linear-gradient(transparent, var(--primaria)); /* Gradiente de transparente a primária */
    display: flex; /* Flex container para centralizar conteúdo */
    flex-direction: column; /* Itens em coluna */
    justify-content: center; /* Centraliza verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    text-align: center; /* Centraliza texto */
    padding: 1rem; /* Espaçamento interno de 1rem */
    transform: translateY(100%); /* Move a camada para fora da vista */
    transition: 0.5s ease; /* Transição suave de entrada */
}

.Projetos-box:hover .Projetos-layer { /* Ao passar no card, revela a camada */
    transform: translateY(0); /* Retorna a camada à posição original */
}

.Projetos-layer h4 { /* Título dentro da camada */
    font-size: 1.8rem; /* Tamanho de fonte de 1.8rem */
    color: var(--claro); /* Cor clara para o texto */
}

.Projetos-layer p { /* Parágrafo informativo dentro da camada */
    margin: 0.5rem 0 1rem; /* Margens: 0.5rem topo, 1rem base */
    color: var(--claro); /* Cor clara */
}

.Projetos-layer a { /* Link de ação dentro da camada */
    display: inline-flex; /* Inline-flex para centralização */
    justify-content: center; /* Centraliza horizontal */
    align-items: center; /* Centraliza vertical */
    width: 2rem; /* Largura fixa */
    height: 2rem; /* Altura fixa */
    background: var(--text-color); /* Fundo baseado na cor de texto */
    border-radius: 50%; /* Formato circular */
    box-shadow: 0 0 10px rgba(163, 53, 255, 0.6); /* Sombra neon */
    transition: 0.3s; /* Transição suave */
    cursor: pointer; /* Indica que é clicável */
}

.Projetos-layer a:hover { /* Hover no link da camada */
    background-color: var(--primaria); /* Fundo primário ao passar */
}

.Projetos-layer a i { /* Ícone dentro do link */
    font-size: 0.9rem; /* Tamanho de fonte de 0.9rem */
    color: var(--bg-color-02); /* Cor de fundo escuro para o ícone */
}

h5 { /* Cabeçalho h5 genérico */
    color: var(--main-color); /* Cor principal (verde) */
    margin: 0.3rem 0 1rem; /* Margens: 0.3rem topo, 1rem base */
    margin-top: 1rem; 
}

/* == Sobre == */
.sobre .sobre-box { /* Container interno de sobre */
    min-height: 100vh; /* Altura mínima igual à altura da tela */
    padding-bottom: 3rem; /* Adiciona espaço de 100px no fim */
    display: flex; /* Layout flexível */
    gap: 2rem; /* Espaço de 2rem entre itens */
    align-items: center; /* Alinha itens verticalmente ao centro */
    justify-content: center; /* Centraliza itens horizontalmente */
    flex-wrap: wrap; /* Permite quebra de linha */
}

.sobre h2 {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 2.5rem; /* Tamanho grande para destaque */
    margin-bottom: 5rem; /* Espaço inferior amplo */
    /*margin-top: 1rem;  Espaço superior */
}

.sobre h2:hover {
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa ao passar o mouse */
    transition: 0.3s ease; /* Transição suave */
}

/* Define o container geral da seção de sobre */
.sobre { /* seleciona o container da seção sobre */
    padding: 1rem 2rem; /*6rem no topo e embaixo (espaçamento vertical) 2rem nas laterais (espaçamento horizontal)*/
} /* fecha a regra .orcamento */

.sobre-img img { /* Estilo da imagem em “sobre” */
    border-left: solid 5px var(--primaria); /* Borda esquerda grossa primária */
    border-bottom: solid 5px var(--primaria); /* Borda inferior primária */
    border-radius: 0.5rem; /* Cantos levemente arredondados */
    max-width: 300px; /* Largura máxima de 350px */
    width: 100%; /* Largura responsiva */
    object-fit: cover; /* Cobre o elemento mantendo proporção */
    box-shadow: 0 0 20px rgba(163, 53, 255, 0.6); /* Sombra neon roxa */
}

.sobre-content { /* Box de conteúdo em “sobre” */
    max-width: 600px; /* Largura máxima de 500px */
    color: var(--claro); /* Texto claro */
}

.btn-sobre { /* Botão de chamada em “sobre” */
    display: inline-block; /* Inline-block para espaçamento */
    background: linear-gradient(45deg, var(--primaria), var(--secundaria)); /* Gradiente diagonal */
    color: var(--claro); /* Texto claro */
    padding: 0.8rem 1.5rem; /* Espaçamento interno */
    border-radius: 8px; /* Cantos arredondados */
    margin-right: 1rem; /* Espaço à direita */
    margin-top: 0.5rem; /* Espaço acima */
    cursor: pointer; /* Cursor de apontar */
    transition: 0.3s ease; /* Transição suave */
}

.btn-sobre:hover { /* Hover no botão sobre */
    transform: translateY(-4px); /* Leve elevação */
    box-shadow: 0 5px 15px rgba(163, 53, 255, 0.4); /* Sombra roxa suave abaixo */
}

.sobre-content .btn { /* Botão genérico dentro de about-content */
    align-self: flex-end; /* Empurra para a extremidade direita do flex container */
    margin-left: auto; /* Garante alinhamento à direita */
    margin-right: 0; /* Sem margem direita */
    display: block; /* Exibe como bloco para largura completa */
}

.h1sobre { /* Classe customizada para h1 em seção sobre */
    font-size: 2.2rem; /* Tamanho de fonte de 2rem */
    color: var(--claro); /* Texto claro */
    font-weight: bold; /* Negrito */
    line-height: 1.5; /* Espaçamento confortável */
    text-align: center; /* Centraliza texto */
}

.h1sobre:hover { /* Efeito hover para qualquer h3 */
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa suave no texto */
    transition: 0.3s ease; /* Transição suave de 0.3s */
}

.h3sobre { /* Classe customizada para h3 em seção sobre */
    color: var(--claro); /* Texto claro */
    text-align: center; /* Centraliza texto */
    font-size: 1.7rem; /* Tamanho de fonte de 1.5rem */
    margin-bottom: 2rem; /* Espaço abaixo do parágrafo */
} 

.p-lema {
    color: var(--claro); /* Cor clara para parágrafo principal */
    font-size: 0.8rem; /* Tamanho de fonte de 1rem */
    line-height: 1.5; /* Altura de linha confortável */
    margin-bottom: 1.2rem; /* Espaço abaixo do parágrafo */
    margin-top: 1rem; /* Espaço superior */
    justify-content: center; /* Centraliza os itens flexíveis horizontalmente no centro do contêiner*/
}

.p-lema:hover { /* Efeito hover para qualquer h3 */
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa suave no texto */
    transition: 0.3s ease; /* Transição suave de 0.3s */
}

.p_principal {
    color: var(--claro); /* Cor clara para parágrafo principal */
    font-size: 1.2rem; /* Tamanho de fonte de 1rem */
    line-height: 1.5; /* Altura de linha confortável */
    margin-bottom: 1rem; /* Espaço abaixo do parágrafo */
    margin-top: 1.5rem; /* Espaço superior */
}

.span_sobre { /* Destaca spans na seção sobre */
    color: var(--main-color) /* Aplica cor principal verde */
}

.read-more { /* Botão link “read more” */
    background-color: var(--primaria); /* Fundo primário */
    color: var(--claro); /* Texto claro */
    padding: 0.6rem 1rem; /* Espaçamento interno */
    border-radius: 8rem; /* Bordas totalmente arredondadas */
    transition: 0.3s; /* Transição suave */
    font-weight: 700; /* Negrito */
    display: inline-block; /* Inline-block para tamanho de conteúdo */
    text-align: center; /* Centraliza texto dentro */
    margin-bottom: 3rem; /* Margem inferior grande */
    margin-top: 0.5rem; /* Margem superior de 1rem */
    cursor: pointer; /* Cursor de apontar */
    float: right; /*faz com que seja posicionado à direita do seu contêiner*/
}

.read-more:hover { /* Hover no botão read-more */
    background-color: var(--claro); /* Fundo claro */
    color: var(--bg-color-02); /* Texto escuro */
    box-shadow: 0 0 10px var(--primaria); /* Sombra roxa suave */
}

.btn-curriculo { /* Botão para baixar currículo */
    background-color: var(--primaria); /* Fundo primário */
    color: var(--claro); /* Texto claro */
    padding: 0.6rem 1rem; /* Espaçamento interno */
    border-radius: 8rem; /* Bordas bem arredondadas */
    transition: 0.3s; /* Transição suave */
    font-weight: 500; /* Peso médio */
    display: inline-block; /* Inline-block para encaixar no texto */
    text-align: center; /* Centraliza texto */
    cursor: pointer; /* Cursor de apontar */
    margin-top: 5rem; /* Espaço acima de 1.2rem */
}

.btn-curriculo:hover { /* Hover no botão currículo */
    background-color: var(--claro); /* Fundo claro */
    color: var(--bg-color-02); /* Texto escuro */
    box-shadow: 0 0 10px var(--primaria); /* Sombra roxa suave */
}

/* === Seção Orçamentária === */
.orcamento .orcamento-box { /* Container interno de orçamento */
     min-height: 100vh; /* Altura mínima igual à altura da tela */
     padding-bottom: 3rem; /* Adiciona espaço de 100px no fim */
     padding: 0rem 2rem; /*6rem no topo e embaixo (espaçamento vertical) 2rem nas laterais (espaçamento horizontal)*/
}

.orcamento h2 {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 2.5rem; /* Tamanho grande para destaque */
    margin-bottom: 1rem; /* Espaço inferior amplo */
}

.orcamento h2 :hover {
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa ao passar o mouse */
    transition: 0.3s ease; /* Transição suave */
}

.orcamento label {
    color: var(--claro); /* Cor clara para rótulos */
    font-size: 1rem; /* Tamanho de fonte de 1rem */
    margin-bottom: 0.5rem; /* Espaço abaixo do rótulo */
    display: block; /* Exibe como bloco para ocupar linha inteira */
    font-weight: 400; /* Peso de fonte normal */
}

.orcamento h4 {
    color: var(--main-color); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 1rem; /* Tamanho grande para destaque */
    margin-bottom: 0.1rem; /* Espaço inferior amplo */
    margin-top: 0.5rem; /* Espaço superior */
}

.orcamento .p-acimalegenda {
    color: var(--claro); /* Cor clara para subtítulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 0.8rem; /* Tamanho grande para destaque */
    margin-bottom: 6rem; /* Espaço inferior amplo */
    margin-top: 0.2rem; /* Espaço superior */
}

.orcamento .aviso-simuladortopo {
    color: var(--claro); /* Cor clara para aviso */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 0.8rem; /* Tamanho grande para destaque */
    margin-bottom: 2.5rem; /* Espaço inferior amplo */
    margin-top: 0.2rem; /* Espaço superior */
}

.orcamento .aviso-simuladorbaixo {
    color: var(--claro); /* Cor clara para aviso */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 0.8rem; /* Tamanho grande para destaque */
    margin-bottom: 0.2rem; /* Espaço inferior amplo */
    margin-top: 2.5rem; /* Espaço superior */
}

.simulador-box select, /* Estilos para selects dentro de simulador-box */
.simulador-box input { /* e inputs dentro de simulador-box */
    background-color: var(--bgcolor01) ; /* Fundo escuro semitransparente */
    width: 100%; /* Largura completa do container */
    padding: 0.7rem; /* Espaçamento interno de 0.7rem */
    margin-top: 0.5rem; /* Espaço acima de 0.5rem */
    margin-bottom: 0.5rem;
    font-size: 1rem; 
    border: 1px solid var(--vidro); /* Borda translúcida */
    border-radius: 8px; /* Cantos arredondados */
    color: var(--claro); /* Texto claro */
    backdrop-filter: blur(4px); /* Desfoque de fundo */
    appearance: none; /* Remove estilos nativos de selects */
}

select { position: relative; }

.simulador-box select option { /* Itens de opção do select */
    background-color: var(--bg-color-02); /* Fundo sólido escuro */
    color: var(--claro); /* Texto claro */
}

.simulador-box input::placeholder { /* Placeholder dos inputs */
    color: var(--claro); /* Cor clara para placeholder */
    opacity: 0.6; /* Opacidade reduzida */
}

.simulador-box select { /* Customização do ícone de dropdown */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ccc" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>'); /* Ícone SVG inline */
    background-repeat: no-repeat; /* Não repete a imagem */
    background-position: right 0.7rem center; /* Posiciona à direita e central vertical */
    background-size: 1.5rem; /* Tamanho do ícone */
}

.btn-orcamento { /* Botão de calcular orçamento */
    background-color: var(--primaria); /* Fundo primário */
    color: var(--bg-color-01); /* Texto escuro contrastante */
    padding: 0.7rem 1.3rem; /* Espaçamento interno */
    border-radius: 0.8rem; /* Cantos arredondados */
    transition: 0.3s; /* Transição suave */
    font-weight: 600; /* Peso médio */
    display: inline-block; /* Inline-block para encaixe no layout */
    text-align: center; /* Centraliza texto */
    margin-bottom: 1rem; /* Espaço abaixo grande */
    margin-top: 1rem; /* Espaço acima de 1rem */
    cursor: pointer; /* Cursor de apontar */
}

.btn-orcamento:hover { /* Hover no botão orcamento */
    background-color: var(--claro); /* Fundo claro */
    color: var(--bg-color-02); /* Texto escuro */
    box-shadow: 0 0 10px var(--primaria); /* Sombra roxa suave */
}

#campos-projeto input:required { /* Inputs obrigatórios em #campos-projeto */
  border: 1px solid var(--secundaria); /* Borda na cor secundária */
  box-shadow: 0 0 5px var(--primaria); /* Sombra roxa suave ao redor */
}

.simulador-box { /* Container principal do simulador */
    background-color: rgba(255, 255, 255, 0.05); /* Fundo branco semitransparente */
    backdrop-filter: blur(8px); /* Desfoque de fundo */
    padding: 2rem; /* Espaçamento interno de 2rem */
    border-radius: 1.5rem; /* Cantos arredondados */
    border: 1px solid var(--vidro); /* Borda translúcida */
    box-shadow: 0 0 20px rgba(163, 53, 255, 0.6); /* Sombra neon roxa */
    max-width: 500px; /* Largura máxima de 600px */
    margin: 2rem auto; /* Margem vertical de 2rem e centralização horizontal */
}

.simulador-box .simuladortitulo { /* Título h3 dentro do simulador */
    margin-bottom: 1.5rem; /* Espaço abaixo de 1rem */
    color: var(--primaria); /* Cor primária para o título */
    margin-top: 1rem; /* Espaço acima de 0.5rem */
    display: flex;
    align-items: center;
    gap: 100px; /* espaço entre título e botão */
}

.btn-moeda {
  margin-left: 10px;
  padding: 4px 10px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: none;
  background: #a335ff;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

.btn-moeda:hover {
  background: #7e28c9;
}

.simulador-box label { /* Labels dentro do simulador */
    display: block; /* Exibe como bloco */
    margin-top: 1rem; /* Espaço acima de 1rem */
    color: var(--claro); /* Texto claro */ 
}

.btn-simulador { /* Botão de ação do simulador */
    margin-top: 2rem; /* Espaço acima de 1.5rem */
    padding: 0.7rem 1.5rem; /* Espaçamento interno */
    background: linear-gradient(45deg, var(--primaria), var(--secundaria)); /* Gradiente inclinado */
    color: black; /* Texto preto */
    border-radius: 8px; /* Cantos arredondados */
    cursor: pointer; /* Cursor de apontar */
    border: none; /* Sem borda */
    transition: all 0.4s ease; /* Transição suave para todas as propriedades */
    font-weight: 550; /* Espessura/peso da fonte */
    font-size: 0.9rem;  /* Tamanho da fonte */
    display: none; /* Deixará invísivel no layout */
}

.btn-simulador:hover { /* hover do botão com classe btn-simulador */
    transform: translateY(-3px); /* move o botão 3px para cima no eixo Y */
    box-shadow: 0 5px 15px rgba(163, 53, 255, 0.5); /* cria sombra roxa translúcida abaixo do botão */
} /* fecha a regra .btn-simulador:hover */

#resultado-simulador { /* seleciona o elemento com id resultado-simulador */
    margin-top: 1rem; /* adiciona espaçamento de 1rem acima do elemento */
    color: var(--main-color); /* define a cor do texto usando a variável --main-color */
    font-weight: bold; /* torna o texto em negrito */
} /* fecha a regra #resultado-simulador */

.orcamento p { /* seleciona todos os <p> dentro de um elemento com classe orcamento */
    font-size: 1rem; /* define o tamanho da fonte como 1rem */
    font-weight: 700; /* aplica peso de fonte 700 (negrito) */
    margin: 0.5rem 0 1rem; /* margem: 0.5rem topo, 0 laterais, 1rem base */
    color: var(--claro); /* define a cor do texto usando a variável --claro */
    text-align: center; /* alinha o texto ao centro */
    margin-top: 5rem; /* define margem superior de 5rem */
    margin-bottom: 1.5rem; /* define margem inferior de 1.5rem */
} /* fecha a regra .orcamento p */

/*Adição para que os campos do simulador fiquem lado a lado*/
.linha-dupla {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.campo-metade {
  flex: 1 1 48%;
  margin-bottom: 2rem; 
}

.caixa-prazo {
  background-color: var(--bgcolor01);
  border: 2px solid var(--primaria);
  border-radius: 10px;
  padding: 0.7rem;
  text-align: center;
  font-weight: bold;
  color: var(--claro);
  margin-top: 0.5rem;
  box-shadow: 0 0 8px var(--primaria);
}

/* Prazo-estimado */
.prazo-box {
    background-color: var(--bgcolor01);
    border: 2px solid var(--primaria);
    color: var(--primaria);
    border-radius: 10px;
    padding: 0.6rem;
    margin-top: 0.5rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 0 10px var(--primaria);
    backdrop-filter: blur(4px);
}

/* Corrigir o espaço abaixo do select */
#complemento-instrucao {
  margin-top: 2rem; 
  font-size: 0.90rem;
  color: var(--claro); /* mesma cor dos demais textos do portfólio */
}

/* Esconde todos os selects "Tipo de Serviço" */
#Desenvolvimento-Web,
#Front-End,
#Back-End,
#Desenvolvimento-Full-Stack,
#Python-Automacao,
#Design-UIUX,
#Design-UI,
#Design-UX {
    display: none;
}
/* ============================= */

/* == Seção Contato == */

/* Define o container geral da seção de contato */
.contato {
    min-height: 100vh; /* Altura mínima igual à altura da tela */
    padding: 0rem 2rem; /*6rem no topo e embaixo (espaçamento vertical) 2rem nas laterais (espaçamento horizontal)*/
} /* fecha a regra .contato */

.contato h2 {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 2.5rem; /* Tamanho grande para destaque */
    margin-bottom: 1rem; /* Espaço inferior */
    margin-top: 1.2rem; /* Espaço superior */
}

.contato h2 :hover {
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa ao passar o mouse */
    transition: 0.3s ease; /* Transição suave */
}

/* Caixa que envolve todo o formulário */
.contato-box { /* seleciona o container que envolve o formulário */
    max-width: 500px;/* Limita a largura máxima para 600px (não cresce mais que isso) */
    margin: 0 auto; /* Centraliza horizontalmente no meio da página */
    background-color: rgba(255, 255, 255, 0.05); /* Fundo semitransparente, tipo vidro fosco */
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo, reforça o efeito vidro */
    padding: 1.5rem;/* Espaçamento interno em todos os lados */
    border: 1px solid var(--vidro); /* Borda levemente translúcida, utilizando uma variável */
    border-radius: 16px; /* Cantos bem arredondados, deixa mais moderno */
    box-shadow: 0 0 25px rgba(128, 0, 255, 0.5); /* adiciona sombra difusa ao redor do container */
} /* fecha a regra .contato-box */

/* Agrupamento dos inputs na mesma linha */
.input-box { /* seleciona o container flex que agrupa os campos de entrada */
    display: flex; /* Coloca os inputs lado a lado */
    gap: 1.5rem; /* Espaçamento de 1rem entre os inputs */
    margin-bottom: 1.5rem; /* Espaço abaixo do grupo de inputs */
} /* fecha a regra .input-box */

/* Estilo geral dos campos de input e textarea */
.campo-form { /* seleciona todos os campos de formulário (input e textarea) */
    width: 100%; /* Faz o input ocupar todo o espaço disponível dentro do grupo */
    padding: 1rem; /* Espaçamento interno (para o texto dentro do campo) */
    background-color: rgba(255, 255, 255, 0.1); /* Fundo translúcido, efeito vidro */
    border-radius: 8px; /* Cantos levemente arredondados */
    color: var(--claro); /* Cor do texto (geralmente branca ou clara) */
    border: 1px solid var(--vidro); /* Borda fina, também translúcida */
    outline: none;  /* remove o contorno de foco padrão */
    /* Remove o contorno azul padrão quando o input é selecionado */
    resize: none; /* Impede que o usuário redimensione manualmente o campo (no textarea) */
} /* fecha a regra .campo-form */

/* Especificamente para o campo de textarea (mensagem) */
textarea.campo-form { /* seleciona apenas o elemento <textarea> com classe campo-form */
    overflow-y: auto; /* Se o conteúdo passar do limite vertical, ativa a barra de rolagem */
    overflow-x: hidden; /* Impede barra de rolagem horizontal (não quebra o layout) */
    height: 120px; /* Altura fixa */
    resize: none; /* impede redimensionar textarea */
} /* fecha a regra textarea.campo-form */

/* Efeito quando um campo está focado (clicado) */
.campo-form:focus { /* seleciona o campo quando está em foco */
    border-color: var(--secundaria); /* Muda a cor da borda quando selecionado */
    box-shadow: 0 0 10px rgba(79, 70, 237, 0.5); /* Cria um brilho suave ao redor do campo (tom azulado) */
} /* fecha a regra .campo-form:focus */

/* Botão de envio do formulário */
.btn-form { /* seleciona o botão de envio dentro do formulário */
    color: var(--claro); /* Cor do texto do botão (geralmente branco) */
    background: linear-gradient(45deg, var(--primaria), var(--secundaria)); /* Fundo com degradê entre a cor primária e a secundária */
    padding: 1rem 2rem; /* Espaçamento interno: 1rem em cima/baixo e 2rem nas laterais */
    border: none; /* Remove a borda padrão */
    border-radius: 25px; /* Cantos arredondados */
    cursor: pointer; /* Cursor muda para mãozinha ao passar sobre o botão */
    font-weight: bold; /* Texto do botão em negrito */
    width: 100%; /* Faz o botão ocupar toda a largura do formulário */
    transition: all 0.5s ease; /* Transição suave para os efeitos de hover */
    margin-top: 0.5rem; /* margem superior 1.2rem */
    margin-bottom: 1.5rem; /* margem inferior 1.3rem */
} /* fecha a regra .btn-form */ 

/* Efeito ao passar o mouse no botão */
.btn-form:hover { /* seleciona o botão .btn-form no estado hover */
    transform: translateY(-4px); /* Move o botão levemente para cima (efeito flutuar) */
    box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4); /* Sombra mais forte, criando profundidade */
} /* fecha a regra .btn-form:hover */

.btn,
.btn-form,
.btn-orcamento { /* seleciona botões com as classes btn, btn-form e btn-orcamento */
    cursor: pointer; /* cursor em forma de ponteiro */
} /* fecha a regra geral de cursores */

/*p abaixo das checbox*/
.contato .p-contato {
    color: var(--claro); /* Cor clara para o texto */
    font-size: 0.8rem; /* Tamanho de fonte de 0.9rem */
    margin-top: 1.2rem; /* Espaço acima de 0.5rem */
    text-align: center; /* Centraliza o texto */
}

/*p abaixo do título da seção*/
.contato .p-contatotopo {
    color: var(--claro); /* Cor clara para o texto */
    font-size: 0.9rem; /* Tamanho de fonte de 0.9rem */
    margin-top: 1rem; /* Espaço acima de 0.5rem */
    text-align: center; /* Centraliza o texto */
    margin-bottom: 5rem; /* Espaço inferior */
    font-weight: 700; /* Peso médio para o texto */
}

/*Modais dos Termos e LGPD*/
.contato .modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 15, 15, 0.88);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
}

.contato .modal-content {
  background-color: #111;
  color: #fff;
  padding: 2rem;
  border-radius: 10px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.08);
}

.contato .modal-content h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--roxo);
}

.contato .modal-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.contato .modal .close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  color: #ff4c4c;
  font-size: 1.8rem;
  cursor: pointer;
}

/*Estilização do recaptcha*/
.contato .recaptcha-wrapper {
  display: flex;
  justify-content: center;
  transform: scale(0.75); /* Reduz um pouco, se quiser */
  transform-origin: top center;
  margin-top: 1rem; /* Espaço acima do recaptcha */
}

/* Estilização dos links das mídias sociais */
.social-mediafooter a {
    display: inline-flex; /* Flex container inline para centralizar ícones */
    justify-content: center; /* Centraliza horizontal */
    align-items: center; /* Centraliza vertical */
    width: 1.8rem; /* Largura fixa */
    height: 1.8rem; /* Altura fixa */
    border: solid 0.15rem var(--primaria); /* Borda circular colorida */
    border-radius: 50%; /* Torna circular */
    font-size: 1.3rem; /* Tamanho do ícone */
    color: var(--primaria); /* Cor da borda e do ícone */
    margin: 0.3rem 1rem 0.8rem 0; /* Margens ao redor */
    transition: 0.5s ease; /* Transição suave ao hover */
    margin-top: 5rem; /* Espaço superior */
}

.social-mediafooter a:hover {
    background: var(--primaria); /* Fundo primário ao passar */
    color: var(--bg-color-02); /* Cor de ícone contrastante */
    box-shadow: 0 0 0.3rem var(--primaria); /* Sombra leve */
}

footer p { /* seleciona todos os <p> dentro de <footer> */
    font-size: 1rem; /* tamanho da fonte 1.1rem */
    font-weight: 400; /* peso da fonte normal */
    margin: 0.5rem 0 1rem; /* margem: 0.5rem topo, 0 laterais, 1rem base */
    color: var(--claro); /* cor do texto clara */
    text-align: center; /* alinha texto ao centro */
    margin-top: 0.5rem; /* margem superior 1rem */
    margin-bottom: 1.2rem; /* margem inferior 1.2rem */
} /* fecha a regra footer p */

/*Avaliação section*/
.avaliacoes .avaliacoes-container {
    min-height: 100vh; /* Ocupa toda a altura da tela */
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-direction: column; /* Itens em coluna */
    padding: 1rem 2rem; /*6rem no topo e embaixo (espaçamento vertical) 2rem nas laterais (espaçamento horizontal)*/
    padding-bottom: 100px;  /*Adiciona espaço de 100px no fim */
}

.avaliacoes h2 {
    color: var(--claro); /* Cor clara para títulos */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 2.5rem; /* Tamanho grande para destaque */
    /*margin-bottom: 1rem;  Espaço inferior amplo */
    /*margin-top: 1rem;  Espaço Superior */
}

.avaliacoes h2 :hover {
    text-shadow: 0 0 8px rgba(163, 53, 255, 0.7); /* Sombra roxa ao passar o mouse */
    transition: 0.3s ease; /* Transição suave */
}

.estrela {
  font-size: 1.8rem;
  color: gold;
  display: block;
  justify-content: center; 
}

.media-nota {
  font-weight: 600;
  font-size: 1rem;
  color: var(--main-color);
  text-align: center;
  margin-bottom: 3rem; 
}

.cards-avaliacoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card-avaliacao {
  background: var(--bg-color-02);
  border: 1px solid var(--primaria);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 0 12px rgba(163, 53, 255, 0.3);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease;
}

.card-avaliacao:hover {
  transform: translateY(-5px);
}

.perfil {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.perfil img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--primaria);
}

.nota {
  color: gold;
  font-size: 1.3rem;
}

.comentario {
  font-style: italic;
  font-size: 0.95rem;
}

/*Estilização do Game*/


/*☢️ÁREA 51 DA RESPONSIVIDADE☢️*/
@media (min-width: 320px) and (max-width: 568px) {
  .navbar {
    display: none !important;
  }

  .moon-btn {
    /*display: flex !important;*/
    display: none !important;
  }

  .logo {
    font-size: 1.5rem; /* Tamanho da fonte da logo */
  }

  .particulas {
    display: none !important; 
  }

  .moon-btn {
    position: fixed; /* Fixa no canto */
    top: 1rem; /* Distância do topo */
    right: 1rem; /* Distância da direita */
    background-color: transparent; /* Fundo transparente */
    border-radius: 50%; /* Círculo perfeito */
    width: 50px; /* Largura fixa */
    height: 50px; /* Altura fixa */
  }

  .moon-menu {
    background: black;
  }

  .home .home-box {
    min-height: 100vh; /* Ocupa toda a altura da tela */
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    flex-direction: column; /* Itens em coluna */
    padding: 0rem 2rem; /*6rem no topo e embaixo (espaçamento vertical) 2rem nas laterais (espaçamento horizontal)*/
    padding-bottom: 90px;  /*Adiciona espaço de 100px no fim */
    }

    .foto-perfil {
    width: 170px; /* Largura fixa da imagem */
    height: 140px; /* Altura fixa da imagem */
    }

    .home h1 {
    font-size: 2rem; /* Tamanho do título */
    color: var(--primaria); /* Cor primária */
    margin-bottom: 0.3rem; /* Espaço abaixo do título */
    margin-top: 1.5rem; 
    justify-content: center;
    }

.home .baixo {
    font-size: 1.2rem; /* Tamanho do subtítulo */
    text-align: center; /* Centraliza texto */
    justify-content: center;
    }

    .social-media a {
    display: inline-flex; /* Flex container inline para centralizar ícones */
    justify-content: center; /* Centraliza horizontal */
    align-items: center; /* Centraliza vertical */
    }

    .services h2 {
        font-size: 2.1rem; /* Tamanho do título */
        margin-top: 1rem;
    }

    .seta-indicativa {
        font-size: 0.90rem;
        margin-bottom: 0rem;
    }

    .diferenciais h2 {
        font-size: 2rem; 
        margin-bottom: 1.5rem;
        margin-top: 1rem; 
    }

    .diferenciais .h4-diferenciais {
        margin-bottom: 3rem;
    }

    .diferenciais .p-rodapeservices {
        margin-top: 3rem;
    }

    .projetos h2 {
        font-size: 2.2rem;
        margin-bottom: 6rem;
        margin-top: 1rem;
    }
     
}  
@media (max-width: 1024px) {
  .services-container {
    justify-content: start;
  }

  .services-box {
    flex: 0 0 calc(45% - 1rem);
  }

  .navbar {
    padding: 1rem 5%;
  }

  .home h1 {
    font-size: 1.7rem;
  }

  .home .baixo {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .services-box {
    flex: 0 0 90%;
    max-width: 100%;
  }

  .menu {
    gap: 0.7rem;
    flex-wrap: wrap;
  }

  .logo {
    font-size: 1.2rem;
  }

  .home .foto-perfil {
    width: 160px;
    height: 160px;
  }

  .home h1 {
    font-size: 1.5rem;
  }

  .home .baixo {
    font-size: 1rem;
  }

  .read-more {
    float: none;
    display: block;
    margin: 1rem auto;
  }

  .sobre .sobre-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sobre-content {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .navbar {
    display: none !important;
  }

  .moon-btn {
    display: none !important;
  }

  .services-container {
    padding: 1rem;
  }

  .services-box {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .Projetos-container {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .home h1 {
    font-size: 1.3rem;
  }

  .home .baixo {
    font-size: 0.95rem;
  }

  .btn-curriculo {
    margin-top: 2rem;
  }

  .simulador-box {
    padding: 1rem;
  }

  .modal-content {
    padding: 1rem;
    max-width: 95%;
  }

  .menu-link {
    font-size: 0.9rem;
  }
}