/* ============================================
   PREVITEC - Paleta de Cores Oficial
   ============================================ */
:root {
	/* Cores Principais */
	--previtec-primary: #00CCA3;
	--previtec-secondary: #7ED957;
	--previtec-dark: #1a1a1a;
	--previtec-light: #f8f9fa;

	/* Gradientes */
	--previtec-gradient: linear-gradient(135deg, #00CCA3 0%, #7ED957 100%);
	--previtec-gradient-reverse: linear-gradient(135deg, #7ED957 0%, #00CCA3 100%);

	/* Sobrescrever Canvas */
	--cnvs-themecolor: #00CCA3;
	--cnvs-themecolor-rgb: 0, 204, 163;
	--cnvs-gradient-color: var(--previtec-gradient);

	/* Tipografia */
	--cnvs-body-font: 'DM Sans', sans-serif;
	--previtec-heading-font: 'DM Sans', sans-serif;

	/* Dark Mode */
	--previtec-dark-bg: #0d1117;
	--previtec-dark-surface: #161b22;
	--previtec-dark-text: #c9d1d9;
}

/* ============================================
   BUTTONS COM GRADIENTE PREVITEC
   ============================================ */
.button-previtec,
.button.button-previtec {
	background: var(--previtec-gradient);
	color: #fff !important;
	border: none;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.button-previtec::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: var(--previtec-gradient-reverse);
	transition: left 0.5s ease;
	z-index: -1;
}

.button-previtec:hover::before {
	left: 0;
}

.button-previtec:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 204, 163, 0.4);
}

/* ============================================
   GRADIENT TEXT
   ============================================ */
.gradient-text-previtec {
	background: var(--previtec-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ============================================
   HEADER CUSTOMIZADO
   ============================================ */
#header {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0, 204, 163, 0.1);
}

.dark-mode #header {
	background: rgba(22, 27, 34, 0.95);
	border-bottom: 1px solid rgba(0, 204, 163, 0.2);
}

/* Menu hover effect */
.primary-menu a:hover {
	color: var(--previtec-primary) !important;
}

/* ============================================
   SECTIONS COM BACKGROUND GRADIENTE
   ============================================ */
.section-gradient-previtec {
	background: var(--previtec-gradient);
	color: #fff;
}

.section-gradient-light {
	background: linear-gradient(135deg, rgba(0, 204, 163, 0.1) 0%, rgba(126, 217, 87, 0.1) 100%);
}

/* ============================================
   CARDS COM EFEITO GLASSMORPHISM
   ============================================ */
.card-previtec {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 204, 163, 0.2);
	border-radius: 20px;
	transition: all 0.3s ease;
}

.card-previtec:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 204, 163, 0.2);
	border-color: var(--previtec-primary);
}

.dark-mode .card-previtec {
	background: rgba(22, 27, 34, 0.9);
	border-color: rgba(0, 204, 163, 0.3);
}

/* ============================================
   DARK MODE TOGGLE
   ============================================ */
.dark-mode-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	background: var(--previtec-gradient);
	color: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	transition: all 0.3s ease;
	box-shadow: 0 5px 15px rgba(0, 204, 163, 0.3);
}

.dark-mode-toggle:hover {
	transform: rotate(180deg) scale(1.1);
}

/* Dark Mode Styles */
body.dark-mode {
	background: var(--previtec-dark-bg);
	color: var(--previtec-dark-text);
}

.dark-mode #wrapper {
	background: var(--previtec-dark-bg);
}

.dark-mode .bg-white {
	background: var(--previtec-dark-surface) !important;
}

/* ============================================
   ANIMAÇÕES PERSONALIZADAS
   ============================================ */
@keyframes float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-20px);
	}
}

.float-animation {
	animation: float 3s ease-in-out infinite;
}

@keyframes gradient-shift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.gradient-animated {
	background: linear-gradient(270deg, #00CCA3, #7ED957, #00CCA3);
	background-size: 200% 200%;
	animation: gradient-shift 3s ease infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
	.dark-mode-toggle {
		width: 40px;
		height: 40px;
		font-size: 1.2rem;
	}
}

.h-100 {
	height: 100px !important;
}

.h-110 {
	height: 110px !important;
}

.h-120 {
	height: 120px !important;
}

.h1>span:not(.nocolor):not(.badge),
.h2>span:not(.nocolor):not(.badge),
.h3>span:not(.nocolor):not(.badge),
.h4>span:not(.nocolor):not(.badge),
.h5>span:not(.nocolor):not(.badge),
.h6>span:not(.nocolor):not(.badge),
h1>span:not(.nocolor):not(.badge),
h2>span:not(.nocolor):not(.badge),
h3>span:not(.nocolor):not(.badge),
h4>span:not(.nocolor):not(.badge),
h5>span:not(.nocolor):not(.badge),
h6>span:not(.nocolor):not(.badge) {
	color: #fff;
}

.hero-with-bg .hover\:bg-white:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(105 202 92);
}

.gradient-text-2 {
    background: linear-gradient(135deg, var(--previtec-primary), var(--previtec-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
    font-family: var(--cnvs-secondary-font) !important;
    padding: 0 5px;    
}
.opacity-03 {
    opacity: .03;
}