@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@font-face {
    font-family: 'Geometr415 Blk BT';
    src: url('fonts/Geometr415 Blk BT Black.ttf') format('truetype'); /* Ajuste o caminho para o seu arquivo de fonte */
    font-weight: normal;
    font-style: normal;
}

/* Definições de Cores e Fontes */
:root {
    --cor-principal: #F06032;
    --cor-secundaria: #6B32F7;
    --cor-fundo-claro: #FFFFFF;
    --cor-fundo-cinza: #D2E0E9;
    --cor-texto: #333;
    --cor-texto2: #6B32F7;
    --font-principal: 'Arial', sans-serif;
}



/* Reset Básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-principal);
    background-color: var(--cor-fundo-claro);
    color: var(--cor-texto);
}
/* Adicionado para conter o overflow dos cards sem cortá-los */
main {
    overflow-x: hidden;
    position: relative; /* Garante um contexto de empilhamento adequado */
}

/* Cabeçalho Fixo */
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar {
    display: flex;
     justify-content: space-between; /* ESSENCIAL para separar o logo do menu */
    align-items: center;
    padding: 1rem 2rem;
}

.logo img {
    height: 50px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin-left: auto; /* Empurra os links para a direita */
}

.nav-links a {
    text-decoration: none;
    color: var(--cor-texto);
    font-weight: bold;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--cor-principal);
}

/* SEÇÃO HERO ATUALIZADA */
.hero {
    position: relative;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
/* overflow: hidden; */
    margin-top: 30px;
    background-color: #a8abff;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 5%;

    padding: 2rem;
    z-index: 10;
    color: var(--cor-texto);
    text-shadow: none;
    text-align: left;
    width: 70%;
}

/* ANIMAÇÃO DOS OBJETOS 3D FLUTUANTES */
.floating-objects-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    
}

.floating-wrapper {
    position: absolute;
    will-change: transform;
    /* Todos usam a mesma animação de movimento */
    animation: floatAcross linear infinite;

        /* ADICIONE ESTA LINHA PARA ESCONDER O AVISO DE INTERAÇÃO/CARREGAMENTO */
    --interaction-prompt: none;
}

.rotating-model {
    width: 100%;
    height: 100%;
    background: transparent;
    --model-viewer-background-color: transparent;
    
    /* Todos usam a mesma animação de rotação */
    animation: spin linear infinite;

        /* ADICIONE ESTA LINHA PARA ESCONDER O AVISO DE INTERAÇÃO/CARREGAMENTO */
    --interaction-prompt: none;
        /* ADICIONE ESTA LINHA PARA MUDAR A COR DA SOMBRA */
    --shadow-color: #a8abff;
    
}


/* Variações de movimento, posição e tamanho */
/* Pets  - Camada 1  */
.floating-wrapper:nth-child(1) { top: 5%;  width: 320px; height: 426px; animation-duration: 30s;  animation-delay: 0s; }
/* Parques  - Camada 1  */
.floating-wrapper:nth-child(2) { top: 55%; width: 300px; height: 360px; animation-duration: 42s;  animation-delay: -5s; }
/* Mundos Red -  - Camada 3  */
.floating-wrapper:nth-child(4) { top: 60%; width: 200px; height: 270px; animation-duration: 48s;  animation-delay: -20s; }
/* Diversão Verde - Camada 3 */
.floating-wrapper:nth-child(5) { top: 30%; width: 190px; height: 254px; animation-duration: 33.6s; animation-delay: -25s; }
/* Amigos Azul - Camada 2 */ 
.floating-wrapper:nth-child(6) { top: 25%; width: 286px; height: 316px; animation-duration: 33.6s; animation-delay: -25s; }
/* Bola - Camada 2 */
.floating-wrapper:nth-child(7) { top: 20%; width: 130px; height: 130px; animation-duration: 38.6s; animation-delay: -25s; }
/* Bola - Camada 3 */
.floating-wrapper:nth-child(8) { top: 40%; width: 180px; height: 180px; animation-duration: 42.6s; animation-delay: -25s; }
/* Controle - Camada 1 */
.floating-wrapper:nth-child(9) { top: 20%; width: 210px; height: 210px; animation-duration: 37.6s; animation-delay: -25s; }
/* Controle - Camada 3 */
.floating-wrapper:nth-child(10) { top: 65%; width: 160px; height: 160px; animation-duration: 48.6s; animation-delay: -25s; }


/* ROTAÇÕES DIFERENTES: Horário (normal) e Anti-horário (reverse) */
.floating-wrapper:nth-child(1) .rotating-model { animation-duration: 22s; animation-direction: normal; }
.floating-wrapper:nth-child(2) .rotating-model { animation-duration: 18s; animation-direction: reverse; }
/* .floating-wrapper:nth-child(3) .rotating-model { animation-duration: 25s; animation-direction: normal; } */
.floating-wrapper:nth-child(4) .rotating-model { animation-duration: 16s; animation-direction: reverse; }
.floating-wrapper:nth-child(5) .rotating-model { animation-duration: 28s; animation-direction: normal; }
.floating-wrapper:nth-child(6) .rotating-model { animation-duration: 28s; animation-direction: normal; }
.floating-wrapper:nth-child(7) .rotating-model { animation-duration: 30s; animation-direction: reverse; }
.floating-wrapper:nth-child(8) .rotating-model { animation-duration: 22s; animation-direction: normal; }
.floating-wrapper:nth-child(9) .rotating-model { animation-duration: 24s; animation-direction: reverse; }
.floating-wrapper:nth-child(10) .rotating-model { animation-duration: 29s; animation-direction: normal; }

/* Keyframes de Animação */
/* Movimento único da Direita para a Esquerda */


@keyframes floatAcross {
    from { transform: translateX(110vw); }
    to { transform: translateX(-510px); }
}

/* Rotação única "em pé" (em torno do eixo Y) */
@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

/* Rotação única "em pé" (em torno do eixo Y) */
@keyframes spin {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}

/* ########## INÍCIO: NOVAS REGRAS DE PROFUNDIDADE E PERSPECTIVA ########## */

/* Resetando o tamanho e z-index de todos os cards para começar */
.floating-wrapper {
  transform: scale(1);
  z-index: 5;
}

/* --- CAMADA 1: FUNDO (Menores, Lentos e Desfocados) --- */
.floating-wrapper:nth-child(5),
.floating-wrapper:nth-child(7),
.floating-wrapper:nth-child(10),
.floating-wrapper:nth-child(4) {
  /* Tamanho Reduzido: Parece distante */
  transform: scale(0.6);
  
  /* Desfoque: Aumenta a sensação de distância */
  filter: blur(2px);
  
  /* Empilhamento: Fica atrás de todos */
  z-index: 3;
  
  /* Velocidade: Objetos distantes parecem se mover mais devagar */
  animation-duration: 65s; /* Mais lento que os outros */
}

/* --- CAMADA 2: MEIO (Tamanho Padrão) --- */
.floating-wrapper:nth-child(6),
/* .floating-wrapper:nth-child(3), */
.floating-wrapper:nth-child(8) {
  /* Tamanho Normal: Nosso plano principal */
  transform: scale(1.0);
  
  /* Empilhamento: Fica na camada do meio */
  z-index: 5;
  
  /* Velocidade padrão */
  animation-duration: 40s;
}

/* --- CAMADA 3: FRENTE (Maiores e Rápidos) --- */
.floating-wrapper:nth-child(2),
.floating-wrapper:nth-child(9),
.floating-wrapper:nth-child(1) {
  /* Tamanho Aumentado: Parece mais próximo */
  transform: scale(1.3);
  
  /* Empilhamento: Fica na frente de todos */
  z-index: 7;
  
  /* Velocidade: Objetos próximos parecem se mover mais rápido */
  animation-duration: 30s; /* Mais rápido */
}


/* ########## FIM: NOVAS REGRAS DE PROFUNDIDADE E PERSPECTIVA ########## */

.hero-content h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    font-family: 'Geometr415 Blk BT', sans-serif; /* Adicionada a nova fonte */
}

.hero-content p {
    font-size: 1.5rem;
    max-width: 800px;
    margin: 0;
    font-family: 'Geometr415 Blk BT', sans-serif; /* Adicionada a nova fonte */
}

.cta-button {
    background-color: var(--cor-principal);
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
}

.cta-button:hover {
    background-color: var(--cor-secundaria);
}


/* NOVA SEÇÃO DE VÍDEO */
#video-section {
    padding: 4rem 0;
    text-align: center;
}

#video-section h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--cor-secundaria);
}

#banner-videos {
    width: 100%;
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

.content-section {
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--cor-fundo-claro);
}

.content-section-gray {
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--cor-fundo-cinza);
}

/* ########## INÍCIO: ESTILOS DO CARROSSEL DE PROJETOS ATUALIZADO ########## */

.scroller-container {
    max-width: 100%;
    overflow: hidden;
    /* Efeito de degradê REDUZIDO nas laterais */
    -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
    margin-bottom: 1.5rem; /* Espaço entre as duas linhas do carrossel */
}

.scroller {
    display: flex;
    gap: 1.5rem;
    width: fit-content;
    animation: scrollLeft 60s linear infinite;
}

/* NOVA CLASSE para a segunda linha que se move para a direita */
.scroller--reverse {
    animation-name: scrollRight;
    animation-duration: 75s; /* Duração um pouco diferente para criar mais dinamismo */
}

.scroller-container:hover .scroller {
    animation-play-state: paused;
}

.project-card {
    /* TAMANHO AUMENTADO para os banners */
    width: 400px;
    height: 225px; /* Proporção 16:9 mantida */
    flex-shrink: 0;
    background-color: #222;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Animação que move para a esquerda */
@keyframes scrollLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* NOVA ANIMAÇÃO que move para a direita */
@keyframes scrollRight {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

/* ########## FIM: ESTILOS DO CARROSSEL DE PROJETOS ########## */

/* ########## INÍCIO: SEÇÃO DO CONTROLE COM BACKGROUND FIXO ########## */
.control-background-section {
    background-image: url('images/geral/controle-background.png'); /* Verifique se o caminho está correto */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-attachment: fixed;
    height: 300px;
    width: 100%;
}

/* ########## INÍCIO: ESTILOS DA SEÇÃO SOBRE NÓS ########## */

/* Removemos o padding lateral da seção para a imagem poder ocupar a tela inteira */
#about {
    padding-left: 0;
    padding-right: 0;
}

.placeholder-content {
    position: relative; /* Necessário para posicionar o texto sobre a imagem */
    width: 100%;
    max-height: 400px;  /* Altura máxima de 400px como solicitado */
    overflow: hidden;   /* Garante que a imagem não ultrapasse o quadro */
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-content img {
       position: static;
       width: 2000px; /* Ajuste a largura conforme necessário */
       height: 500px; /* Força a altura para ser igual à largura, criando um quadrado */
       object-fit: cover; /* Recorta a imagem para preencher o quadrado */
       border-radius: 0%; /* Cria um círculo (opcional) */
       margin-bottom: 0rem; /* Adiciona um pouco de espaço abaixo da imagem */
   }

      /* Regra específica para trocar a imagem no mobile */
   @media (max-width: 768px) {
       .placeholder-content img {
           content: url('images/geral/teste_mob2.png'); /* Caminho para a nova imagem mobile */
           width: 150px; /* Ajuste o tamanho conforme necessário */
           height: 150px;
           border-radius: 8px; /* Volta para bordas retangulares (opcional) */
           aspect-ratio: 1 / 1; /* Garante que a imagem mantenha a proporção 1:1 */
           object-fit: contain; /* Garante que a imagem caiba dentro do espaço 1:1 */
       }
   }

.placeholder-content p {
    position: absolute; /* Posiciona o texto sobre a imagem */
    background-color: rgba(0, 0, 0, 0.6); /* Fundo semitransparente para legibilidade */
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.2rem;
    text-align: center;
}


/* Ajuste para Mobile */
@media (max-width: 768px) {
    /* Devolvemos o padding para a seção no mobile */
    #about {
        padding: 1rem 1rem;
    }

    .placeholder-content {
        flex-direction: column; /* Coloca a imagem e o texto um sobre o outro */
        max-height: none; /* Remove a altura máxima */
    }

    .placeholder-content img {
        position: static; /* Retorna a imagem ao fluxo normal */
        width: 100%;
        max-width: 400px; /* Limita a largura da imagem */
        height: auto;
        object-fit: contain; /* Garante que a imagem apareça inteira */
        border-radius: 8px; /* Borda arredondada no mobile */
        aspect-ratio: 0; /* Proporção menor que 1:1, mais larga que alta */
    }

    .placeholder-content p {
        position: static; /* Retorna o texto ao fluxo normal */
        background-color: transparent;
        color: var(--cor-texto); /* Volta para a cor de texto padrão */
        padding: 1rem 0 0 0; /* Espaçamento acima do texto */
        font-size: 1rem;
    }
}


/* ########## INÍCIO: ESTILOS DA SEÇÃO 3 (BENEFÍCIOS) ########## */

.content-section-dark {
    background-color: #1a1a1a;
    color: #f0f0f0;
    padding: 5rem 2rem;
    text-align: center;
}

.content-section-dark .container {
    max-width: 1100px;
    margin: 0 auto;
}

.content-section-dark h2 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
    font-family: 'Geometr415 Blk BT', sans-serif;
}

.content-section-dark .section-description {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 4rem auto;
    color: #c5c5c5;
}

.benefits-grid {
    display: grid;
    /* 3 colunas no desktop */
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem; /* Espaçamento entre os itens */
}

.benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.benefit-icon i {
    font-size: 3rem; /* Tamanho do ícone */
    color: var(--cor-principal); /* Usando a cor principal do seu site */
    margin-bottom: 0.5rem;
}

.benefit-label {
    font-size: 1.1rem;
    font-weight: bold;
    color: #f0f0f0;
}

/* Ajustes de responsividade para a grade de benefícios */
@media (max-width: 992px) {
    .benefits-grid {
        /* 2 colunas em tablets */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .content-section-dark h2 {
        font-size: 2.2rem;
    }

    .benefits-grid {
        /* 1 coluna em celulares */
        grid-template-columns: 1fr;
    }
}

/* #################### FIM: ESTILOS DA SEÇÃO 3 #################### */

/* ########## INÍCIO: ESTILOS DO RODAPÉ (PRÉ-RODAPÉ + RODAPÉ PRINCIPAL) ########## */

/* Parte 1: Pré-Rodapé (CTA Visual) */
.pre-footer-cta {
    position: relative;
    padding: 10rem 2rem 6rem 2rem;
    text-align: center;
    color: #fff;
    background-color: #333; /* Cor de fallback */
    
    /* A MÁGICA DO BACKGROUND: Imagem + Gradiente Roxo por cima */
    background-image: 
        linear-gradient(to right, rgba(107, 50, 247, 0.85), rgba(50, 20, 150, 0.95)),
        url('images/geral/teste_pc.png'); /* << COLOQUE AQUI O CAMINHO DA SUA IMAGEM DE COLAGEM */
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; /* Mescla o gradiente com a imagem */
}

/* A CURVA SUPERIOR - Criada com um pseudo-elemento */
.pre-footer-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: var(--cor-fundo-claro); /* Cor da seção ACIMA do rodapé */
    
    /* A forma da curva é feita com border-radius em um elemento muito largo */
/*     clip-path: ellipse(55% 100% at 50% 100%); */
}

.cta-content {
    position: relative; /* Para ficar acima da curva e do fundo */
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: 'Geometr415 Blk BT', sans-serif;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.cta-button-footer {
    background-color: var(--cor-principal); /* #F06032 */
    color: #fff;
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.3s;
    display: inline-block;
}

.cta-button-footer:hover {
    background-color: #d84c1f;
    transform: translateY(-3px);
}


/* Parte 2: Rodapé Principal */
.main-footer {
    background-color: #1a1a1a;
    color: #c5c5c5;
    padding: 4rem 2rem 2rem 2rem;
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap; /* Permite que as colunas quebrem em telas menores */
    margin-bottom: 3rem;
}

.footer-col {
    flex: 1;
    min-width: 220px; /* Largura mínima para cada coluna */
}

.footer-col h4 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.col-identity .footer-logo {
    height: 50px;
    margin-bottom: 1.5rem;
}

.col-nav ul {
    list-style: none;
}

.col-nav ul li a {
    color: #c5c5c5;
    text-decoration: none;
    line-height: 2.2;
    transition: color 0.3s;
}

.col-nav ul li a:hover {
    color: var(--cor-principal);
}

.social-icons a {
    color: #c5c5c5;
    font-size: 1.5rem;
    margin-right: 1.5rem;
    transition: color 0.3s, transform 0.3s;
    display: inline-block;
}

.social-icons a:hover {
    color: #fff;
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
}

.legal-links a {
    color: #c5c5c5;
    text-decoration: none;
    margin-left: 1.5rem;
}

.legal-links a:hover {
    color: #fff;
}

/* Estilos do Menu Hamburguer */
.menu-hamburguer {
    display: none; /* Escondido em telas grandes */
    cursor: pointer;
    z-index: 101; /* Garante que fique acima de outros elementos */
}

.menu-hamburguer span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--cor-texto);
    margin: 5px 0;
    border-radius: 2px;
}


/* Ajustes de responsividade para o rodapé */
@media (max-width: 768px) {
    .cta-content h2 {
        font-size: 2.2rem;
    }
    
    .footer-columns {
        flex-direction: column;
        text-align: center;
    }

    .col-identity {
        margin-bottom: 2rem;
    }

    .social-icons {
        margin-bottom: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
    }

    .legal-links {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .legal-links a {
        margin-left: 0;
    }
}


/* #################### FIM: ESTILOS DO RODAPÉ #################### */



/* ########## INÍCIO: ESTILOS DA PÁGINA SOBRE NÓS ########## */

/* Ajuste para o conteúdo principal da página não começar colado no menu */
main {
    padding-top: 80px; /* Altura aproximada do seu header */
}

/* Estilos para a seção de introdução da empresa (ATUALIZADO) */
#company-intro .container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Centraliza todo o conteúdo */
}

#company-intro h2 {
    font-family: 'Geometr415 Blk BT', sans-serif;
    font-size: 2.8rem;
    color: var(--cor-secundaria); /* --- Título na cor roxa --- */
    margin-bottom: 1rem;
/*     position: relative; /* Necessário para o detalhe abaixo */ 
/*     display: inline-block; /* Faz o elemento ter a largura do texto */
    padding-bottom: 0.5rem;
}

/* Detalhe decorativo abaixo do título */
#company-intro h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px; /* Largura do traço */
    height: 4px; /* Espessura do traço */
    background-color: var(--cor-secundaria); /* Roxo */
    border-radius: 2px;
}

#company-intro p.section-description {
    font-family: 'Geometr415 Blk BT', sans-serif; /* --- Nova fonte aplicada aqui --- */
    font-size: 1.2rem;
    line-height: 1.8; /* Aumenta o espaçamento entre as linhas para melhor leitura */
    color: #555; /* Um cinza escuro, mais suave que o preto puro */
    margin-top: 2rem; /* Adiciona espaço depois do título */
}


/* Estilos para a seção dos fundadores (ATUALIZADO) */
.founders-grid {
    display: flex;
    justify-content: center; /* Centraliza os perfis na linha */
    align-items: flex-start; /* Alinha os perfis pelo topo */
    gap: 4rem; /* Espaço entre os perfis */
    flex-wrap: wrap; /* Permite que quebre a linha se não couber */
}

.founder-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 300px; /* Largura máxima para cada perfil */
}

.founder-photo {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--cor-principal);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.founder-name {
    font-size: 2rem;
    color: var(--cor-texto);
    margin-bottom: 0.5rem;
}

.founder-title {
    font-size: 1.2rem;
    color: var(--cor-secundaria);
    font-weight: bold;
}

/* Ajuste para mobile: um perfil abaixo do outro */
@media (max-width: 768px) {
    .founders-grid {
        flex-direction: column;
        align-items: center; /* Centraliza os perfis na coluna */
        gap: 3rem;
    }
}


.founder-photo {
    width: 280px;
    height: 280px;
    border-radius: 50%; /* Deixa a foto em um círculo perfeito */
    object-fit: cover;  /* Garante que a imagem não fique distorcida */
    border: 5px solid var(--cor-principal); /* Adiciona uma borda com a cor principal */
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.founder-name {
    font-size: 2rem;
    color: var(--cor-texto);
    margin-bottom: 0.5rem;
}

.founder-title {
    font-size: 1.2rem;
    color: var(--cor-secundaria);
    font-weight: bold;
    margin-bottom: 1rem;
}

/* ########## FIM: ESTILOS DA PÁGINA SOBRE NÓS ########## */


/* ########## INÍCIO: ESTILOS DA PÁGINA PROJETOS ########## */

/* Seção do Título com fundo roxo */
#page-title-section {
    padding: 4rem 2rem;
    background-color: var(--cor-secundaria); /* Fundo roxo */
    text-align: center;
}

#page-title-section h1 {
    color: #FFFFFF; /* Texto branco para melhor contraste */
    font-family: 'Geometr415 Blk BT', sans-serif;
    font-size: 3rem;
    text-transform: uppercase; /* Deixa o texto em caixa alta */
}

/* Seção de Destaque do Projeto (2 colunas) */
#project-showcase .project-layout {
    display: flex;
    align-items: center;
    gap: 3rem;
}

#project-showcase .project-banner,
#project-showcase .project-details {
    flex: 1; /* Faz as duas colunas terem a mesma largura */
}

#project-showcase .project-banner img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

#project-showcase .project-logo img {
    max-height: 240px; /* Altura máxima para a logo */
    margin-bottom: 1.5rem;
}

#project-showcase .project-details h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-family: 'Geometr415 Blk BT', sans-serif;
}

#project-showcase .project-details p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #555;
}

/* Estilos para os botões de ação do projeto */
.project-actions {
    margin-top: 1.5rem;
}

.btn-roblox {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #232529;
    color: #FFFFFF; /* Define a cor do texto e do SVG */
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none; /* Garante que não haja sublinhado no botão */
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s, transform 0.3s;
    border: 2px solid transparent;
}

/* CORREÇÃO: Remove o sublinhado do texto dentro do botão */
.btn-roblox span {
    text-decoration: none; 
}

.btn-roblox:hover {
    background-color: var(--cor-principal);
    transform: scale(1.05);
}

.roblox-logo-svg {
    height: 24px; /* ALTURA FIXA PARA O LOGO EM TODAS AS TELAS */
    width: auto;  /* Largura automática para manter a proporção */
}

/* Responsividade */
@media (max-width: 768px) {
    #page-title-section h1 {
        font-size: 2.2rem;
    }

    #project-showcase .project-layout {
        flex-direction: column; /* Colunas uma abaixo da outra no mobile */
    }

    #project-showcase .project-details {
        text-align: center; /* Centraliza o texto no mobile */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #project-showcase .project-logo {
        display: flex;
        justify-content: center;
    }
}

/* ########## FIM: ESTILOS DA PÁGINA PROJETOS ########## */



/* ########## INÍCIO: ESTILOS DA PÁGINA CONTATO ########## */

#contact-section .contact-layout {
    display: flex;
    gap: 4rem;
    align-items: flex;
}

#contact-section .contact-info,
#contact-section .contact-form {
    flex: 1;
}

#contact-section .contact-info h2 {
    font-size: 3rem;
    font-family: 'Geometr415 Blk BT', sans-serif;
    margin-bottom: 1.5rem;
    color: var(--cor-secundaria);
}

#contact-section .contact-info p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: #555;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--cor-secundaria);
    box-shadow: 0 0 0 3px rgba(107, 50, 247, 0.2);
}

.contact-form button {
    width: 100%;
    padding: 1rem;
    background-color: var(--cor-principal);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.contact-form button:hover {
    background-color: #d84c1f; /* Cor principal mais escura */
    transform: translateY(-2px);
}

#form-status {
    margin-top: 1rem;
    text-align: center;
    font-weight: bold;
}

/* Responsividade para a página de contato */
@media (max-width: 768px) {
    #contact-section .contact-layout {
        flex-direction: column;
        gap: 3rem;
    }
}

/* ########## FIM: ESTILOS DA PÁGINA CONTATO ########## */






/* Responsividade */
@media (max-width: 768px) {
    .hero {
        height: 600px;
    }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 30px;
        left: 0;
        background-color: rgba(255, 255, 255, 0.9);
    }
    .nav-links.active {
        display: flex;
    }
    .menu-hamburguer {
        display: block;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1.2rem;
    }

/* Reduz o tamanho dos cards em 30% no mobile */
    .floating-wrapper:nth-child(1) { width: 252px; height: 252px; } /* Pets  - Camada 1  */
    .floating-wrapper:nth-child(2) { width: 315px; height: 315px; } /* Parques  - Camada 1  */
    /* .floating-wrapper:nth-child(3) { width: 226px; height: 226px; } */
    .floating-wrapper:nth-child(4) { width: 140px; height: 140px; } /* Mundos Red -  - Camada 3  */
    .floating-wrapper:nth-child(5) { width: 130px; height: 130px; } /* Diversão Verde - Camada 3 */
    .floating-wrapper:nth-child(6) { width: 190px; height: 190px; } /* Amigos Azul - Camada 2 */
    .floating-wrapper:nth-child(7) { width: 100px; height: 100px; } /* Bola - Camada 2 */
    .floating-wrapper:nth-child(8) { width: 140px; height: 140px; } /* Bola - Camada 3 */
    .floating-wrapper:nth-child(9) { width: 170px; height: 170px; } /* Controle - Camada 1 */
    .floating-wrapper:nth-child(10) { width: 100px; height: 100px; } /* Controle - Camada 3 */

    /* Regra específica para celulares com tela muito pequena */
@media (max-width: 430px) {
  .hero-content h1 {
    font-size: 2.2rem; /* O tamanho atual é 2.5rem, estamos diminuindo um pouco */
  }

  .hero-content p {
    font-size: 1rem; /* É bom diminuir o parágrafo proporcionalmente */
  }
}
}