@import "lib";

/* ========================================================================= */

@page-primary-width:        688px;
@page-secondary-width:      @wrap-width - @page-primary-width;

@banner-height-sm:          575px;
@banner-height-lg:          685px;
@banner-content-offset:     100px;
@banner-height-inner-sm:    (@banner-height-sm - @banner-content-offset);
@banner-height-inner-lg:    (@banner-height-lg - @banner-content-offset);

/* ========================================================================= */

main.body
{
	padding-top: 0;
	margin-top: 0;
}

.page-banner
{
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: @banner-content-offset;

	.blocks
	{
		display: flex;
		align-items: center;
		min-height: @banner-height-inner-sm;
	}

	@media screen and (min-height: 768px)
	{
		.blocks
		{
			min-height: @banner-height-inner-lg;
		}
	}
}

#page-banner-logo
{
	display: block;
	width: 390px;
}

.page-content
{
	display: grid;
	grid-template-columns: @page-primary-width @page-secondary-width;
	max-width: @wrap-width;
	margin: 0 auto 30px;

	h2
	{
		font-weight: 500;
		margin-top: 1.25em;
		text-transform: uppercase;

		b
		{
			font-weight: 700;
		}
	}
}

.page-primary
{
	background-color: #FFF;
	margin-top: -@banner-content-offset;
	padding: 30px;

	.entry-title
	{
		text-transform: uppercase;
		font-weight: 700;
		line-height: 1em;
		margin-bottom: 1em;

		small
		{
			font-weight: 300;
			font-size: .7em;
		}
		span
		{
			display: block;
		}
	}

	h2
	{
		line-height: 1.1em;
		margin-bottom: 1em;
	}

	img
	{
		display: block;
		max-width: 100%;
		margin-bottom: 2.2em;
		margin-top: 3.2em;

		&.over-width
		{
			// max-width: initial;
			max-width: @page-primary-width;
			min-width: 100%;
			width: auto;
			margin-left: -30px;
			margin-right: -30px;
		}
	}
}

.page-secondary
{
	padding: 30px;
	padding-right: 0;

	h2
	{
		font-weight: 300;
		line-height: 1em;
		margin-bottom: 1em;
	}
}

.page-content-session
{}

.sidebar-cta-btn
{
	display: block;
	background-color: @sysquali-verde;
	border-radius: 50px;
	box-shadow: 0 0 0 3px #FFF;
	color: #FFF;
	font-size: 1.6em;
	font-family: @font-title;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.1em;
	padding: 15px;
	text-decoration: none;
	transition: 150ms all;

	&:hover,
	&:focus
	{
		background-color: darken(@sysquali-verde, 8%);
	}
}

.outras-solucoes
{
	border-top: 1px solid #C5C5C5;
	margin-top: 30px;
}
.outras-solucoes-item
{
	background-color: #FFF;
	display: block;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 30px;
	text-transform: uppercase;
	font-family: @font-title;
	text-align: center;
	text-decoration: none;
	color: #333;
	transition: 150ms all;

	&:last-child
	{
		margin-bottom: 0;
	}

	&:focus,
	&:hover
	{
		box-shadow: 0 0 0 1px @sysquali-verde inset;

		.outras-solucoes-item-btn
		{
			background-color: @sysquali-verde;
			box-shadow: none;
			color: #FFF;
		}
	}

	img
	{
		display: block;
		margin: 0 auto 10px;
		// width: 100%;
		width: auto;
		max-height: 130px;
	}
}
.outras-solucoes-item-desc
{
	display: block;
}
.outras-solucoes-item-btn
{
	display: inline-block;
	width: auto;
	margin: 10px auto 0;
	font-size: .9em;
	letter-spacing: 1px;
	padding: 5px 15px;
	color: @sysquali-verde;
	box-shadow: 0 0 0 1px currentColor inset;
	border-radius: 50px;
	transition: 150ms all;
}


.conteudo-session
{
	display: block;

	p
	{
		&:last-child
		{
			// margin-bottom: 0;
		}
	}

	.btn-cta
	{
		background-color: darken(@sysquali-verde, 5%);
		box-shadow: 0 0 0 3px #FFF;
		color: #FFF;
		padding: 15px 20px;
		display: inline-flex;
		margin: 2em auto;
		text-align: center;
		border-radius: 50px;
		text-decoration: none;
		font-family: @font-title;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: .5px;
		font-size: 1.2em;
		min-width: 300px;
		justify-content: center;
		.wk-anim;

		&:hover,
		&:focus
		{
			background-color: darken(@sysquali-verde, 15%);
		}
	}
}

.conteudo-session.-intro
{
	p
	{
		font-style: italic;
		font-size: 1.2em;
	}
}
.conteudo-session.-cta,
.conteudo-session.-cta2
{}
.conteudo-session.-desconto-usuarios-sysquali
{
	background-color: @cor-texto-azul;
	color: #FFF;
	margin: 30px -30px 0;
	padding: 30px;

	h2
	{
		// color: rgba(0,0,0,.7);
		color: #FFF;
		margin-top: 0;
	}
	p:last-child
	{
		margin-bottom: 0;
	}
}


#sysrating
{
	.page-banner
	{
		background-color: darken(@sysrating-cor-1, 10%);
	}
	.page-primary
	{
		h2
		{
			color: @sysrating-cor-1;
		}
	}
	.conteudo-session.-intro
	{
		p
		{
			color: @sysrating-cor-1;
		}
	}
	.conteudo-session.-desconto-usuarios-sysquali
	{
		h2
		{
			color: #FFF;
		}
	}
}


#syspat
{
	@syspat-cor-1-txt: darken(@syspat-cor-1, 20%);

	.page-banner
	{
		background-color: @syspat-cor-1-txt
	}
	.page-primary
	{
		h2
		{
			color: @syspat-cor-1-txt
		}
	}
	.conteudo-session.-intro
	{
		p
		{
			color: @syspat-cor-1-txt
		}
	}
}