/*
Theme Name: Theme IPIFS - Psicanálise
Theme URI: 
Author: Geovani Assis Pereira
Author URI: https://geovaniassis.dev.br
Description: Tema oficial do IPIFS - Psicanálise, iniciado em 01 de Outubro de 2025.
Created: 01 de Outubro de 2025
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

/***************************************************************************
       Cores
****************************************************************************

	Preto  		=	#353535
	Branco    	=	#ffffff
	Azul		=	#0F394E
	Beje		= 	#D8B690
	Azul Claro	=	#00b1d7
	Marrom		=	#735545

/***************************************************************************
       Fonts
***************************************************************************/

	@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Exo:ital,wght@0,100..900;1,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/***************************************************************************
       Variáveis
***************************************************************************/

	:root {
		--cor-preto: #353535;
		--cor-branco: #ffffff;
		--cor-azul: #0F394E;
		--cor-beje: #D8B690;
		--cor-marrom: #735545;
		--cor-azul-claro: #00b1d7;

		--fonte-didact: 'Didact Gothic', sans-serif;
		--fonte-exo: 'Exo', sans-serif;
		--fonte-lato: 'Lato', sans-serif;
	}

/***************************************************************************
        All
***************************************************************************/

	html,
	body{margin: 0 !important; overflow-x: hidden;}

	body{ overflow: auto !important; }

	*{
		font-family: var(--fonte-lato);
		margin: 0;
		box-shadow: 0 0 0 0;
		border: 0 none;
		outline: 0;
	} 

	a:hover,
	a:focus,
	a:visited{
		text-decoration: none !important; 
		cursor: pointer;
	}

	button:focus { outline: none; }

	.mobile{ display: none !important;}


	.mrg-bottom-50{ margin-bottom: 50px; }

	.pdd-0{ padding: 0!important; }
	.pdd-0-15{ padding: 0 15px!important; }
	.pdd-50-0{ padding: 50px 0 !important; }

	.pdd-left-75{ padding-left: 75px !important; }
	.pdd-left-85{ padding-left: 85px !important; }
	.pdd-left-90{ padding-left: 90px !important; }
	.pdd-left-100{ padding-left: 100px !important; }
	.pdd-left-125{ padding-left: 125px !important; }
	.pdd-left-150{ padding-left: 150px !important; }

	.owl-theme .owl-nav [class*=owl-]:hover{
		background: transparent !important;
	}
	


	.tituloAzul{
		color: var(--cor-azul);
		font-family: var(--fonte-exo);
		font-size: 24px;
		font-weight: 900;
	}
	.tituloBranco{
		color: #FBECDC;
		font-family: var(--fonte-exo);
		font-size: 24px;
		font-weight: 900;
	}
	.tituloMarrom{
		color: var(--cor-marrom);
		font-family: var(--fonte-exo);
		font-size: 24px;
		font-weight: 900;
	}

	.btnSeta{
		background: var(--cor-branco);
		width: 245px;
		height: 50px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 5px 0 20px;
		color: var(--cor-preto);
		font-family: var(--fonte-didact);
		font-size: 20px;
		transition: all .5s ease;
	}
	.btnSeta:hover{
		transform: scale(1.1);
		color: var(--cor-preto);
	}
	.btnSeta::after{
		content: "➜";
		background: var(--cor-azul-claro);
		color: var(--cor-branco);
		width: 43px;
		height: 43px;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25px;
	}

	.btnAzul{
		background: var(--cor-azul);
		color: var(--cor-branco);
		font-family: var(--fonte-didact);
		border: solid 1px var(--cor-azul);
		font-weight: 100;
		font-size: 18px;
		padding: 4px 37px;
		border-radius: 40px;
		transition: all .5s ease;
	}
	.btnAzul:hover{
		background: var(--cor-branco);
		color: var(--cor-azul);
	}


/***************************************************************************
        Menu - Navbar
***************************************************************************/

	.navbar{
		background: var(--cor-branco);
		border-bottom: solid 1px var(--cor-marrom);
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10;
		height: 103px;
	}

	.navbar .areaTop{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.navbar .menuTop{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding: 0;
		margin: 0;
		gap: 20px;
	}
	.navbar .menuTop li{
		display: block;
		font-family: var(--fonte-didact);
		font-size: 20px;
		font-weight: 300;
	}
	.navbar .menuTop li a{
		color: var(--cor-marrom);
		display: block;
		transform: all .5s ease;
	}
	.navbar .menuTop li a.sub{
	    padding-right: 15px;
	}
	.navbar .menuTop li .sub::after{
		content: "▲";
		font-size: 12px;
		transform: rotate(180deg);
		display: inline-block;
		position: absolute;
		margin: 9px 0 0 1px;
	}
	
	.navbar ul ul{
		padding: 10px;
		position: fixed;
		background: var(--cor-branco);
		border-top: solid 1px var(--cor-marrom);
		display: none;
	}
	.navbar ul li:hover ul{
		display: block;
	}


	.navbar .social{
		display: flex;
		gap: 5px;
	}
	.navbar .social img{
		transition: all .5s ease;
	}
	.navbar .social img:hover{
		transform: scale(1.1);
	}

	.navbar .logo img{
		width: 174px;
		padding: 10px;
	}

	#opt_menu{
		display: none;
	}

	
	.espaco{
		height: 100px;
	}

/***************************************************************************
        Home > Banner
***************************************************************************/

	#banner{
		background-color: var(--cor-branco);
		padding-top: 40px;
	}
	#banner img{
		border-radius: 15px;
	}
	#banner .owl-theme .owl-nav .owl-prev{
		margin: -280px 0 0 0;
		position: absolute;
		left: 50px;

	}
	#banner .owl-theme .owl-nav .owl-next{
		margin: -280px 0 0 0;
		position: absolute;
		right: 50px;

	}
	#banner .owl-prev span,
	#banner .owl-next span{
		color: var(--cor-branco);
		font-size: 80px;
		font-family: var(--fonte-didact);
		opacity: 0.5;
		transition: all .5s ease;
	}

	#banner .owl-prev:hover span,
	#banner .owl-next:hover span{
		opacity: 1;
	}
	
	#banner .owl-theme .owl-dots{
		position: absolute;
		margin: -40px auto 0;
		display: flex;
		justify-self: center;
	}

	#banner .owl-theme .owl-dots .owl-dot span{
		width: 32px;
		height: 5px;
    	background: #ffffff4d;
	}
	#banner .owl-theme .owl-dots .owl-dot.active span,
	#banner .owl-theme .owl-dots .owl-dot:hover span{
    	background: #ffffff;		
	}
/***************************************************************************
        Home > Instituto
***************************************************************************/

	#instituto{
		background-color: var(--cor-branco);		
		padding: 70px 0px 0px;
	}
	#instituto p{
		margin-bottom: 40px;
		color: var(--cor-preto);
		font-size: 15px;
		text-align: justify;
	}
	#instituto img{
		width: 100%;
		max-width: 400px;
	}

	#instituto .foto{
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

/***************************************************************************
        Home > Formação
***************************************************************************/
#formacao {
  background-color: var(--cor-azul);
  padding: 90px 0;
}

#formacao .galeria::after {
    content: "";
    display: block;
    width: 40px;
    height: calc(100% + 40px);
    position: absolute;
    top: -20px;
    right: 0;
    z-index: 9;
    background: var(--cor-azul);
    box-shadow: -20px 0 20px 4px var(--cor-azul);
}
#formacao .galeria .rodar {
  display: flex;
  width: max-content;
  animation: rodar 60s linear infinite;
}
#formacao .galeria .rodar.reverse {
  animation-direction: reverse;
}
#formacao .galeria  .rodar__faixa {
  display: flex;
}

#formacao .galeria .rodar img {
  width: auto;
  height: 220px;
  padding: 5px;
  border-radius: 15px;
}

@keyframes rodar {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

#formacao h3{
	color: var(--cor-branco);
    font-size: 40px;
    font-weight: 900;
	margin: 30px 0;
}
#formacao p{
	color: var(--cor-branco);
	font-family: var(--fonte-didact);
	margin: 0;
	font-size: 15px;
	max-width: 740px;
	text-align: justify;
}



/***************************************************************************
        Home > Mais Instituto
***************************************************************************/

	#maisInstituto{
		background-color: var(--cor-beje);
		padding: 90px 0px;
	}

	#maisInstituto .cardBlc{
		background: #fff;
		border-radius: 10px;
		padding: 20px 32px 30px;
		text-align: center;
		max-width: 300px;
    	margin: 30px auto 0;
		transition: all .5s ease;
	}
	#maisInstituto .cardBlc.blc1{
    	margin: 30px auto 0 0;
	}
	#maisInstituto .cardBlc.blc3{
    	margin: 30px 0 0 auto;
	}




	#maisInstituto .cardBlc:hover{
		transform: scale(1.1);
		box-shadow: 0px 9px 8px 0px #00000052;
	}
	#maisInstituto .cardBlc img{
		max-width: 100%;
		width: 150px;
	}
	#maisInstituto .cardBlc h3{		
		color: var(--cor-azul);
		font-family: var(--fonte-exo);
		font-size: 24px;
		font-weight: 800;
		text-align: left;
		margin: 30px 0;
	}

/***************************************************************************
        Home > Transforma
***************************************************************************/

	#transforma{
		background-color: var(--cor-branco);		
		padding: 0px 0px;
	}
	#transforma .areaTexto{
		font-family: var(--fonte-didact);
		text-align: justify;
		font-size: 15px;
		margin: 20px 0 0 0;
		color: var(--cor-preto);
	}



	#transforma .depoimentos .wrapper {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	#transforma .depoimentos .carousel {
		position: relative;
		width: 100%;
		max-width: 500px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		overflow: clip;
		height: 600px;
	}

	#transforma .depoimentos .carousel__item {
		display: flex;
		align-items: flex-start;
		position: absolute;
		width: 100%;
		padding: 0 12px;
		opacity: 0;
		will-change: transform, opacity;
		animation: carousel-animate-vertical 80s linear infinite;
	}

	#transforma .depoimentos .carousel:hover .carousel__item {animation-play-state: paused;}

	#transforma .depoimentos .carousel__item:nth-child(1) {animation-delay: calc(80s / 9 * -1);}
	#transforma .depoimentos .carousel__item:nth-child(2) {animation-delay: calc(80s / 9 * 0);}
	#transforma .depoimentos .carousel__item:nth-child(3) {animation-delay: calc(80s / 9 * 1);}
	#transforma .depoimentos .carousel__item:nth-child(4) {animation-delay: calc(80s / 9 * 2);}
	#transforma .depoimentos .carousel__item:nth-child(5) {animation-delay: calc(80s / 9 * 3);}
	#transforma .depoimentos .carousel__item:nth-child(6) {animation-delay: calc(80s / 9 * 4);}
	#transforma .depoimentos .carousel__item:nth-child(7) {animation-delay: calc(80s / 9 * 5);}
	#transforma .depoimentos .carousel__item:nth-child(8) {animation-delay: calc(80s / 9 * 6);}
	#transforma .depoimentos .carousel__item:nth-child(9) {animation-delay: calc(80s / 9 * 7);}

	#transforma .depoimentos .carousel__item-head {
		width: 90px;
		height: 90px;
		padding: 14px;
		position: relative;
		margin-right: -45px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50px;
		margin-top: 20px;
	}
	#transforma .depoimentos .carousel__item-head img{
		width: 90px;
		height: 90px;
		border-radius: 50%;
	}

	#transforma .depoimentos .carousel__item-body {
		width: 100%;
		background-color: #FBECDC;
		border-radius: 8px;
		padding: 16px 20px 16px 70px;
	}

	#transforma .depoimentos .title {
	    font-size: 20px;
		color: #735545;
		font-family: var(--fonte-exo);
		font-weight: 900;
		margin: 0;
	}
	
	#transforma .depoimentos span{
		width: 100%;
		display: block;
		font-size: 15px;
		padding-bottom: 30px;
		color: #735545;
	}
	#transforma .depoimentos .texto{
		width: 100%;
		display: block;
		font-size: 15px;
		margin: 0px;
		color: #735545;
	}

@keyframes carousel-animate-vertical {
  0% {
    transform: translateY(100%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  }
  3%, 11.11% {
    transform: translateY(100%) scale(0.7);
    opacity: 0.4;
    visibility: visible;
  }
  14.11%, 22.22% {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
  }
  25.22%, 33.33% {
    transform: translateY(-100%) scale(0.7);
    opacity: 0.4;
    visibility: visible;
  }
  36.33% {
    transform: translateY(-100%) scale(0.5);
    opacity: 0;
    visibility: visible;
  }
  100% {
    transform: translateY(-100%) scale(0.5);
    opacity: 0;
    visibility: hidden;
  }
}

/***************************************************************************
        Home > Contato e Acompanhe
***************************************************************************/

	#contato-acompanhe{
		background: linear-gradient(90deg,rgba(216, 182, 144, 1) 50%, rgba(15, 57, 78, 1) 50%);
	}

	
	#contato-acompanhe .contato{
		padding: 90px 15px 50px 15px;
		background-color: var(--cor-beje);
	}
	#contato-acompanhe .contato form{
		background: #fff;
		width: 100%;
		max-width: 372px;
		padding: 15px;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-top: 23px;
	}
	#contato-acompanhe .contato form p{
		width: 100%;
		margin: 0;
		text-align: center;
	}

	#contato-acompanhe .contato form .wpcf7-list-item-label a{
		color: var(--cor-marrom);
		font-weight: 700;
	}
	#contato-acompanhe .contato form select{
		border: solid 1px var(--cor-marrom);
		width: 100%;
		height: 50px;
		border-radius: 10px;
		margin: 11px 0;
		padding: 0 15px;		
	}
	#contato-acompanhe .contato form .input{
		border: solid 1px var(--cor-marrom);
		width: 100%;
		height: 50px;
		border-radius: 10px;
		margin: 11px 0;
		padding: 0 15px;
	}
	#contato-acompanhe .contato form .wpcf7-submit{
		width: 90%;
		height: 50px;
		border-radius: 10px;
		margin: 11px 0;
		padding: 0 15px;
		background: var(--cor-marrom);
		font-size: 20px;
		color: var(--cor-branco);
	}
	#contato-acompanhe .acompanhe{
		padding: 90px 15px 50px 45px;
		background-color: var(--cor-azul);
	}
	#contato-acompanhe .acompanhe .social{
		gap: 10px;
		display: flex;
		flex-wrap: wrap;
	}
	#contato-acompanhe .acompanhe .social img{
		display: block;
		transition: all .5s ease;
	}
	#contato-acompanhe .acompanhe .social img:hover{
		transform: scale(1.1);
	}
	
	#contato-acompanhe .acompanhe a p{
		color: var(--cor-branco);
		font-family: var(--fonte-didact);
		font-weight: 100;
		font-size: 20px;
		margin: 15px 0;
	}
	#contato-acompanhe .acompanhe iframe{
		border-radius: 15px;
	}


/***************************************************************************
        Footer
***************************************************************************/

footer{
	min-height: 75px;
    display: flex;
    align-items: center;
    background: var(--cor-branco);
    border-top: solid #A1A3A6 4px;
}

footer #logo{
	display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
footer #logo img{
	width: 120px;
}
footer #logo p{
    margin: 0px;
    font-size: 12px;
    line-height: 16.7px;
    color: var(--cor-preto);
    font-weight: 600;
}

footer #links{
	display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}
footer #links a{
	display: block;
    margin: 0px;
    font-size: 12px;
    line-height: 16.7px;
    color: var(--cor-preto);
    font-weight: 600;
}



.tituloInterno{
	background: var(--cor-azul);
    padding: 100px 0;
    color: var(--cor-branco);
    text-transform: lowercase;
}
.textoInterno{
    padding: 100px 0;
}
.textoInterno h2,
.textoInterno h3,
.textoInterno h4,
.textoInterno h5,
.textoInterno h6 {
    color: var(--cor-marrom);
    font-family: var(--fonte-exo);
    font-size: 24px;
    font-weight: 900;
}


/***************************************************************************
        Responsidade
***************************************************************************/

	@media (max-width: 1200px){
		.navbar .menuTop li {
		    font-size: 17px;
		}
		.navbar .social {
		    gap: 3px;
		}
		.navbar .menuTop li .sub::after {
    		margin: 6px 0 0 1px;
		}
	}

	@media (max-width: 991px){

		
		.desktop{ display: none !important;}
		.mobile{ display: block !important;}

		.hamburguer-bt{
			cursor: pointer;
		}
		.hamburguer-bt .hamburguer_line{
			transition: all .5s ease;
			background: var(--cor-azul-claro);
			height: 4px;
			width: 40px;
			margin: 5px 0;
		}
		.hamburguer-bt.ativo .hamburguer-top{
			transform: rotate(45deg);
			margin-top: 15px;
		}
		.hamburguer-bt.ativo .hamburguer-middle{
			opacity: 0;
		}
		.hamburguer-bt.ativo .hamburguer-bottom{
			transform: rotate(-45deg);
			margin-top: -18px;
		}

		#opt_menu{
			display: block;
			position: fixed;
			width: 320px;
			height: calc(100% - 100px);
			margin-top: 102px;
			z-index: 10;
			background: var(--cor-branco);
			right: -100%;
			border-left: solid 2px var(--cor-marrom);
			border-top: solid 2px var(--cor-marrom);
			transition: all .5s ease;
		}
		#opt_menu.ativo{			
			right: 0;
		}
		.fundo_menu{
			position: fixed;
			background: #000000a8;
			width: 100%;
			height: 100%;
			top: 0;
			left: 100%;
			z-index: 9;
			transition: all .5s ease;
		}
		.fundo_menu.ativo{
			left: 0;
		}

		#opt_menu ul{
			padding: 15px;
			margin: 0;
		}
		#opt_menu li{
			display: block;
			height: auto;
			justify-self: anchor-center;
			margin: 30px 0;
		}
		#opt_menu li.menu {
			font-family: var(--fonte-didact);
			font-size: 20px;
			font-weight: 300;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		#opt_menu li.menu a{
			color: var(--cor-marrom);
		}
		
		#opt_menu li a.sub{
			padding-right: 15px;
		}
		#opt_menu li .sub::after{
			content: "▲";
			font-size: 12px;
			transform: rotate(180deg);
			display: inline-block;
			position: absolute;
			margin: 9px 0 0 1px;
		}



		#opt_menu li.social{
			display: flex;
			gap: 20px;
		}


		#maisInstituto .cardBlc {margin: 30px auto 0 !important;}



				
		footer #logo,
		footer #links{
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
			flex-wrap: wrap;
			padding: 15px;
		}
		
		#contato-acompanhe{
			background: linear-gradient(180deg,rgba(216, 182, 144, 1) 50%, rgba(15, 57, 78, 1) 50%);
		}
		#contato-acompanhe .acompanhe {
		    padding: 90px 15px 50px 15px;
		}
		#formacao .galeria::after {
			display: none;
		}
		#formacao {
			padding: 40px 0;
		}
		#formacao .texto{
			max-width: 770px;
			margin: 40px auto 10px;
		}
		#banner .owl-theme .owl-nav .owl-prev {
			margin: -200px 0 0 0;
			position: absolute;
			left: 0px;
		}
		#banner .owl-theme .owl-nav .owl-next {
			margin: -200px 0 0 0;
			position: absolute;
			right: 0px;
		}
	}

	@media (max-width: 767px){
	}

	@media (max-width: 640px){
	}

	@media (max-width: 454px){
	}