/* style.css - Arquivo CSS Completo e Atualizado */
/* ---------- Cabeçalho fixo (sticky) ---------- */
header {
    position: sticky;          /* ou `fixed` se preferir */
    top: 0;                    /* fixa no topo da janela */
    left: 0;
    right: 0;
    background-color: #FFFFFF;/* mantém o fundo branco */
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;             /* garante que fique acima do conteúdo */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* sombra sutil (opcional) */
}

footer {
  bottom: 0;
  left: 0;
  width: 100%;
  background: #FFFFFF;   /* exemplo */
  color: #111;
  padding: 0px 0;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.3;
}

/* Estilos Gerais do Corpo da Página */
body {
    font-family: Arial, Helvetica, sans-serif; /* Fonte padrão, legível */
    background-color: #FFFFFF; /* Fundo branco */
    color: #000000; /* Texto preto */
    margin: 0;
    padding: 0;
    line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */
}

/* Container para centralizar o conteúdo e adicionar padding */
.container {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o container na página */
    padding: 20px; /* Espaçamento interno */
	position: relative;
	z-index: 2; 
}

/* Estilos do Cabeçalho */
header {
    background-color: #FFFFFF; /* Fundo branco para o cabeçalho */
    padding: 15px 0; /* Espaçamento interno superior e inferior */
    border-bottom: 1px solid #eee; /* Linha sutil na parte inferior do cabeçalho */
    display: flex; /* Usa Flexbox para alinhar itens */
    justify-content: space-between; /* Alinha logo à esquerda e navegação à direita */
    align-items: center; /* Centraliza verticalmente os itens */
}

/* Estilos do Logo */
.logo {
    font-size: 2em; /* Tamanho da fonte do logo */
    font-weight: bold; /* Negrito */
    color: #000000; /* Cor preta */
    text-decoration: none; /* Remove sublinhado do link */
    margin-left: 20px; /* Espaçamento à esquerda para o logo */
}

/* Estilos da Navegação Principal */
nav ul {
    list-style: none; /* Remove marcadores de lista */
    margin: 0;
    padding: 0;
    display: flex; /* Usa Flexbox para alinhar os menus horizontalmente */
    margin-right: 20px; /* Espaçamento à direita para a navegação */
}

/* Estilos dos Itens do Menu Principal */
nav ul li {
    position: relative; /* Necessário para posicionar os submenus */
    margin-left: 25px; /* Espaçamento entre os itens do menu principal */
}

/* Estilos dos Links do Menu */
nav ul li a {
    color: #000000; /* Cor preta para os links */
    text-decoration: none; /* Remove sublinhado */
    padding: 10px 0; /* Espaçamento interno */
    display: block; /* Faz o link ocupar toda a largura do item da lista */
    white-space: nowrap; /* Evita quebra de linha em itens de menu */
}

nav ul li a:hover {
    text-decoration: underline; /* Sublinha ao passar o mouse */
}

/* Estilos para os Submenus (2º nível) */
nav ul ul {
    display: none; /* Esconde os submenus por padrão */
    position: absolute; /* Posicionamento absoluto em relação ao item pai */
    background-color: #FFFFFF; /* Fundo branco para o submenu */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Sombra para destacar */
    z-index: 1; /* Garante que o submenu apareça acima de outros elementos */
    min-width: 180px; /* Largura mínima do submenu */
    left: 0; /* Alinha o submenu com a borda esquerda do item pai */
    padding: 10px 0; /* Espaçamento interno */
    border-top: 2px solid #000000; /* Linha superior para destacar o submenu */
}

/* Mostra o submenu ao passar o mouse sobre o item pai */
nav ul li:hover > ul {
    display: block;
}

/* Estilos para os Itens do Submenu (2º nível) */
nav ul ul li {
    margin: 0;
    padding: 0 15px; /* Espaçamento interno para itens de submenu */
    position: relative; /* CRUCIAL: Para posicionar o 3º nível em relação a este item */
}

/* Estilos para o Terceiro Nível de Submenu (3º nível) */
nav ul ul ul { /* Aplica-se ao <ul> que é filho de outro <ul> */
    top: 0; /* Alinha o topo do 3º nível com o topo do item pai do 2º nível */
    left: 100%; /* Move o 3º nível para a direita do item pai do 2º nível */
    border-top: none; /* Remove a borda superior para não duplicar */
    border-left: 2px solid #000000; /* Adiciona uma borda à esquerda para destacar */
}

/* Estilos do Conteúdo Principal */
main {
    padding-top: 40px;    /* Mant�m o padding superior */
    padding-bottom: 100px; /* Adiciona um padding inferior para evitar sobreposi��o do footer */
    /* Se voc� tiver padding lateral, pode ser: padding: 40px 20px 100px; */
}

section {
    margin-bottom: 40px; /* Espaçamento entre as seções */
}

h1, h2, h3, h4, h5, h6 {
    color: #000000; /* Cor preta para todos os títulos */
}

/* Estilos para o Formulário de Contato */
.contact-form label {
    display: block; /* Cada label em uma nova linha */
    margin-bottom: 5px; /* Espaçamento abaixo do label */
    font-weight: bold; /* Texto em negrito */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%; /* Ocupa 100% da largura disponível */
    padding: 10px; /* Espaçamento interno */
    margin-bottom: 20px; /* Espaçamento abaixo do campo */
    border: 1px solid #ccc; /* Borda cinza */
    border-radius: 4px; /* Cantos arredondados */
    box-sizing: border-box; /* Garante que padding não aumente a largura total */
}

.contact-form textarea {
    resize: vertical;
}

/* Estilos para os Ícones Sociais */
.social-icons {
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: left; /* Centraliza os ícones se quiser */
}

.social-icons a {
    color: #000000; /* Cor preta para os ícones */
    font-size: 2em; /* Tamanho dos ícones */
    margin: 0 5px; /* Espaçamento entre os ícones */
    transition: color 0.3s ease; /* Transição suave para o hover */
}

.social-icons a:hover {
    color: #555555; /* Cor mais escura ao passar o mouse */
}

.logo img {
    height: 80px;   /* controla o tamanho */
    width: auto;
	align-items: center; 
	text-align: left;
}

.logo {
    display: flex;
    align-items: center;   /* 🔥 ISSO centraliza verticalmente */
    gap: 12px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 2em;
}

/* ========== ESTILOS DA �REA DE LOGIN ========== */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.login-box {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 40px;
    max-width: 450px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.login-box h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #000000;
    font-size: 1.8em;
}

/* Formul�rio de Login Tradicional */
.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #000000;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: #000000;
}

.btn-login {
    width: 100%;
    background-color: #000000;
    color: #ffffff;
    padding: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-login:hover {
    background-color: #333333;
}

.forgot-password {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
}

.forgot-password a {
    color: #555555;
    text-decoration: none;
}

.forgot-password a:hover {
    text-decoration: underline;
}

/* Divisor entre login tradicional e social */
.login-divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
}

.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #e0e0e0;
    z-index: 0;
}

.login-divider span {
    background-color: #ffffff;
    padding: 0 15px;
    position: relative;
    z-index: 1;
    color: #666666;
    font-size: 0.9em;
}

/* Bot�es de Login Social */
.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-social {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

.btn-social i {
    font-size: 1.2em;
}

.btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Cores espec�ficas para cada provedor */
.btn-google {
    color: #DB4437;
    border-color: #DB4437;
}

.btn-google:hover {
    background-color: #DB4437;
    color: #ffffff;
}

.btn-microsoft {
    color: #00A4EF;
    border-color: #00A4EF;
}

.btn-microsoft:hover {
    background-color: #00A4EF;
    color: #ffffff;
}

.btn-facebook {
    color: #1877F2;
    border-color: #1877F2;
}

.btn-facebook:hover {
    background-color: #1877F2;
    color: #ffffff;
}

.btn-apple {
    color: #000000;
    border-color: #000000;
}

.btn-apple:hover {
    background-color: #000000;
    color: #ffffff;
}

/* Link para criar conta */
.signup-link {
    text-align: center;
    margin-top: 25px;
    font-size: 0.95em;
    color: #666666;
}

.signup-link a {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

.signup-link a:hover {
    text-decoration: underline;
}




/* Estilos para as marcas d'�gua flutuantes */
  .marca-dagua-flutuante::before {
        content: "";
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.08; /* Ajuste a transpar�ncia aqui */
        /* z-index: -1; <-- REMOVA ESTA LINHA */
    }

.marca-dagua-flutuante::before {
    content: ""; /* Essencial para pseudo-elementos */
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain; /* Garante que a imagem caiba no espa�o */
    opacity: 0.08; /* Transpar�ncia sutil */
    z-index: 1; Fica atr�s do texto */
}

/* Marca d'�gua 1 */
.marca-dagua-1::before {
    background-image: url('imagens/marcadagua/ed1.png'); /* Caminho da sua imagem */
    width: 80px; /* Tamanho da marca d'�gua */
    height: 80px;
    top: 350px; /* Ajuste a posi��o vertical */
    left: 10%; /* Ajuste a posi��o horizontal */
    transform: rotate(-10deg); /* Rota��o para dar um efeito "ca�do" */
}

/* Marca d'�gua 2 */
.marca-dagua-2::before {
    background-image: url('imagens/marcadagua/ed2.png'); /* Caminho da sua imagem */
    width: 100px;
    height: 100px;
    top: -50px;
    right: 5%; /* Posiciona � direita */
    transform: rotate(15deg);
}

/* Marca d'�gua 3 */
.marca-dagua-3::before {
    background-image: url('imagens/marcadagua/ed3.png'); /* Caminho da sua imagem */
    width: 70px;
    height: 70px;
    top: -20px;
    left: 40%;
    transform: rotate(-5deg);
}

/* Ajuste para telas menores (opcional, mas recomendado) */
@media (max-width: 768px) {
    .marca-dagua-flutuante::before {
        width: 50px; /* Reduz o tamanho em telas menores */
        height: 50px;
        opacity: 0.05; /* Pode reduzir a opacidade tamb�m */
    }
    .marca-dagua-1::before { left: 5%; top: -20px; }
    .marca-dagua-2::before { right: 2%; top: -30px; }
    .marca-dagua-3::before { left: 30%; top: -10px; }
}