/* ========== VARIÁVEIS CSS - CORES ========== */
:root {
	/* LIGHT MODE - Cores Principais */
	--primary-blue: #007AFF;
	--primary-dark: #201C1C;
	--primary-black: #000;
	--primary-white: #FFF;
	--light-gray: #F1F0F0;
	--medium-gray: #333;
	--text-gray: #666767;
	--border-gray: #EDEDED;
	--hover-gray: #e0e0e0;
	--active-gray: #d0d0d0;
	--subtitle-gray: #A8A8A8;
	--dark-text: #393737;
	--light-border: #9CA3AF;
	--background-light: #F3F4F6;
	
	/* LIGHT MODE - Transparências */
	--shadow-light: rgba(0, 0, 0, 0.1);
	--shadow-medium: rgba(0, 0, 0, 0.2);
	--shadow-strong: rgba(0, 0, 0, 0.3);
	--white-overlay: rgba(255, 255, 255, 0.7);
	--white-full: rgba(255, 255, 255, 1);
	--white-semi: rgba(255, 255, 255, 0.6);
	--white-light: rgba(255, 255, 255, 0.4);
	--dark-overlay: rgba(32, 28, 28, 0.96);
	--dark-semi: rgba(32, 28, 28, 0.6);
	--dark-light: rgba(32, 28, 28, 0.4);
	--white-minimal: rgba(255, 255, 255, 0.1);
	--white-hover: rgba(255, 255, 255, 0.2);
}

body.dark-mode {
	/* DARK MODE - Cores Principais */
	--primary-blue: #007AFF;
	--primary-dark: #1C1818;
	--primary-black: #FFF;
	--primary-white: #201C1C;
	--light-gray: #201C1C;
	--medium-gray: #FFF;
	--text-gray: #9CA3AF;
	--border-gray: #343232;
	--hover-gray: #797777;
	--active-gray: #343232;
	--subtitle-gray: rgba(255, 255, 255, 0.6);
	--dark-text: #FFF;
	--light-border: #9CA3AF;
	--background-light: #201C1C;
	
	/* DARK MODE - Transparências */
	--shadow-light: rgba(0, 0, 0, 0.3);
	--shadow-medium: rgba(0, 0, 0, 0.2);
	--shadow-strong: rgba(0, 0, 0, 0.1);
	--white-overlay: rgba(32, 28, 28, 0.96);
	--white-full: rgba(32, 28, 28, 1);
	--white-semi: rgba(255, 255, 255, 0.6);
	--white-light: rgba(255, 255, 255, 0.4);
	--dark-overlay: rgba(255, 255, 255, 0.1);
	--dark-semi: rgba(255, 255, 255, 0.6);
	--dark-light: rgba(255, 255, 255, 0.4);
	--white-minimal: rgba(32, 28, 28, 0.1);
	--white-hover: rgba(32, 28, 28, 0.2);
}

/* ========== RESET CSS ========== */
* {
	margin:0px;
	padding:0px;
	box-sizing:border-box;
	cursor:default;
	font-family:"Helvetica";
	text-decoration:none;
}
svg, svg * {
	cursor: inherit;
}
*:focus {
    outline:none;
}
html {
	scroll-behavior: smooth;
}
body {
	position:relative;
	display:flex;
	flex-direction:column;
	touch-action: pan-x pan-y;
}

/* MENU PRINCIPAL */
#menuContent {
	width: 100%;
	height: 100%;
	background: var(--light-gray);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 10px;
	padding: 5px 20px;
	transition: width 0.3s ease-in-out, box-shadow 0.3s ease;
	box-shadow: 0 4px 20px var(--shadow-light);
}

#menuContent.no-shadow {
	box-shadow: none;
}

#menuMain {
	position: fixed;
	top: 20px;
	left: 20px;
	width: calc(100% - 40px);
	height: 80px;
	z-index: 1000;
	display: flex;
	justify-content: center;
	transition: transform 0.3s ease-in-out;
}

#menuLogo {
	flex: 0 0 auto;
	font-weight: bold;
	font-size: 18px;
	color: var(--medium-gray);
	padding: 8px 0;
}
#menuLogo img {
	height: 60px;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

#menuNavigation {
	margin: 0px 45px;
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 50px;
	transition: opacity 0.1s ease-out;
}

#menuNavigation.menu-hidden {
	opacity: 0;
	pointer-events: none;
}

#menuNavigation > div {
	transition: all 0.3s ease;
	cursor: pointer;
	font-weight: 500;
	font-size: 1.25em;
	color: var(--medium-gray);
}

#menuNavigation > div:hover {
	color: var(--primary-blue);
}

#menuContact {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
}

/* Estilos específicos para cada elemento do menu contact */

/* Toggle Switch (Dark/Light) - Estilo iPhone */
#darkLightToggle {
	width: 48px;
	height: 24px;
	background: var(--hover-gray);
	border-radius: 12px;
	position: relative;
	cursor: pointer;
	transition: background 0.3s ease;
}

#darkLightToggle:hover {
	background: var(--active-gray);
}

#darkLightToggle.active {
	background: var(--primary-blue);
}

#toggleSlider {
	width: 20px;
	height: 20px;
	background: var(--primary-white);
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: transform 0.3s ease;
	box-shadow: 0 2px 4px var(--shadow-medium);
}

#darkLightToggle.active #toggleSlider {
	transform: translateX(24px);
}

/* Botões de idioma */
#langPt, #langEn {
	width: 48px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white-overlay);
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 500;
	color: var(--medium-gray);
	font-size: 14px;
}

#langPt:hover, #langEn:hover {
	background: var(--white-full);
	box-shadow: 0 2px 8px var(--shadow-light);
}

#langPt.active, #langEn.active {
	background: var(--primary-blue);
	color: var(--primary-white);
}

/* Botão Contact - Referência única #contactButton */
#contactButton {
	height: 42px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid var(--primary-blue);
	border-radius: 21px;
	position: relative;
	overflow: hidden;
}
#contactButton * {
	cursor: inherit;
}

#contactText {
	font-weight: 600;
	color: var(--medium-gray);
	font-size: 14px;
}

#contactIcon {
	width: 24px;
	height: 18px;
	background: transparent;
	border: 2px solid var(--primary-blue);
	border-radius: 3px 3px 3px 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	position: relative;
	overflow: visible;
	padding-bottom: 2px;
}

#contactIcon::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 0 0;
	border-color: var(--primary-blue) transparent transparent transparent;
}

#contactIcon::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 6px 0 0;
	border-color: var(--primary-white) transparent transparent transparent;
}

#iconDot1, #iconDot2, #iconDot3 {
	width: 3px;
	height: 3px;
	background: var(--primary-blue);
	border-radius: 50%;
	transition: transform 0.3s ease;
}

/* Efeito de onda nos pontos quando hover no contactButton */
#iconDot1.wave-active {
	animation: waveEffect 1.2s ease-in-out 2;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}

#iconDot2.wave-active {
	animation: waveEffect 1.2s ease-in-out 2;
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}

#iconDot3.wave-active {
	animation: waveEffect 1.2s ease-in-out 2;
	animation-delay: 0.4s;
	animation-fill-mode: forwards;
}

@keyframes waveEffect {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.2);
		opacity: 1;
	}
}

/* Menu Expand (3 pontos verticais) - Referência única #menuExpand */
#menuExpand {
	width: 24px;
	height: 35px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0;
	cursor: pointer;
	transition: transform 0.4s ease-out;
}

#menuExpand.menu-rotated {
	transform: rotate(225deg);
}

#dot1, #dot2, #dot3 {
	width: 6px;
	height: 6px;
	background: var(--medium-gray);
	border-radius: 50%;
	transition: all 0.3s ease;
}

/* BANNER PRINCIPAL */
#bannerMain {
	width: 100%;
	height: calc(100vh - 100px);
	position: relative;
	overflow: hidden;
	background: var(--primary-black);
	z-index: 1;
}

#bannerMain video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	object-fit: cover;
	z-index: 0;
}

/* Overlay opcional para melhor contraste */
#bannerMain::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--shadow-strong);
	z-index: 2;
}

/* Texto sobre o vídeo */
#bannerText {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	padding: 20px 0px 20px 35%;
	z-index: 3;
	width: 1400px;
	max-width: 100%;
	text-align: right;
}

/* Título do banner */
#bannerTitle {
	font-size: 3.5em;
	font-weight: 300;
	margin-bottom: 10px;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: right;
}

/* Efeito do cursor piscante no banner */
#bannerEffect {
	animation: blink 1s infinite;
	color: var(--primary-blue);
	font-weight: 400;
}

@keyframes blink {
	0%, 50% {
		opacity: 1;
	}
	51%, 100% {
		opacity: 0;
	}
}

/* Descrição do banner */
#bannerDesc {
	font-size: 18px;
	font-weight: 300;
	color: var(--white-semi);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	text-align: right;
}

/* Container dos pontos do banner */
#bannerDots {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Pontos individuais do banner */
#bannerDot1, #bannerDot2, #bannerDot3 {
	width: 7px;
	height: 7px;
	background: var(--white-semi);
	border-radius: 50%;
}

/* Linha cinza do banner */
#bannerLine {
	width: 160px;
	height: 1px;
	background: var(--white-light);
}

/* Label do banner */
#bannerLabel {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
}

/* Conteúdo do banner */
#bannerContent {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
}

body.menu-open {
	overflow: hidden;
}

/* MENU EXPANDIDO OVERLAY */
#menuOpenMain {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--light-gray);
	z-index: 999;
	transform: translateY(-100%);
	transition: transform 0.4s ease-out;
}

#menuOpenMain.open {
	transform: translateY(0);
}

body.dark-mode #menuOpenMain {
	background: var(--primary-white);
}

/* DARK MODE STYLES */
body.dark-mode #menuContent {
	background: var(--primary-white);
	box-shadow: 0 4px 20px var(--shadow-light);
}

body.dark-mode #menuContent.no-shadow {
	box-shadow: none;
}

body.dark-mode #menuLogo {
	color: var(--primary-black);
}

body.dark-mode #menuNavigation > div {
	color: var(--primary-black);
}

body.dark-mode #menuNavigation > div:hover {
	color: var(--primary-blue);
}

body.dark-mode #contactText {
	color: var(--primary-black);
}

body.dark-mode #langPt, 
body.dark-mode #langEn {
	background: var(--white-minimal);
	color: var(--primary-black);
}

body.dark-mode #langPt:hover, 
body.dark-mode #langEn:hover {
	background: var(--white-hover);
}

body.dark-mode #langPt.active, 
body.dark-mode #langEn.active {
	background: var(--primary-blue);
	color: var(--primary-white);
}

body.dark-mode #dot1, 
body.dark-mode #dot2, 
body.dark-mode #dot3 {
	background: var(--primary-black);
}

body.dark-mode #contactIcon::after {
	border-color: var(--dark-overlay) transparent transparent transparent;
}

/* CARDS SECTION */
#cardsMain {
	width: 100%;
	background: var(--primary-white);
	padding: 60px 0;
	position: relative;
	z-index: 10;
}

body.dark-mode #cardsMain {
	background: var(--primary-white);
}

#cardsContent {
	width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 30px;
	flex-wrap: wrap;
	max-width: calc(100% - 40px);
}

.cardsItem {
	flex: 1;
	border: 1px solid var(--border-gray);
	border-radius: 5px;
	background: var(--primary-white);
	position: relative;
	padding: 20px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	transition: border-color 0s, box-shadow 0.3s ease;
	box-shadow: 0 2px 8px var(--shadow-light);
}

.cardsItem:hover {
	border-color: var(--primary-white);
}

body.dark-mode .cardsItem {
	background: var(--primary-white);
	border-color: var(--border-gray);
	box-shadow: 0 2px 8px var(--shadow-medium);
}

body.dark-mode .cardsItem:hover {
	border-color: var(--hover-gray);
}

/* CARDS CONTENT STYLES */
.cardsTitle {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15px;
}

.cardFsirtLetter {
	font-size: 8em;
	font-weight: 900;
	color: var(--medium-gray);
	line-height: 1;
	text-align: left;
	/* Efeito de imagem na letra - padrão SUPORTE */
	background-image: url('../img/LETTERS/SUPORTE.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/* Fallback para navegadores que não suportam background-clip: text */
	color: transparent;
}

/* Segundo card - Infrastructure (INFRA.png) */
.cardsItem:nth-child(2) .cardFsirtLetter {
	background-image: url('../img/LETTERS/INFRA.png');
}

/* Terceiro card - Development (DEV.png) */
.cardsItem:nth-child(3) .cardFsirtLetter {
	background-image: url('../img/LETTERS/DEV.png');
}

/* Fallback para navegadores sem suporte ao background-clip */
@supports not (background-clip: text) {
	.cardFsirtLetter {
		color: var(--medium-gray);
		background: none;
		-webkit-text-fill-color: initial;
	}
	
	body.dark-mode .cardFsirtLetter {
		color: var(--primary-black);
	}
}

/* Dark mode - mantém o efeito de imagem com filtro preto e branco */
body.dark-mode .cardFsirtLetter {
	background-image: url('../img/LETTERS/SUPORTE.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

/* Dark mode - Segundo card - Infrastructure com filtro preto e branco */
body.dark-mode .cardsItem:nth-child(2) .cardFsirtLetter {
	background-image: url('../img/LETTERS/INFRA.png');
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

/* Dark mode - Terceiro card - Development com filtro preto e branco */
body.dark-mode .cardsItem:nth-child(3) .cardFsirtLetter {
	background-image: url('../img/LETTERS/DEV.png');
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

.cardDesc {
	color: var(--subtitle-gray);
	font-size: 1.5em;
	font-weight: 700;
	text-align: right;
	margin-top: 10px;
	text-transform: uppercase;
}

body.dark-mode .cardDesc {
	color: var(--dark-text);
}

/* CARDS SUBTITLE STYLES */
.cardsSubTitle {
	margin: 60px 0px 0px 0px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.cardsSubTitleText {
	color: var(--primary-black);
	font-size: 1.5em;
	font-weight: 400;
	text-align: left;
	line-height: 1.2;
}

.cardsSubTitlePic {
	width: 15px;
	height: 15px;
	border-top: 2px solid var(--primary-black);
	border-right: 2px solid var(--primary-black);
	align-self: flex-start;
}

body.dark-mode .cardsSubTitleText {
	color: var(--primary-black);
}

body.dark-mode .cardsSubTitlePic {
	border-top-color: var(--primary-black);
	border-right-color: var(--primary-black);
}

/* CARDS KEYWORDS STYLES */
.cardsKeywordsContent {
	margin: 30px 0px 15px 0px;
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex-wrap: wrap;
}

.cardsKeywordsItens {
	background: var(--background-light);
	color: var(--text-gray);
	padding: 6px;
	border-radius: 4px;
	font-size: 0.9em;
	white-space: nowrap;
}

body.dark-mode .cardsKeywordsItens {
	background: var(--background-light);
	color: var(--text-gray);
	border: 1px solid var(--light-border);
}

/* CARDS DESCRIPTION STYLES */
.cardsDesc {
	color: var(--primary-black);
	font-size: 1.1em;
	line-height: 1.4;
	margin-top: auto;
	flex-grow: 1;
}

body.dark-mode .cardsDesc {
	color: var(--primary-black);
}

/* PARCEIROS SECTION */
#parceirosMain {
	width: 100%;
	background: var(--primary-white);
	padding: 60px 0;
	position: relative;
	z-index: 10;
}

body.dark-mode #parceirosMain {
	background: var(--primary-white);
}

body.dark-mode #faleConoscoMain {
	background: var(--primary-white);
}

body.dark-mode #faleConoscoContent {
	background: var(--primary-dark);
}

body.dark-mode #faleConoscoDesc {
	color: var(--white-semi);
}

body.dark-mode #faleConoscoDot1, 
body.dark-mode #faleConoscoDot2, 
body.dark-mode #faleConoscoDot3 {
	background: var(--white-semi);
}

body.dark-mode #faleConoscoLine {
	background: var(--white-light);
}

body.dark-mode #faleConoscoTitle,
body.dark-mode #faleConoscoText {
	color: var(--primary-black);
}

#parceirosContent {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
	overflow: hidden;
}

.parceirosCarrossel {
	display: flex;
	align-items: center;
	animation: carrosselMove 60s linear infinite;
	gap: 160px;
	will-change: transform;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.parceiroItem {
	flex-shrink: 0;
	width: 160px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease;
}

.parceiroItem:hover {
	transform: scale(1.1);
}

.parceiroItem img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(70%);
	transition: filter 0.3s ease;
}

.parceiroItem:hover img {
	filter: grayscale(0%);
}

@keyframes carrosselMove {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Fale Conosco Section */
#faleConoscoMain {
	width: 100%;
	background: linear-gradient(to bottom, var(--primary-white) 50%, var(--primary-dark) 50%);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 20px;
	position: relative;
	z-index: 20;
}

#faleConoscoContent {
	width: 1400px;
	max-width: 100%;
	background: var(--primary-white);
	border-radius: 35px;
	box-shadow: 0 10px 30px var(--shadow-light);
	padding: 40px;
	position: relative;
	z-index: 21;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

/* Coluna esquerda - Textos */
#faleConoscoLeft {
	flex: 0 0 60%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Descrição com dots e linha */
#faleConoscoDesc {
	font-size: 18px;
	font-weight: 300;
	color: var(--dark-semi);
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	text-align: left;
}

/* Container dos pontos */
#faleConoscoDots {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Pontos individuais */
#faleConoscoDot1, #faleConoscoDot2, #faleConoscoDot3 {
	width: 7px;
	height: 7px;
	background: var(--dark-semi);
	border-radius: 50%;
}

/* Linha */
#faleConoscoLine {
	width: 160px;
	height: 1px;
	background: var(--dark-light);
}

/* Label */
#faleConoscoLabel {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
}

/* Título */
#faleConoscoTitle {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--medium-gray);
	margin: 20px 0 15px 0;
	line-height: 1.2;
}

/* Conteúdo */
#faleConoscoText {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--primary-dark);
}

/* Coluna direita - Botão */
#faleConoscoRight {
	flex-shrink: 0;
}

/* Botão Let's talk */
#faleConoscoButton {
	height: 42px;
	display: flex;
	align-items: center;
	padding: 0 24px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid #007AFF;
	border-radius: 21px;
	background: transparent;
	font-weight: 600;
	color: var(--primary-blue);
	font-size: 14px;
}

#faleConoscoButton:hover {
	background: var(--primary-blue);
	color: var(--primary-white);
}

/* BOTÃO SCROLL BACK TO TOP */
#menuScrollBack {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: var(--primary-white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1001;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	box-shadow: 0 4px 15px var(--shadow-light);
}
#menuScrollBack * {
	cursor: inherit;
}

#menuScrollBack.show {
	opacity: 1;
	visibility: visible;
}

#menuScrollProgress {
	position: absolute;
	top: -3px;
	left: -3px;
	width: 56px;
	height: 56px;
	pointer-events: none;
}

#menuScrollProgress svg {
	width: 100%;
	height: 100%;
}

body.dark-mode #menuScrollBack {
	background: var(--primary-white);
	box-shadow: 0 4px 15px var(--shadow-light);
}

body.dark-mode #menuScrollProgress circle:first-child {
	stroke: var(--white-minimal);
}

body.dark-mode #menuScrollBack svg path {
	stroke: var(--primary-black);
}