/* Definições da fonte Graphie */
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Thin_Italic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_ExtraLight_Italic.otf') format('opentype');
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Light_Italic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/Graphie.otf') format('opentype');
    font-weight: 400; /* normal */
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Italic.otf') format('opentype');
    font-weight: 400; /* normal */
    font-style: italic;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Book.otf') format('opentype');
    font-weight: 400; /* Book is often regular weight */
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Book_Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_SemiBold_Italic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_Bold_Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Graphie';
    src: url('../fonts/fonnts.com-Graphie_ExtraBold_Italic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}

body {
    font-family: 'Graphie', sans-serif;
}

/* Bloqueia a rolagem do corpo quando o modal está aberto */
body.modal-open {
    overflow: hidden;
}


html {
    scroll-behavior: smooth;
}

#home {
    height: 100vh;
    background-image: url('../images/video-poster.jpg');
    background-size: cover;
    background-position: center;
}

#hero-video {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#home.video-playing #hero-video {
    opacity: 1;
}

/* Estilos de rótulo flutuante para uma melhor experiência do usuário */
.form-field {
    position: relative;
}

.form-input {
    padding-top: 1.25rem; /* Cria espaço para o rótulo flutuante */
    padding-bottom: 0.5rem;
}

.form-label {
    position: absolute;
    left: 0.5rem; /* Corresponde a px-2 */
    top: 1rem;
    color: #005C73; /* Cor mais clara para o estado do placeholder */
    transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    pointer-events: none; /* Permite que os cliques passem para o input */
}

/* Quando o input está focado ou tem conteúdo, o rótulo sobe */
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
    top: -0.25rem;
    font-size: 0.875rem; /* text-sm */
    color: #1A1820; /* brand-text */
}

/* Ajuste de alinhamento vertical específico para a área de texto */
textarea.form-input {
    padding-top: 1.5rem;
}

/* Visibilidade do botão "Voltar ao topo" */
#back-to-top {
    transition: opacity 0.3s, visibility 0.3s;
}

#back-to-top.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Oculta a barra de rolagem para o carrossel */
#team-carousel {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
#team-carousel::-webkit-scrollbar {
    display: none; /* Safari e Chrome */
}

/* Estilo da barra de navegação */
#navbar {
    background-color: rgba(26, 24, 32, 0.15); /* Efeito de vidro com maior transparência */
    transition: background-color 0.3s, box-shadow 0.3s; /* Transição suave */
}

#navbar.scrolled {
    background-color: rgba(26, 24, 32, 0.5); /* Fica mais opaco ao rolar, mas ainda transparente */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Estilos para os links da navegação (transparência) */
#navbar ul a {
    color: rgba(255, 255, 255, 0.6); /* Texto branco com 60% de opacidade */
}

.pillar-title {
    font-family: 'Graphie', sans-serif;
    font-weight: 800;
}

.container-direita {
        display: flex;
        justify-content: flex-end; /* Alinha os itens à direita */
    }
	
.GraphieSimples {
  font-family: 'Graphie', sans-serif;
  font-weight: 600;
}

/* Adicionado para corrigir o ajuste do vídeo em dispositivos móveis */
@media (max-width: 767px) {
    #historia {
        /* Define uma altura mínima para a seção, garantindo que o vídeo de fundo tenha espaço suficiente
           para ser exibido de forma impactante em telas menores. */
        min-height: 60vh;
        display: flex;
        align-items: center;
    }
    #home {
        /* Permite que o JavaScript defina a altura com base no vídeo, 
           com um fallback robusto caso o vídeo não carregue. */
        height: auto;
        min-height: 70vh; 
    }
}