/* ==========================================================================
   Importação de Fontes
   ========================================================================== */
   @font-face {
    font-family: 'Canela';
    src: url('../fonte/canela_collection/Canela Text Family/CanelaText-Regular-Trial.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Canela';
    src: url('../fonte/canela_collection/Canela Text Family/CanelaText-Light-Trial.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Canela';
    src: url('../fonte/canela_collection/Canela Text Family/CanelaText-Bold-Trial.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* ==========================================================================
   Estilos Globais
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

body {
    --text-white: #ffffff;
    --text-dark: #000000;
    --text-highconstrat: #f5d12d;
    --bg-light: rgb(255, 255, 255);
    --bg-dark: #000000;
    --bg-highcontrast: #01001a;
    line-height: 1.9;
    background-color: var(--bg-light);
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
}

body.no-scroll {
    overflow: hidden;
}

.template {
    display: flex;
    width: 99.99vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: none;
}

.section {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Raleway';
    font-size: 18px;
    text-align: center;
}

/* ==========================================================================
   Animação de Abertura (Splash Screen)
   ========================================================================== */

#section0 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f8f8f8;
    transition: opacity 1s ease-in-out;
}
.b1{
    overflow: hidden;
}

.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Estilos de Conteúdo
   ========================================================================== */
h1 {
    font-family: 'Canela';
    font-size: 48px;
    margin: 0; /* Unifica as margens para 0 */
}

p {
    margin: 0; /* Unifica as margens para 0 */
}
.b1 h1{
    font-size: 28px;
}
.b1 p {
    font-size: 1em;
    font-style: italic;
    font-weight: 300; /* Aplica a fonte 'Canela Light' aqui */
    font-family: 'Canela';
}

.b1 img {
    margin-bottom: -100px;
}

#section1{
  display: flex;
  flex-direction: column !important;
  width: auto;
  height: 100vh;
  align-items: center  !important;
  text-align: center;
  justify-content: center !important;
  padding: 80px;
  
} 

#section1 h1{
  margin-bottom: -1px;
  overflow-y: hidden;
} 

#section1 p{
  max-width: 410px;
}

#section1 .b3{
    display: flex;
    justify-content: center;
    width: auto;

}
#section1 img {
 
    margin-bottom: 0;
    width: 100px;
    
}

@media screen and (max-width:578px){
   
    #section1 img {
  
        margin-bottom: 0;
        width:100px;
    }

    #section1 p{
        width: 90vw;
        padding: 24px;
      }

  
}

  
        /* Estilos para o botão "X" de fechar */
        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: #000000;
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* Estilos para o botão "hambúrguer" */
        .hamburger-btn {
            background: none;
            border: none;
            color: #2c3e50;
            /* Cor do ícone do hambúrguer */
            font-size: 2rem;
            cursor: pointer;
            z-index: 100;
            /* Garante que o botão fique por cima do menu */
        }

        /* Estilos para o conteúdo do menu */
        .menu-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .menu-content a {
            color: #F5F1EC;
            font-size: 1.2rem;
            padding: 15px;
            text-decoration: none;
            transition: color 0.2s;
        }

        .menu-content a:hover {
            color: #e74c3c;
        }

        /*
 * Animação e comportamento para a tela de abertura (splash screen)
 */

        /* Estilo para desativar a rolagem da página */
        .no-scroll {
            overflow: hidden;
            height: 100vh;
        }

        /* Estilo para a animação de fade-out da tela de abertura */
        #section0 {
            transition: opacity 0.5s ease-in-out;
            /* Define a duração e o tipo da transição */
        }

        /* Estado final da animação de fade-out: invisível */
        #section0.fade-out {
            opacity: 0;
        }

        /* Cores personalizadas para consistência entre seções de fundo diferentes */
        .text-primary-accent {
            color: #e74c3c;
        }

        /* Terracota Abafado */
        .text-dark-contrast {
            color: #2c3e50;
        }

        /* Cinza escuro para texto em fundos claros */
        .bg-light-section {
            background-color: #FFFFFF;
        }

        /* Fundo branco para seções */
        .bg-dark-section {
            background-color: #2c3e50;
        }

        /* Fundo preto para seções */
        .text-light-contrast {
            color: #F5F1EC;
        }

        /* Bege claro para texto geral em fundos escuros */

        .nav-link {
            position: relative;
            transition: color 0.3s;
        }

        .chart-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            height: 400px;
            max-height: 50vh;
        }

        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: #2c3e50;
            /* Linha escura em fundo claro */
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }

        .timeline-container {
            padding: 10px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
        }

        .timeline-container::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            right: -17px;
            background-color: #FFFFFF;
            /* Ponto branco em fundo claro */
            border: 4px solid #e74c3c;
            /* Borda de destaque primária */
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

        .timeline-left {
            left: 0;
        }

        .timeline-right {
            left: 50%;
        }

        .timeline-right::after {
            left: -16px;
        }

        .timeline-content {
            padding: 20px 30px;
            background-color: #FFFFFF;
            /* Fundo do cartão branco */
            position: relative;
            border-radius: 6px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Estilos para os botões de filtro */
        .filter-btn {
            border: 1px solid #c7d2de;
            /* Cor da borda para botões inativos */
            color: #2c3e50;
            /* Cor do texto para botões inativos */
            background-color: #f3f4f6;
            /* Fundo leve para botões inativos */
        }

        .filter-btn.active {
            background-color: #2c3e50;
            /* Fundo escuro para botão ativo */
            color: #FFFFFF;
            /* Texto branco para botão ativo */
            border-color: #2c3e50;
            /* Borda escura para botão ativo */
        }



        @media screen and (max-width: 768px) {
            .timeline::after {
                left: 31px;
            }

            .timeline-container {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
            }

            .timeline-container::before {
                left: 60px;
                border: medium solid white;
                border-width: 10px 10px 10px 0;
                border-color: transparent white transparent transparent;
            }

            .timeline-left::after,
            .timeline-right::after {
                left: 15px;
            }

            .timeline-right {
                left: 0%;
            }
        }

        /*
 * Estilos para o Pop-up de Detalhes do Projeto
 */

        /* Contêiner principal do pop-up */
        .popup-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            /* Fundo escuro semitransparente */
            display: none;
            /* Esconde o pop-up por padrão */
            justify-content: center;
            align-items: center;
            z-index: 2000;
            /* Garante que fique acima de todos os outros elementos */
            opacity: 0;
            /* Começa invisível para a animação */
            transition: opacity 0.3s ease-in-out;
            /* Animação de fade-in */
        }

        /* Estado visível do pop-up */
        .popup-container.active {
            display: flex;
            /* Altera para flex para centralizar o conteúdo */
            opacity: 1;
            /* Torna o pop-up visível */
        }

        /* Conteúdo interno do pop-up */
        .popup-content {
            z-index: 2000;
            background-color: #ffffff;
            /* Fundo branco do pop-up */
            color: #2c3e50;
            /* Cor do texto */
            padding: 40px;
            max-width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            /* Adiciona rolagem se o conteúdo for grande */
            position: relative;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transform: scale(0.95);
            /* Começa menor para a animação de escala */
            transition: transform 0.3s ease-in-out;
            /* Animação de escala */
        }

        /* Animação do conteúdo quando o pop-up está ativo */
        .popup-container.active .popup-content {
            transform: scale(1);
            /* Expande para o tamanho normal */
        }

        /* Estilos para o botão de fechar do pop-up */
#close-popup-btn {
    display: block;
  position: absolute;
  top: 10px; /* Ajusta a distância do topo */
  right: 10px; /* Ajusta a distância da direita */
  background: transparent; /* Fundo transparente */
  border: none;
  height: 10px;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  color: #2c3e50; /* Cor do botão. Mude para #f3f4f6 se o pop-up tiver fundo escuro */
  z-index: 210; /* Z-index alto, para ficar acima de tudo */
}

        /* Estilos para o Pop-up de Detalhes do Projeto */
/* ... (mantenha os estilos para .popup-container, .popup-content, etc.) ... */

/* Estilos para a galeria (substitui os estilos do Swiper) */
.gallery {
  display: flex;
  flex-direction: column; /* As imagens serão empilhadas verticalmente */
  gap: 20px; /* Espaço entre as imagens */
  margin-top: 20px;
}

/* Garante que cada imagem ocupe 100% do espaço disponível */
.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* Cantos arredondados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilos de layout para telas maiores (opcional) */
@media (min-width: 768px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Layout de grade responsiva */
    gap: 20px;
  }
}


/* ==========================================================================
   Estilos do Menu
   ========================================================================== */
   .header {
    display: flex;
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    gap:14px;
    padding: 10px 20px; /* Adiciona preenchimento interno no cabeçalho */
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

  /*
 * Estilos para o menu "hambúrguer"
 */

     


 .nav-menu {
    position: fixed; /* Posiciona o menu fora da tela inicialmente */
    top: 0;
    right: -100%; /* Esconde o menu para a direita */
    width: 250px; /* Largura do menu quando aberto */
    max-width: 300px;
height: 100vh;
background-color: #2c3e50;
color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out; /* Adiciona transição suave para abertura/fechamento */
    z-index: 1001; /* Garante que o menu fique acima do cabeçalho */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

        /* Mostra o menu quando a classe "show-menu" é adicionada */
        .nav-menu.show-menu {
            right: 0;
            /* Desliza o menu para a posição visível */
        }





/* Classe que será adicionada pelo JavaScript para abrir o menu */
.nav-menu.open {
    right: 0; /* Move o menu para dentro da tela */
}



.menu-content a {
    display: block;
    margin: 20px 0;
    text-decoration: none;
    font-size: 20px;
}

.hamburger-btn {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: var(--text-dark); /* Cor do ícone para ser visível */
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: var(--text-light);
    /* Inicialmente escondido */
}



.projetos {
    display: grid;
    grid-template-areas: 3(1fr) 1fr;
     gap: 40px;
}