/* Padrão de fundo sutil */
.bg-pattern {
    background-image: radial-gradient(#2D6A4F 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}

/* Animação suave de fade-in */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}
p,h1,h2,h3,h4,h5,h6 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}p{
    font-size: 1.75rem;
     color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}h2{
    font-size: 32px;
 }
 p.creditos{
     font-size: 16px;
 }

/*!* Estilos para a galeria (sobre nós)*!*/
/*.gallery-item {*/
/*    transition: all 0.4s ease-in-out;*/
/*}*/
/*.gallery-item.hidden-item {*/
/*    display: none;*/
/*    opacity: 0;*/
/*    transform: scale(0.9);*/
/*}*/
/*.gallery-item.show-item {*/
/*    display: block;*/
/*    opacity: 1;*/
/*    transform: scale(1);*/
/*    animation: fadeIn 0.5s ease forwards;*/
/*}*/

/* Estilo para Abas (contact)*/
.tab-content {
    display: none;
    animation: fadeIn 0.5s ease forwards;
}
.tab-content.active {
    display: block;
}
.tab-btn.active {
    background-color: #2D6A4F; /* brand-primary */
    color: white;
    border-color: #2D6A4F;
}

/* Animações do Carrossel de Logos */

.carousel-track {
    display: flex;
    width: max-content;
    flex-wrap: nowrap;
}
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50%)); }
}
@keyframes scroll-right {
    0% { transform: translateX(calc(-50%)); }
    100% { transform: translateX(0); }
}
.animate-scroll-left {
    animation: scroll-left 60s linear infinite;
}
.animate-scroll-right {
    animation: scroll-right 60s linear infinite;
}
/* Pausar animação ao passar o mouse */
.carousel-container:active .carousel-track {
    animation-play-state: paused;
}

/*GALERIA*/
/* --- Masonry / columns --- */
#gallery-grid {
    column-gap: 1.5rem; /* espaço entre colunas */
}

/* Itens para Masonry: inline-block para funcionar com columns */
.gallery-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 1.5rem;
    break-inside: avoid;
    position: relative;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .38s ease, transform .38s ease;
}

/* estado inicial (entrando) — usaremos JS para adicionar essa classe só no primeiro paint */
.gallery-item.pre-enter {
    opacity: 0;
    transform: translateY(18px);
}

/* para esconder (anima saída) */
.gallery-item.will-hide {
    opacity: 0;
    transform: scale(.97);
}

/* removido do fluxo */
.gallery-item.is-hidden {
    display: none !important;
}

/* imagem com blur placeholder */
.gallery-item img.img-blur {
    width: 100%;
    height: auto;
    display: block;
    filter: blur(16px);
    transform: scale(1.03);
    transition: filter .6s ease, transform .6s ease;
}

/* quando carregou, remove blur */
.gallery-item img.img-blur.loaded {
    filter: blur(0);
    transform: scale(1);
}

/* overlay / legenda */
.gallery-item .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity .22s ease;
    background: rgba(0,0,0,0.45);
}
.gallery-item:hover .overlay,
.gallery-item:focus-within .overlay {
    opacity: 1;
}

/* lightbox */
#lightbox {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 9999;
}
#lightbox.visible { display: flex; }
#lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 0.5rem; }

/* estilo botão ativo do filtro (ajuste conforme seu tema) */
.filter-btn.active {
    background-color: #065f46; /* exemplo: verde-700 */
    color: white;
    border-color: transparent;
}

.banner-home{
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 50px !important;
    padding-right: 45%;
    padding-top: 10%;
    margin-left: -8%;
}@media (min-width: 1024px) and (max-width: 1140px) {
    .banner-home{
        margin-left: 0;
        }
}@media (min-width: 1280px) and (max-width: 1440px) {
    .banner-home{
        margin-left: 0;
        }
}@media (min-width: 1536px) and (max-width: 1750px) {
    .banner-home{
        margin-left: 0;
        }
}