/* Paleta de cores do tema */
:root {
	--hpe-green: #60A6F8;
	--hpe-dark: #F5F5F5;
	--light-gray: #f4f4f4;
	--white: #ffffff;
	--text-dark: #333333;
	--text-darkMenu: #333333;
	--font-stack: "Helvetica", "Arial", sans-serif;
}

/* Reset básico */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-stack);
	color: var(--text-dark);
	scroll-behavior: smooth;
}

/* Espaçamento padrão para títulos */
h1, h2, h3, p {
	margin-bottom: 1rem;
}

/* Containers */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* Header / Menu */
.header {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: var(--hpe-dark);
	border-bottom: 1px solid var(--light-gray);
	z-index: 999;
	height: 90px;
}

.header .container {
	height: 100%;
	display: flex;
	align-items: center;
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	flex: 1;
	position: relative;
}

.nav .logo {
	font-size: 1.2rem;
	color: var(--hpe-green);
	text-decoration: none;
	font-weight: bold;
	margin-left: 0;
}


.nav .logo img {
	height: 35px;
	display: block;
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--hpe-green);
	font-size: 1.5rem;
	cursor: pointer;
}
.nav ul {
	list-style: none;

	display: flex;
	gap: 1.5rem;
	height: 100%;
	align-items: center;
}

.nav ul li a {
	text-decoration: none;
	color: var(--text-darkMenu);
	font-weight: 500;
}

.nav ul li a:hover {
	color: var(--hpe-green);
}

/* Seções gerais */
.section {
	width: 100%;
	padding: 100px 0;
	scroll-margin-top: 90px;
}

/* Seções com fundo escuro */
.section-dark {
	background: var(--hpe-dark);
	color: var(--text-dark);
}

/* Seções com fundo claro */
.section-light {
	background: var(--white);
	color: var(--text-dark);
}

/* Hero */
.hero {
	position: relative;
	height: 600px;
	margin-top: 90px;
	color: var(--white);
	overflow: hidden;
	scroll-margin-top: 90px;
}

.hero .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.hero .slide .container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}

.hero-content {
	width: 50%;
	text-align: left;
	max-width: 600px;
	margin: 0;
}

.hero-content h1 {
	font-size: 3rem;  
	margin-bottom: 1rem;
}

.hero-content p {
	font-size: 1.25rem;
	margin-bottom: 2rem;
}

.hero-content .version-info {
	font-size: 1rem;
	margin-top: 1rem;
	color: var(--white);
}

.btn {
	display: inline-block;
	background: var(--hpe-green);
	color: var(--white);
	padding: 0.75rem 1.5rem;
	text-decoration: none;
	border-radius: 4px;
}

.hero-overlay {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 640px;
        height: 400px;
}

.hero-overlay img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1s ease-in-out;
}

.hero-overlay img.active {
        opacity: 1;
}

.btn:hover {
	background: #4A8FE0;
}

.btn-download {
	background: #1E3A8A;
	border: none;
}

.btn-download:hover {
	background: #163d77;
}

#download-email {
	padding: 0.5rem;
	border: 1px solid var(--light-gray);
	border-radius: 4px;
	width: 100%;
}

.download-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);        
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.download-modal.hidden {
	display: none;
}

.download-modal-content {
	background: var(--white);
	padding: 2rem;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	text-align: center;
	min-width: 300px;
}

.download-modal-content h2 {
        margin: 0 0 0.5rem;
        font-size: 1.25rem;
}

.download-modal-content .btn-download {
	margin-top: 0.5rem;
}

.download-skip {
	margin-top: 0.5rem;
	font-size: 0.6rem;
	color: var(--text-dark);
}

.download-skip:hover {
	text-decoration: underline;
}


.cards {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2rem;
}

.card {
	flex: 1 1 calc(33.333% - 1rem);
	min-width: 250px;
	background: #fafafa;
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
}

.card i {
	font-size: 2rem;
	color: var(--hpe-green);
	margin-bottom: 0.5rem;
}
.card:hover {
	transform: scale(1.03);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Formulário de contato */
#contato .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
}
.contato-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 600px;
        width: 100%;
        margin: 2rem auto;
}

.contato-form label {
        font-weight: 600;
        text-align: left;
        align-self: flex-start;
}

.contato-form input,
.contato-form textarea {
	padding: 0.75rem;
	border: 1px solid var(--light-gray);
	border-radius: 4px;
}

.contato-form button {
        background: var(--hpe-green);
        color: var(--white);
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
}

.contato-form button:hover {
        background: #4A8FE0;
}

.contato-status {
        margin-top: 1rem;
        font-weight: 600;
}

/* Ajustes de espaçamento na seção Sobre */
#sobre h3 {
	margin-top: 2rem;
}

#sobre ul,
#sobre ol {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}

/* Ajustes visuais da seção Sobre */
#sobre {
	background-color: #fafafa;
	color: #555;
}

#sobre p {
	line-height: 1.6;
}

#sobre b {
	font-weight: 600;
	color: #444;
}

/* Rodapé */
.footer {
	text-align: center;
	padding: 1rem 0;
}
/* Sobre Nós */
.sobre-bloco {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-bottom: 3rem;
}

.sobre-texto {
	flex: 1;
}

.sobre-imagem {
	flex: 0 0 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sobre-imagem img {
	width: 100%;
	max-width: 300px;
	max-height: 300px;
	height: auto;
	border-radius: 8px;
}

.sobre-bloco.invert {
	flex-direction: row-reverse;
}
@media (max-width: 768px) {
	.menu-toggle {
		display: block;
	}

	.nav ul {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 90px;
		right: 0;
		background-color: var(--hpe-dark);
		width: 200px;
		padding: 1rem;
		align-items: flex-start;
		height: auto;
	}

	.nav ul.open {
		display: flex;
	}

	.hero {
		height: 400px;
	}

	.hero-content {
		width: 100%;
	}

	.hero-content h1 {
		font-size: 2rem;
	}

	.hero-content p {
		font-size: 1rem;
	}

	.hero-content .version-info {
		font-size: 0.9rem;
	}

	.hero-overlay {
		display: none;
	}

	.cards {
		flex-direction: column;
	}

	.card {
		flex: 1 1 100%;
	}
	.sobre-bloco,
	.sobre-bloco.invert {
		flex-direction: column;
	}

       .sobre-imagem {
                flex: 1 1 auto;
        }
}

/* Roadmap */
#roadmap .roadmap-list {
        list-style: none;
        margin-top: 2rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
}

#roadmap .roadmap-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-radius: 8px;
        background: #fafafa;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#roadmap .roadmap-item i {
        font-size: 1.5rem;
        margin-right: 1rem;
}

#roadmap .roadmap-item .status {
        margin-left: auto;
        font-weight: 600;
}

#roadmap .status-queue {
        border-left: 6px solid #f59e0b;
        background: #fff7ed;
}

#roadmap .status-queue i,
#roadmap .status-queue .status {
        color: #b45309;
}

#roadmap .status-testing {
        border-left: 6px solid #3b82f6;
        background: #eff6ff;
}

#roadmap .status-testing i,
#roadmap .status-testing .status {
        color: #1e40af;
}

#roadmap .status-working {
        border-left: 6px solid #10b981;
        background: #ecfdf5;
}

#roadmap .status-working i,
#roadmap .status-working .status {
        color: #065f46;
}