.hero-carousel-slide {
  /* ... Transições e posicionamento ... */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
  pointer-events: none;
  
  /* CRUCIAL: Volta a respeitar a altura do pai (#heroCarousel) que tem h-full */
  width: 100%; 
  height: 100%;
}

.hero-carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
  /* Não precisa de altura extra aqui, pois o .hero-carousel-slide já tem height: 100% */
}
:root {
    /* Define uma variável com a altura real do seu cabeçalho */
    --header-height: 90px; 
}

#hero {
    /* O preenchimento empurra o conteúdo para começar DEPOIS do header */
    padding-top: var(--header-height); 
    
    /* A altura MÍNIMA agora é a altura da tela MENOS o header */
    min-height: calc(100vh - var(--header-height));
}

@keyframes fadeIn {

            from { opacity: 0; transform: translateY(20px); }

            to { opacity: 1; transform: translateY(0); }

        }

       

        .fade-in {

            animation: fadeIn 1s ease forwards;

        }

       

        .delay-1 { animation-delay: 0.2s; }

        .delay-2 { animation-delay: 0.4s; }

        .delay-3 { animation-delay: 0.6s; }

        .delay-4 { animation-delay: 0.8s; }

       

        .nav-link-hover-effect::after {

            content: '';

            position: absolute;

            width: 0;

            height: 2px;

            background: #d4af37;

            bottom: -5px;

            left: 0;

            transition: width 0.3s ease;

        }

       

        .nav-link-hover-effect:hover::after {

            width: 100%;

        }

       

        .gallery-item:hover .gallery-caption {

            transform: translateY(0);

        }

       

        .member-image-hover {

            transition: transform 0.5s ease;

        }

       

        .member-card:hover .member-image-hover {

            transform: scale(1.05);

        }

       

        .event-image-hover {

            transition: transform 0.5s ease;

        }

       

        .event-card:hover .event-image-hover {

            transform: scale(1.05);

        }

         body {

            font-family: 'Montserrat', sans-serif;

            background-color: #f8f9fa;

        }

        .navbar {

            transition: all 0.3s ease;

        }

        .navbar.scrolled {

            background-color: rgba(0, 0, 0, 0.9) !important;

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        }

        .gallery-item {

            transition: transform 0.3s ease, box-shadow 0.3s ease;

        }

        .gallery-item:hover {

            transform: translateY(-5px);

            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

        }

        .image-overlay {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: rgba(0, 0, 0, 0.5);

            opacity: 0;

            transition: opacity 0.3s ease;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .gallery-item:hover .image-overlay {

            opacity: 1;

        }

        .modal {

            transition: opacity 0.3s ease, visibility 0.3s ease;

        }

        /* No seu css/style.css */



/* Regras gerais para o cabeçalho (visível normalmente) */

#header {

    background-color: rgba(0, 0, 0, 0.9); /* Fundo padrão semi-transparente */

    /* ... suas outras regras de header aqui ... */

}



/* Estado inicial do cabeçalho quando a página carrega no topo (index.html) */

/* O JS vai adicionar bg-transparent aqui se currentScroll <= 5 */

#header.bg-transparent {

    background-color: transparent !important; /* Totalmente transparente no topo */

    box-shadow: none !important; /* Remove sombra no topo */

}



/* Quando uma página de GALERIA de fotos está ativa E o modal está visível */

/* A classe .modal.visible é adicionada ao #imageModal quando ele abre */

body.page-has-gallery #header {

    background-color: rgba(0, 0, 0, 0.2) !important; /* Mais transparente ao ver fotos */

    transition: background-color 0.3s ease-in-out; /* Transição suave para a opacidade */

}







body.page-has-gallery #header.header-hidden-in-modal {

    background-color: transparent !important;

    box-shadow: none !important;

    transform: translateY(-100%);

    opacity: 0;

}



body.page-has-gallery #header:not(.header-hidden-in-modal) {

    background-color: rgba(0, 0, 0, 0.9) !important;

    transform: translateY(0);

    opacity: 1;

}

/* Se o seu logo for uma imagem com a classe 'logo' */

img.logo {

  width: 200px; /* Altere este valor para o desejado */

  height: auto;   /* 'auto' mantém a proporção da imagem */

}



/* Ou, se o logo estiver dentro de um cabeçalho específico */

.site-header .logo-container img {

  max-width: 250px !important; /* Aumenta a largura máxima permitida */

  width: 100%;

}*/