:root {

	--rosa: #E238BB; 
	--azul: #377dff; 
	--preto: #252525; 
	--branco: #FFFFFF;
	--roxo: #8a41ff; 
	--amarelo: #FFFF00;
	--cinza: #616368; 
	--cinza-claro: #f5f5f5; 

	--padding-x-global: 3.25rem;
	--padding-x-global-mobile: 1.5rem;
	--section-y-global: 3rem;
	--section-y-global-mobile: 1rem;

	--Space-Grotesk: "Space Grotesk", sans-serif;
	--Poppins: 'Poppins', sans-serif;

	--h1-fs: 3.5rem;
	--h1-lh: 1.2em;
	--h2-fs: 2.2rem;
	--h2-lh: 1.2em;	
	--h3-fs: 1.8rem;
	--h3-lh: 1.2em;
	--h4-fs: 1.375rem;
	--h4-lh: 1.2em;
	--h5-fs: 1rem;
	--h5-lh: 1.2em;
	--h6-fs: 1.125rem;
	--h6-lh: 1.2em; 

	--h1-fs-mobile: 2rem;
	--h1-lh-mobile: 1.2em;
	--h2-fs-mobile: 1.65rem;
	--h2-lh-mobile: 1.2em;
	--h3-fs-mobile: 2rem;
	--h3-lh-mobile: 1.2em;
	--h4-fs-mobile: 1.375rem;
	--h4-lh-mobile: 1.2em;
	--h5-fs-mobile: 1.25em;
	--h5-lh-mobile: 1.2em;
	--h6-fs-mobile: 1.125rem;
	--h6-lh-mobile: 1.2em; 

	--bs-offcanvas-mobile-padding-x: 2rem
}

/* CSS GERAL */
*{
    border: 0;
    padding: 0;
    box-sizing: border-box;
	color: var(--preto);
}

body{
/* 	background: linear-gradient(90deg, #f0f5ff, #ffffff);	 */
	background-color: #ffffff;	
}

p{
	color: var(--cinza);
}

a{
	transition: 0.5s;
	text-decoration: none;
	color: inherit;
	border: none;
	outline: none;
}

a:hover {
	text-decoration: none;
	color: inherit;
}

button.btn,
button.btn:active,
button.btn:focus,
input:active,
input:focus,
textarea:active,
textarea:focus {
	outline: none !important;
	box-shadow: none !important;
}

button.btn:active {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}

button:focus{
	box-shadow: none!important;
}

.form-control:focus {
	box-shadow: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--Poppins);
	font-weight: 600;
}

.h1, h1 {
	font-size: var(--h1-fs);
	line-height: var(--h1-lh);
}

.h2, h2 {
	font-size: var(--h2-fs);
	line-height: var(--h2-lh);
}

.h3, h3 {
	font-size: var(--h3-fs);
	line-height: var(--h3-lh);
}

.h4, h4 {
	font-size: var(--h4-fs);
	line-height: var(--h4-lh);
}

.h5, h5 {
	font-size: var(--h5-fs);
	line-height: var(--h5-lh);
}

.h6, h6 {
	font-size: var(--h6-fs);
	line-height: var(--h6-lh);
}

@media(max-width: 568px){
	.h2, h2 {
		font-size: var(--h2-fs-mobile);
	}

	.h3, h3 {
		font-size: var(--h3-fs-mobile);
	}
}


/* DEGRADE PADRÃO TITULOS */
/* Classe que aplica o efeito gradiente ao texto */
.gradient-text {
    font-weight: 800;
    background-image: linear-gradient(90deg, #377dff, #8a41ff);
    -webkit-background-clip: text; 
    background-clip: text;
    color: transparent;
    text-rendering: optimizeLegibility;
}

/* BOTÔES PADRÕES */
/* Estilos base do botão */
.cta-button {
	display: inline-flex; 
	align-items: center;
	justify-content: center;
	padding: 0.5rem 2rem;
	color: var(--branco);
	font-size: 1.2rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border: none;
	border-radius: 12px;
	background: linear-gradient(90deg, var(--azul), var(--rosa));
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); 
	cursor: pointer;
	transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.arrow-icon {
	color: var(--branco);
	margin-left: 12px;
	font-size: 1.5rem;
	transition: transform 0.2s ease;
}

.cta-button:hover {
	color: var(--branco);
	transform: scale(1.05);
}

.cta-button:hover .arrow-icon {
	color: var(--branco);
	animation: move-arrow 0.7s infinite ease-in-out;
}

/* Definição da animação da seta (movimento para frente e para trás) */
@keyframes move-arrow {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(8px);
	}
	100% {
		transform: translateX(0);
	}
}

.btn.btn-link {
	padding: 0.5rem 2rem;
	transition: 0.8s;
	border: 2px solid var(--cinza-claro);
	background-color: transparent;
	font-size: 1.2rem;
    font-weight: 600;
	text-decoration: none;
	color: var(--preto);
}

.btn.btn-default:hover, 
.btn.btn-default:focus {
	background-color: var(--roxo);
	color: var(--branco);
    transform: translateY(-0.125rem) translateZ(0);
    box-shadow: 0.5rem 0.5rem 1.5rem rgba(22, 28, 45, 0.1);
}

.btn.btn-link:hover, 
.btn.btn-link:focus {
	border: 2px solid var(--azul);
}

/* MENU DESKTOP */
header {
	background: transparent;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	transition: background-color 0.3s ease;
}

.fixed-top{
	background-color: #ffffff;
	border-bottom: 1px solid #cccc;
}

header .cta-button{
	font-size: 1rem;
}

header .navbar-brand img{
	height: 2.5rem;
}

header .navbar ul{
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
}

header .navbar .menu li {
	margin-left: 2rem;
}

header .navbar .menu li a {
	font-weight: 500;
	transition: 0.3s;
}

header .navbar .menu li a:hover {
	color: var(--roxo);
}

@media(max-width: 998px){
	header .navbar-collapse {
		background-color: #ffffff;
		box-shadow: 5px 5px 10px;
		padding: 1rem;
		border-radius: 1rem;
	}
	
	header .navbar ul{
		display: flex;
		flex-direction:column;
		margin-bottom: 1rem;
	}
	
	header .navbar .menu li {
		margin-left: 0;
	}
	
	.titulo-secao{
		flex-direction: column;
	}
}

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