/* ...................... GERAL ................................................................................................................................................ */

html						{ height:100%; width:100%; -webkit-text-size-adjust:none; text-size-adjust:none; scroll-behavior: smooth;}

body						{ margin:0; padding:0; height:100%; width:100%; background:#fff; font-family: 'Montserrat', sans-serif; font-weight:500; font-size:16px; line-height:160%; color:#1F1F1F; z-index:1; }

form						{ margin:0; padding:0; }

  fieldset					{ margin:0; padding:0; border:none; }

input, textarea, select, option			{ font-family:'Roboto', arial; outline:0; }

img						{ border:none; }

a						{ color:#E60013; text-decoration:none;  -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition: all 0.3s ease; }

a:hover						{ color:#F8AE12; }

/*elemento para deixar no centro o botão .botao-centro botao */


.botao-centro 					{ text-align: center; }

a.botao 					{ display:inline-block; background:#382990; transition: background-color 0.3s ease; color:#fff; font-size:20px; height:50px; line-height:50px; border-radius:6px; padding:0 20px 0 20px;}
a.botao:hover					{ background:#ED393F; }

a.botao.vermelho 				{ background:#ED393F; }
a.botao.vermelho:hover				{ background:#F8AE12; }


::selection					{ background:#000; color:#fff; }
::-moz-selection				{ background:#000; color:#fff; }

.clear						{ clear:both; }

body li.clear					{ clear:both; height:0; padding:0; margin:0; width:100%; float:none; }

.hidden 					{ display: none; }

.invisivel					{ display:none; }

.tudo						{ margin:0 auto; min-height:100%; width:100%; position:relative; }

* html .tudo					{ height:100%; }

.smart_ocultar					{ display:block; }


h1						{ font-size:50px; color:#333333; font-weight:700; margin:0 0 50px 0; padding:0; line-height:100%; }
h1.center					{ text-align:center; }

h2						{ font-size:36px; color:#333333; font-weight:700; margin:0; padding:0; line-height:100%; }
h2.center					{ text-align:center; }
h2.branco					{ color:#fff; }

h3						{ font-size:40px; color:#333333; font-weight:200; text-align:center; margin:0; padding:0; line-height:100%; }

h4						{ font-size:20px; color:#fff; font-weight:500; margin:0; padding:0; line-height:100%; }
h4.center					{ text-align:center; }

h5						{ font-size:14px; color:#fff; font-weight:400; margin:0; padding:0; line-height:100%; }
h5.center					{ text-align:center; }
h5.produto_categoria				{ color:#000;  }

/* usado na interna da empresa - principios e nos tópicos contato */
h6						{ font-size:20px; color:#333333; font-weight:500; margin:0; padding:0; line-height:100%; }
h6.center					{ text-align:center; }
h6.topicos					{ margin-top:50px; }

.subtitulo					{ font-size:20px; font-weight:300; color:#333; text-align:center; margin:30px 0; padding:0; line-height:120%; }
.subtitulo.branco				{ color:#fff; }
.subtitulo.vermelho				{ color:#EC393F; font-weight:500; }
.subtitulo.left					{ text-align:left; }
.subtitulo.top					{ margin:0;}

/* Botão de mais ao lado do titulo na inicial */
.mais						{ display:inline-block; font-size:12px; font-weight:500; padding:3px 10px; margin-left:8px; background:#EC393F; color:#fff; border-radius:20px; line-height:1; transition:all .2s ease; }
.subtitulo a					{ text-decoration:none; color:inherit; }
.subtitulo a:hover .mais			{ background:#333; }


@media only screen and (max-width : 900px) 	{
	
h1						{ font-size:40px; margin:0 0 20px 0; }

h2						{ font-size:24px; text-align:center; }

h3						{ font-size:24px; }

a.botao 					{ font-size:14px; height:100%; line-height:100%; padding:10px}

.subtitulo					{ font-size:16px; text-align:center; }
.subtitulo.left					{ text-align:center; }

}

/* ...................... 1. CABECALHO Superior ............................................................................................................................................ */


.cab_superior						{ position:relative; height:36px; background-color:#382990; padding:0; margin:0 auto; z-index:500; border:none;}

.cab_superior_rel 					{ max-width:1200px; height:36px; margin:0 auto; padding:0 40px; display:flex; align-items:center; justify-content:space-between; /* extremos */ box-sizing:border-box; }

.cab_sup_esq 						{ display:flex; align-items:center; gap:10px; color:#fff; }

.cab_sup_dir 						{ display:flex; align-items:center; gap:10px; }

.cab_sup_dir img 					{ height:19px; display:block; }

.btn_sup 						{ height:24px; padding:0 12px; background:#E60013; color:#fff; border-radius:6px; font-size:12px; font-weight:700; display:flex; align-items:center; text-decoration:none; }

.texto_voluntario					{ font-size:12px; font-weight:700; }

.texto_voluntario_descricao				{ font-size:12px; font-weight:300; }


/* ...................... 1. CABECALHO Logotipo ............................................................................................................................................ */


.cab							{ position:relative; height:130px; background-color:#fff; padding:0; margin:0 auto; z-index:500; border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; }

	.cab_rel					{ position:relative; max-width:1200px; display: flex; align-items: center; justify-content: space-between; padding:0 40px 0 40px; margin:0 auto; z-index:3000; box-sizing:border-box; }

	.cab .logotipo					{ width:198px; height:100px; padding:15px 0 15px 0; }
	
	.cab .logotipo img				{ width:198px; height:100px; }
	
	.cab .logotipo_smart				{ display:none; width:114px; height:58px; padding:10px 0 10px 0;}
	
	.cab .menu 					{ flex-grow: 1; /* O menu ocupa todo o espaço restante */ height: 130px; display: flex; align-items: center; justify-content: center; /* Centraliza o conteúdo do menu */ }

		.menu ul				{ position:relative; display:flex; justify-content: center; margin:0; padding:0; list-style:none; }
		
		.menu li				{ position: relative; margin:0; padding:0 20px 0 0; line-height:130px; height:130px; }
		
		.menu li a				{ margin:0; padding:0; color:#222; font-size:15px; z-index:99999; }
		
		.menu li a:hover			{ color:#382990; text-decoration:none; }
		
		.menu li a.ativo			{ color:#382990; text-decoration:none; }

			.suspenso 			{ display: none; position: absolute; top:100%; left: 0; width:auto; min-width: 360px; background-color:#382990; z-index: 99999; padding:10px; box-sizing: border-box; }
			
			.menu li:hover .suspenso 	{ display: block; }

			.suspenso-coluna		{ position: relative; max-width: none; margin: 0; width: 100%; }

			.suspenso-coluna ul		{ list-style: none; display: block; padding: 0; margin: 0; }

			.suspenso-coluna li		{ width: 100%; height: auto; line-height: 1.2; margin: 0; padding: 0; box-sizing: border-box;}

			.suspenso-coluna li a		{ display: block; color: #fff; padding: 10px 12px; text-decoration: none; }

			.suspenso-coluna li a:hover	{ color: #E1B811;}


	.cab .doeagora					{ height:130px; display:flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
	
		a.doeagora-botao			{ height:35px; padding:0 12px; background:#E60013; color:#fff; border-radius:6px; font-size:15px; font-weight:700; display:flex; align-items:center; text-decoration:none; }
		a.doeagora-botao:hover			{ background:#F8AE12; }


		
	#box_menu 					{ position: relative; /* Para manter a sua posição no fluxo normal na versão desktop */ z-index: 9000; display: flex; align-items: center; width: 100%; justify-content: space-between;  }

 	#ico_menu					{ display:none; top:0; right:20px; position:absolute; cursor:pointer; width:30px; height:87px; background:url(images/smart_ico.png)no-repeat center center; z-index:9988; }

	#ico_fechar					{ display:none; position:absolute; right:0; top:36px; height:87px; background:url(images/ico_fechar2.png) center no-repeat #382990; width:50px; cursor:pointer; z-index:9999; }



@media only screen and (max-width : 1200px) 		{

	#ico_menu					{ display:block; }

	#box_menu					{ z-index:9998; position:fixed; top:0; right:-1200px; min-width:70%; background-color:#382990; height:100%; padding:0 20px 0 20px; box-sizing:border-box; -webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3); -moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.3); box-shadow:0 0 5px rgba(0, 0, 0, 0.3); }

	#ico_fechar					{ display:block; }
      


.cab_superior_rel 					{ padding:0 20px; }

.texto_voluntario_descricao				{ display:none; }
   
      
.cab							{ position:relative; height:87px; max-height:87px; padding:0; margin:0; }

	.cab_rel					{ position:relative; align-items: flex-start; justify-content: flex-start; padding:0; }

	.cab .logotipo					{ display:none; }
	
	.cab .logotipo_smart				{ display:block; width:100%; text-align:center; box-sizing:border-box; }
		
	.cab .menu 					{ position:relative; padding:0; top:132px; /*somado o valor do cabeçalho + redes + 20px para começar o menu */ align-items: flex-start; justify-content: flex-start;  }

		.menu					{ text-align:left; }
	
		.menu ul				{ display:block; width:100%; }

		.menu li				{ display:block; width:100%; height:auto; line-height:120%; font-size:14px; padding:0; border-bottom:1px solid rgba(255,255,255,0.9); }

		.menu li a				{ display:block; padding:10px 0; color:#fff; font-size:14px; }

		.menu li a:hover			{ color:#fff; }

		.menu li:hover .suspenso 		{ display:none; }

		.menu li a.ativo			{ color:#fff; }

			.suspenso			{ position:relative; top:0; left:0; width:100%; background:none; padding:0 0 10px 0; }

			.suspenso-coluna li		{ border-bottom:none; }

			.suspenso-coluna li a		{ padding:5px 0 5px 10px; /* avanço de 10px */ color:#fff; }

			.suspenso-coluna li a:hover	{ color:#fff; }

	.cab .doeagora					{ height:36px; position:relative; padding:0; top:-30px; align-items: flex-start; justify-content: flex-start; }
	
							}


/* ...................... 1. CABECALHO Inferior Aviso ............................................................................................................................................ */


.cab_aviso						{ position:relative; height:36px; background-color:#E1B811; padding:0; margin:0 auto; z-index:1; border:none;}

.cab_aviso_rel 						{ max-width:1200px; height:36px; margin:0 auto; padding:0 40px; display:flex; gap:20px; align-items:center; justify-content: center; font-size:14px; font-weight:500; color:#fff; box-sizing:border-box; }

.btn_aviso 						{ height:24px; padding:0 12px; background:#E60013; color:#fff; border-radius:6px; font-size:14px; font-weight:500; display:flex; align-items:center; text-decoration:none; }


@media only screen and (max-width : 1200px) 		{
	
.cab_aviso						{ height:auto; }
	
.cab_aviso_rel 						{ padding:5px 20px; height:auto; line-height:110%; font-size:12px; font-weight:700; }
	
.btn_aviso 						{ padding:0 5px; font-size:12px; font-weight:700; display:flex; }
	
}


/* ...................... 2. Banner ............................................................................................................................................... */
 /* Contêiner Principal */
#demo_container {
  width: 100%;
  max-height: 600px;       /* Limita a altura máxima em 600px */
  height: auto;            /* Deixa a altura se ajustar ao conteúdo */
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;

  /* Flexbox para centralizar conteúdo */
  display: flex;
  align-items: center;     /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
}

        /* Contêiner dos Itens */
        #items_container {
            position: relative;
            width: 100%;
            height: 100%; /* Herda a altura de #demo_container */
            margin: 0;
            padding: 0;
            z-index: 2;
            overflow: hidden;
        }

        /* Itens do Slide */
        .slide_item {
            position: absolute;
            width: 100%;
            height: 100%; /* Preenche todo o espaço vertical */
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
	    pointer-events: none;
            /* background: green;  Pode ser removido ou ajustado conforme necessário */
        }

	.slide_item a {
	    display: block;
	    width: 100%;
	    height: 100%;
	}


        /* Slide Ativo */
        .slide_item.active {
            opacity: 1;
	    pointer-events: auto;
        }


        /* Imagens do Slide */
        .slide_item img {
            width: 100%;
            height: 100%;
            object-fit: scale-down; 
            display: block; /* Remove espaços indesejados abaixo das imagens */
        }


	.banner_overlay {
	    position: absolute;
	    inset: 0; /* substitui top/left/width/height */
	    background: rgba(0,0,0,0.5);
	    z-index: 1;
	}


        /* Texto do Banner */
        .banner_text {
            position: absolute;
            top: 50%; /* Posiciona a tarja verticalmente no centro da imagem */
            left: 0; /* Alinha a tarja à esquerda */
            transform: translateY(-50%); /* Centraliza a tarja verticalmente */
            width: 60%;
            height: 30%; /* Faz a tarja ocupar 30% da altura da imagem */
            display: flex;
            flex-direction: column;
            justify-content: center;
	    align-items: flex-start;
            color: #fff;
            font-weight: 700;
            line-height: 120%;
            z-index: 2;
            text-align: left;
            padding: 20px;
            transition: all 0.5s ease;
        }
	
	.banner_text .banner_subtitulo { padding-bottom:10px; font-size:30px; font-weight:500; line-height:100%;}
	.banner_text .banner_titulo { padding:20px 0; font-size:60px; font-weight:300; line-height:110%;}
	.banner_text .banner_descricao { padding-top:10px; font-size:30px; font-weight:300; line-height:100%;}

.banner_botoes {
    margin-top: 30px;
    padding: 0; 
    display: inline-flex;   /* aqui está a chave */
    gap: 20px;              /* substitui margin-left */
}

.btn_banner {
    display: inline-block;
    white-space: nowrap;
    padding: 3px 10px 2px 10px;           /* melhor proporção */
    font-size: 18px;              /* 30px estava exagerado */
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Cores */
.btn_azul {
    background: #382990;
}

.btn_azul:hover {
    background: #2c1f75;
    color:#fff;
    transform: translateY(-2px);
}

.btn_vermelho {
    background: #ED393F;
}

.btn_vermelho:hover {
    background: #c52c31;
    color:#fff;
    transform: translateY(-2px);
}

/* Bolinhas transição dots */
#banner_dots{
	position:absolute;
	bottom:15px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	gap:8px;
	z-index:5;
}

#banner_dots span{
	width:10px;
	height:10px;
	border-radius:50%;
	background:#ffffff80;
	cursor:pointer;
	transition:all .3s;
}

#banner_dots span.active{
	background:#fff;
	transform:scale(1.2);
}


	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1800px) {
	    #demo_container {
		width: 100%;
		max-height: 500px;
	    } 
	}
	
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1600px) {
	    #demo_container {
		max-height: 450px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1400px) {
	    #demo_container {
		max-height: 300px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1200px) {
	    #demo_container {
		max-height: 250px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 1000px) {
	    #demo_container {
		max-height: 200px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 800px) {
	    #demo_container {
		max-height: 160px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 650px) {
	    #demo_container {
		max-height: 140px;
	    }
	}
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 550px) {
	    #demo_container {
		max-height: 120px;
	    }
	}
	
	
	/* Responsividade para telas menores que 1920px */
	@media (max-width: 500px) {
	    #demo_container {
		max-height: 100px;
	    }
	}


        /* Responsividade para telas menores texto */
        @media (max-width: 1500px) {

		.banner_text {
			width: 90%;
			left: 50%;
			transform: translate(-50%, -50%); /* Centraliza a caixa tanto vertical quanto horizontalmente */
			text-align: center;
		}
		    
		.banner_text .banner_subtitulo 		{ display:none; }
		.banner_text .banner_titulo 		{ padding:10px 0; font-size:30px; text-align:center; }
		.banner_text .banner_descricao  	{ display:none; }
	    
	    
		.banner_botoes {
		    margin-top: 10px;
		}
	    
	    
        }
	

        /* Responsividade para telas menores texto */
        @media (max-width: 600px) {

		    
		.banner_text .banner_subtitulo 		{ display:none; }
		.banner_text .banner_titulo 		{ padding:10px 0; font-size:20px; font-weight:500; text-align:center; }
		.banner_text .banner_descricao  	{ display:none; }
	    
	    
		.banner_botoes {
		    margin-top:0;
		}
		
		.btn_banner {
		    padding: 0 5px;           /* melhor proporção */
		    font-size: 14px;              /* 30px estava exagerado */
		    font-weight: 500;
		}
	    
        }




/* ...................... 5. Sobre nós   .............................................................................................................................................. */


.sobre_sobre						{ display:flex; width:1200px; margin:40px auto; box-sizing:border-box; z-index:100; }
  
	.sobre_sobre_direita				{ flex:0 0 50%; background:center no-repeat; background-size:cover; position:relative; z-index:110;  }

		.sobre_rel_direita			{ padding:40px; margin:0; box-sizing:border-box; z-index:200; }

		.sobre_rel_direita img			{ width:100%; }
    
	.sobre_sobre_esquerda				{ flex:0 0 50%; position:relative; z-index:110; }
  
		.sobre_rel_esquerda			{ padding:40px; margin:0; box-sizing:border-box; z-index:200; }

	
	.sobre_sobre h1					{ font-size:36px; font-weight:700; color:#333; text-align:center; }
	
	.sobre_sobre h2					{ font-size:24px; font-weight:500; color:#2C3192; text-align:left; }
	
	.sobre_sobre p					{ font-size:16px; text-align:left;}


      
@media only screen and (max-width : 700px) {


  .sobre_sobre						{ display:block; width:100%; margin:0 auto; text-align:center; }

		.sobre_rel_direita			{ padding:20px; }
		
		.sobre_rel_esquerda			{ padding:20px; }
      
	
	.sobre_sobre h1					{ font-size:20px; font-weight:700; color:#333;}
	
	.sobre_sobre h2					{ font-size:20px; font-weight:500; color:#2C3192; }
	
	.sobre_sobre p					{ font-size:14px; }
      
}
	




.inicial_caixa						{ width:100%; padding:0; margin:0; box-sizing:border-box; z-index:200;}
.inicial_caixa.back_projetos				{ background-color:#F4EDDD;}
.inicial_caixa.back_transformevidas			{ background-color:#382990;}

.inicial_caixa_rel					{ position:relative; max-width:1200px; padding:100px 40px; margin:0 auto; z-index:300; box-sizing:border-box; }
  

@media only screen and (max-width : 1200px) 		{
	
.inicial_caixa_rel					{ padding:40px 20px; }

}

/* ...................... 3. Projetos  .............................................................................................................................................. */


/* GRID PROJETOS */

.projetos_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;
}

.projeto_item {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(25% - 22.5px); /* 4 por linha */
    box-sizing: border-box;
}

/* IMAGEM */

.projeto_img {
    height: 184px;
    overflow: hidden;
}

.projeto_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TEXTO */

.projeto_texto {
    padding: 20px;
    flex-grow: 1; /* faz todos ficarem com mesma altura */
    display: flex;
    flex-direction: column;
}

.projeto_texto h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30px;
}

.projeto_texto p {
    font-size: 16px;
    font-weight: 300;
    margin: 0;
}


	  
@media only screen and (max-width : 900px) {
	
.inicial_projetos_rel					{ padding:20px 20px; }
    
    .projeto_item {
        flex: 1 1 calc(50% - 15px);
    }

}
	
	
@media only screen and (max-width : 500px) {
	
    .projeto_item {
        flex: 1 1 100%;
    }

    .projeto_img {
        height: auto;
    }

    .projeto_img img {
        height: auto;
        object-fit: contain; /* ou pode remover se quiser */
    }

}
	

/* ...................... 4. Eventos  .............................................................................................................................................. */

/* =========================
   EVENTOS
========================= */

.eventos_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;
}

/* Item base */

.evento_item {
    position: relative;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    background:#eee;
    flex: 1 1 100%; /* base neutra */
}

.evento_item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.evento_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}



/* -------------------------
   DESKTOP (assimétrico)
-------------------------- */

@media only screen and (min-width: 1101px) {

    .evento_item:nth-child(1),
    .evento_item:nth-child(3),
    .evento_item:nth-child(5),
    .evento_item:nth-child(6) {
        flex: 1 1 calc(25% - 22.5px);
    }

    .evento_item:nth-child(2),
    .evento_item:nth-child(4) {
        flex: 1 1 calc(50% - 15px);
    }

}

/* -------------------------
   Overlay Hover
-------------------------- */

.evento_overlay {
    position: absolute;
    inset: 0;
    background: rgba(226, 170, 0, 0.75); /* Ajuste a cor se quiser */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.evento_titulo {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding: 0 20px;
}

/* Hover */

.evento_item:hover .evento_overlay {
    opacity: 1;
}

.evento_item:hover img {
    transform: scale(1.05);
}

/* =========================
   TABLET
========================= */


@media only screen and (max-width: 1100px) {

    .evento_item {
        flex: 1 1 calc(50% - 15px);
        height: 250px;
    }

}

/* =========================
   MOBILE
========================= */

@media only screen and (max-width: 600px) {


    .eventos_grid {
        gap: 20px;
    }

    .evento_item {
        flex: 1 1 100%;
        height: auto;
    }

    .evento_item img {
        height: auto;
        transform: none;
    }

    /* Remove overlay e coloca título abaixo */

    .evento_overlay {
        position: relative;
        inset: auto;
        opacity: 1;
        background: none;
        display: block;
        padding: 15px 0 0 0;
    }

    .evento_titulo {
        color: #333;
        font-size: 16px;
        padding: 0;
    }

}

	
/* ...................... 6. Marcas / Publicidade - Menu   .............................................................................................................................................. */


/* Container geral */
.parceiros-tabs {
    width: 100%;
    text-align: center;
    margin-top:30px;
}

/* BOTÕES */
.tabs-botoes {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 80px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    font-weight:300;
}

/* Hover */
.tab-btn:hover {
    background: #F8AE12;
    color: #333;
}

/* Ativo */
.tab-btn.active {
    background: #F8AE12;
    color: #333;
    font-weight:500;
}

/* CONTEÚDO */
.tabs-conteudo {
    position: relative;
}

/* Cada bloco */
.tab-content {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

/* Conteúdo ativo */
.tab-content.active {
    display: block;
}

/* Animação */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

        @media (max-width: 900px) {
		
/* BOTÕES */
.tabs-botoes {
    margin-bottom: 40px;
}
	
	}

/* ...................... 6. Marcas / Publicidade - Logos   .............................................................................................................................................. */




        .logosd {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 50px;
            box-sizing: border-box;
        }

        .logosd div {
            display: flex; /* Torna o div um contêiner flex */
            justify-content: center; /* Centraliza horizontalmente */
            align-items: center; /* Centraliza verticalmente */
            margin: 0 auto;
            padding: 0;
            text-align: center;
            list-style: none;
            min-height: 70px; /* Define uma altura mínima para a centralização vertical */
            min-width: 70px;  /* Opcional */
        }

        .logosd div img {
            max-height: 112px;
            max-width: 100%; /* Garante que a imagem não exceda a largura do contêiner */
            display: block; /* Remove espaços em branco abaixo das imagens */
        }

        @media (max-width: 900px) {
	    
        .logosd {
            gap: 20px;
        }

        .logosd div {
            min-height: 40px; /* Define uma altura mínima para a centralização vertical */
            min-width: 40px;  /* Opcional */
        }

        .logosd div img {
            max-height: 70px;
        }
	    
	    
        }
  

/* ...................... 7. Contato inicial   .............................................................................................................................................. */


.contato_form 				{ max-width: 1200px; margin: 0 auto; }
.linha_duas_colunas 			{ display: flex; }
.linha_duas_colunas .coluna 		{ width: 50%; display: flex; flex-direction: column; }
.linha_duas_colunas .coluna:first-child { padding-right: 15px; }
.linha_duas_colunas .coluna:last-child	{ padding-left: 15px; }

.contato_form input,
.contato_form select,
.contato_form textarea 			{ width: 100%; height:50px; line-height:50px; padding:0 15px; border: none; margin-bottom: 20px; border-radius: 10px; background:#F4EDDD; color:#333; font-size: 14px; font-weight:300; box-sizing:border-box; }
.contato_form textarea 			{ height: 150px; resize: none; }

.contato_form .linha_botao 		{ text-align:center; }
.contato_form .linha_botao .botao 	{ display: inline-block; width:auto; background: #ED393F; color: #fff; font-size:16px; height: 50px; line-height:50px; padding: 0 15px; border-radius: 6px; border: none; cursor: pointer; transition: background-color 0.3s ease; }
.contato_form .linha_botao .botao:hover { background: #F8AE12; }

@media (max-width: 1200px) 		{

.linha_duas_colunas 			{ flex-direction: column; }

.linha_duas_colunas .coluna 		{ width: 100%; }
.linha_duas_colunas .coluna:first-child { padding-right:0; }
.linha_duas_colunas .coluna:last-child  { padding-left:0; }

.contato_form .linha_botao .botao 	{ display:block; width:100%; }
}


/* ...................... 8. Depoimento   .............................................................................................................................................. */

.depoimentos_container {
    width:100%;
    margin: 0 auto;
    overflow: hidden;
}

/* Track que se move */
.depoimentos_track {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
}

/* Cada depoimento */
.depoimento {
    min-width:50%; /* tira metade do espaço */
    padding:40px;
    border-radius: 10px;
    box-sizing: border-box;
    background:#fff;
}

.depoimento h3 {
    margin: 0;
    text-align:left;
    font-size: 16px;
    font-weight: 700;
}

.depoimento .cargo {
    display: block;
    color: #ED393F;
    margin-bottom: 20px;
}

.depoimento p {
    font-size: 16px;
    line-height: 120%;
    font-weight:300;
}

/* Setas */
.depoimentos_container .setas {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.depoimentos_container .setas .seta {
    background:#ED393F;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    margin: 0 10px;
    transition: 0.3s;
}

.depoimentos_container .setas .seta:hover {
    background:#F8AE12;
}

@media (max-width: 1200px) {

    .depoimento {
        min-width: 100%;
    }

}

/* ...................... 9. Noticias / Destaques   .............................................................................................................................................. */



/* GRID DESTAQUES */

.destaques_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 60px;
}

.destaque_item {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    flex: 0 0 calc(25% - 22.5px); /* fixa 4 por linha */
    max-width: calc(25% - 22.5px);

    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

/* IMAGEM + TARJA */

.destaque_img {
    position: relative;
    height: 184px;
    overflow: hidden;
}

.destaque_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

/* tarja inferior esquerda */
.destaque_categoria {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #ED393F; /* pode trocar pra cor do tema */
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 20px;
    border-top-right-radius: 6px;
}

/* TÍTULO */

.destaque_titulo {
    padding: 20px;
    font-size: 16px;
    text-align:left;
    font-weight: 300;
    margin: 0;
    line-height: 130%;
}

/* HOVER (opcional, leve) */
.destaque_item:hover .destaque_img img {
    transform: scale(1.03);
}

/* RESPONSIVO */

@media only screen and (max-width: 900px) {

    .destaques_grid {
        gap: 20px;
    }

    .destaque_item {
        flex: 1 1 100%;   /* 1 por linha */
        max-width: 100%;
    }

}

@media only screen and (max-width: 500px) {

    .destaque_img {
        height: auto;
    }

    .destaque_img img {
        height: auto;
        object-fit: cover;
    }

}


 
/* ...................... 7. Rodapé   .............................................................................................................................................. */
 

.rodape							{ background:#382990; width:100%; padding:0; margin:0; border:none; box-sizing:border-box; z-index:200;}

	.rodape_subtitulo				{ margin:10px 0 0 0; padding:0; font-size:14px; color:#fff; font-weight:300; }

	.rodape_slogan					{ margin:10px 0 0 0; padding:0; font-size:14px; color:#fff; font-weight:300; text-align:center; }

	.rodape_rel					{ display:flex; max-width:1200px; padding:80px 40px 80px 40px; margin:0 auto; box-sizing:border-box; z-index:210;}

		.mapa_esquerda				{ flex:0 0 25%; z-index:220; }
    
		.mapa_centro				{ flex:0 0 50%; display:flex; z-index:220; justify-content: space-between; width:100%; margin:0 auto; padding:0 40px; box-sizing:border-box; }

		.mapa_direito				{ flex:0 0 25%; z-index:220; }


	.mapa_itens ul					{ list-style:none;  padding:0; margin:10px 0 0 0; height:auto; width:100%; position:relative; }
	  
	.mapa_itens li					{ padding:0; margin:0; }
	    
	.mapa_itens li a				{ margin:0; padding:0; font-size:14px; color:#fff; font-weight:300; }
	    
	.mapa_itens li a.ativo				{ color:#E2BB2E; }
	    
	.mapa_itens li a:hover				{ text-decoration:none; color:#E2BB2E; }





@media only screen and (max-width : 900px) {
	
	.rodape_rel					{ flex-direction: column; padding:20px 20px 0 20px; }
     
        .rodape_rel h4					{ text-align:center; }
     
		.mapa_esquerda				{ flex:0 0 100%; margin:40px 0 40px 0; text-align:center;  }
    
		.mapa_centro 				{ flex-direction: column; padding: 0;  }

			.mapa_itens 			{ width: 100%; margin-bottom: 30px; }

			.mapa_itens ul			{ display:flex; flex-wrap: wrap; justify-content: center; }
	  
			.mapa_itens li			{ padding:0 10px 5px 10px; }

		.mapa_direito				{ flex:0 0 100%; }
     

		      
}


/* ...................... 7.1 Rodapé Newsletter   .............................................................................................................................. */


.news_form {
    padding: 20px 0;
}

.news_form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.news_form input[type="email"] {
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.35); /* preto com 35% */
    border: none;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.news_form input[type="email"]::placeholder {
    color: #cfc9ff;
}

.news_form input[type="submit"] {
    background: #ED393F; /* vermelho */
    color: #fff;
    border: none;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    transition: 0.3s;
}

.news_form input[type="submit"]:hover {
    background: #c92f35;
}


/* ...................... 7.1 Rodapé Assinatura   .............................................................................................................................. */


.rodape_ass						{ background:#382990; width:100%; padding:0 0 10px 0; margin-top:-1px; box-sizing:border-box; z-index:200; }

  .rodape_ass_rel					{ max-width:1200px; padding:0 40px 0 40px; margin:0 auto; text-align:center; box-sizing:border-box; z-index:210; }
  
    .rodape_redes 					{ width:100%; margin:0 auto; padding-bottom:30px; display: flex; align-items: center; justify-content: center; gap:10px; }

	.rede-link img 					{ width:36px; height:36px; display: block; transition: opacity 0.3s ease; }

	.rede-link img:hover 				{ opacity: 0.7; }

  
  
  
    .rodape_ass_rel .risco				{ width:100%; height:1px; background-color: rgba(255, 255, 255, 0.1); margin:0 auto 30px auto; }
  
    .rodape_ass_rel address				{ margin:10px 0 30px 0; padding:0; font-size:12px; font-weight:300; color:#fff; line-height:120%; font-style:normal;  }
    
    .rodape_ass_rel .expediente				{ margin:10px 0 30px 0; padding:0; font-size:12px; font-weight:300; color:#fff; line-height:120%; font-style:normal;}
  
    .index						{ margin:30px auto; padding:0; font-size:12px; font-weight:300; color:#fff; text-align:center; }
    
    .index a 						{ color:#fff; }
    
    .index a:hover					{ color:#E2BB2E; }

    
/* ...................... 9.1 Inicial Geral - Politica ............................................................................................................................................. */
         
      
.cont							{ width:100%; padding:0; margin:40px 0 40px 0; box-sizing:border-box; z-index:200;}

  .cont_rel						{ position:relative; max-width:1200px; padding:0 40px 0 40px; margin:0 auto; box-sizing:border-box; }

/* CLEAR depois do texto */
  .cont_rel::after 					{ content: ""; display: block; clear: both; }

  .foto_principal 					{ width: 40%; float: right; margin: 0 0 20px 20px; }

@media only screen and (max-width : 900px) {
	
  .cont_rel						{ padding:0 20px 0 20px; }

  .foto_principal					{ width: 100%; height: auto; display: block; margin: 20px 0; }
		      
}


/* ...................... Voluntário ...................................................................................................................................... */

.confirma						{ background-color:#382990; font-size:16px; color:#fff; margin:0 auto; text-align:center; padding:5px 10px; box-sizing:border-box; border-radius: 6px; }
.erro							{ background-color:#ED393F; font-size:16px; color:#fff; margin:0 auto; text-align:center; padding:5px 10px; box-sizing:border-box; border-radius: 6px; }

.voluntario_box {
	margin: 0 auto;
}

.voluntario_texto {
	text-align: center;
	font-size: 16px;
	margin-bottom: 30px;
	color: #333;
}

.voluntario_form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.form_linha {
	display: flex;
	flex-direction: column;
}

.form_linha.center {
	display: flex;
	justify-content: center;
	text-align:center;
}

.form_linha label {
	font-size: 14px;
	margin-bottom: 5px;
	color: #555;
}



.form_linha input,
.form_linha select,
.form_linha textarea {
	padding: 10px;
	background:#F4EDDD; color:#333; font-size: 14px; font-weight:300;
	border-radius: 10px;
	border:none;
	transition: 0.2s;
}

.form_linha input:focus,
.form_linha select:focus,
.form_linha textarea:focus {
	box-shadow: 0 0 0 2px rgba(56,41,144,0.1);
}

/* Destaque Festa */
.destaque_check {
	background: #F4EDDD;
	border:none;
	padding: 12px;
	border-radius: 10px;
}

.destaque_check label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
}

/* Botão */
.btn_voluntario {
	background: #ED393F;
	color: #fff;
	border: none;
	padding: 12px 25px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 16px;
	transition: 0.3s;
}

.btn_voluntario:hover {
	background: #F8AE12;
}


.funcoes_grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:8px;
background:#F4EDDD;
padding:12px;
border-radius:10px;
}

.funcao_item{
display:flex;
gap:8px;
align-items:center;
font-size:14px;
cursor:pointer;
}

.festa_box{
background:#F4EDDD;
border-radius:10px;
padding:15px;
margin-top:10px;
border-left:4px solid #F8AE12;
}

.festa_box select,
.festa_box input,
.festa_box textarea{
background:#fff;
border:1px solid #ddd;
}

.festa_titulo{
font-weight:600;
font-size:15px;
margin-bottom:10px;
color:#382990;
}


/* Mobile */
@media (max-width: 600px) {

	.voluntario_texto {
		font-size: 15px;
		padding: 0 10px;
	}

}


/* ...................... galeria de fotos ...................................................................................................................................... */

/* container */
.galeria {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* ?? 6 colunas */
    gap: 15px;
}

/* link */
.galeria .thumb {
    display: block;
    width: 100%;
}

/* caixa */
.galeria .foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
}

/* imagem */
.galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ?? muda aqui */
    display: block;
}

/* RESPONSIVO */

@media (max-width: 1100px) {
    .galeria {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 900px) {
    .galeria {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .galeria {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .galeria {
        grid-template-columns: 1fr;
    }
}

/* ...................... galeria de fotos modal simples ...................................................................................................................................... */


.modal_galeria {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
}

#modal_galeria_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}

.modal_galeria_fechar {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 100000;
}


 /* ...................... botão flutuante whatsapp .............................................................................................................................. */

#whats_pulse						{ position:fixed; bottom:20px; right:20px; z-index:999; width:60px; height:60px; background:url(images/ico_whatsapp.png) center no-repeat #4CAF50; border-radius:100%; box-shadow:0 0 0 0 rgb(76 175 80 / 100%); animation:pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); }

@keyframes pulse 					{ to { box-shadow: 0 0 0 20px rgba(232, 76, 61, 0); } }