/* Estilos Globais e Centralização */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* Inclui padding e border no cálculo da largura total */
}

body {
    justify-content: center;
    align-items: center;
    min-height: 100%;
    margin: 0;
    background-color: #ffffff; /* Fundo levemente claro da tela */
    font-family: Arial, sans-serif;

	/* NOVA PALETA DE CORES - Gradiente suave e moderno */
	background: linear-gradient(135deg, #ffffff 0%, #d3d3d3 100%);
	background-attachment: fixed; /* Fundo fixo durante scroll */
	
	/* TIPOGRAFIA MODERNA - Google Fonts Inter para melhor legibilidade */
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6; /* Melhor espaçamento entre linhas */
	color: #333;
	
	/* Remove scroll horizontal desnecessário */
	overflow-x: hidden;
}
img {
    /* Principalmente para Chrome, Safari, Opera */
    -webkit-user-drag: none; 
    
    /* Para Firefox (muitas vezes user-select já resolve, mas inclua) */
    -moz-user-drag: none; 

    /* Para Edge/IE (embora seja mais comum usar user-select) */
    -ms-user-drag: none;

    /* Propriedade padrão (se suportada) */
    user-select: none;
    
    /* --- Adicional para prevenir seleção de texto/imagem --- */
    /* Isso também ajuda a prevenir o arrasto em muitos casos, */
    /* especialmente no Firefox e em dispositivos móveis.      */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
p {
	font-family: 'Inter', Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5; /* Espaçamento generoso para leitura confortável */
	color: #ffffff;
	margin-bottom: 20px;
	
	/* ANIMAÇÃO SUAVE DE ENTRADA */
	animation: fadeIn 0.8s ease-out 0.5s both;
}
.backgroundfundo{
    min-height: 100vh;
    background-image: url('../img/backgroundtelas.png'); /* 👈 1. OBRIGATÓRIO: O caminho da imagem */
    background-repeat: no-repeat; /* 👈 2. Sugestão: Evita a repetição da imagem */
    background-size: cover; /* 👈 3. Sugestão: Faz a imagem cobrir todo o elemento (pode cortar bordas) */
    background-position: center center; /* 👈 4. Sugestão: Centraliza a imagem no elemento */
    background-attachment: fixed; /* 👈 5. Sugestão: Mantém a imagem fixa ao rolar a página */




}

.fundo-telacc{
    min-height: 100vh;
    background-image: url('../img/aluguefacil.png'); /* 👈 1. OBRIGATÓRIO: O caminho da imagem */
    background-repeat: no-repeat; /* 👈 2. Sugestão: Evita a repetição da imagem */
    background-size: cover; /* 👈 3. Sugestão: Faz a imagem cobrir todo o elemento (pode cortar bordas) */
    background-position: center center; /* 👈 4. Sugestão: Centraliza a imagem no elemento */
    background-attachment: fixed; /* 👈 5. Sugestão: Mantém a imagem fixa ao rolar a página */
}




.recovery-box {
    width: 90%; /* Responsividade para telas menores */
    max-width: 800px; /* Limite para telas maiores */
    padding: 50px 30px;
    background-color: rgba(248, 248, 248, 0.5);
    opacity: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */        
    text-align: center;
    color: white;

     /* 1. Defina uma largura máxima ou largura fixa */
    max-width: 1200px; /* Ajuste este valor conforme o seu layout */
    width: 90%;       /* Opcional: Garante que ela seja responsiva */

    /* 2. Centraliza o bloco horizontalmente */
    margin-left: auto;
    margin-right: auto;
    /* Ou, de forma abreviada, */
    margin: 0 auto;
}


/* Título "Recuperar" */
h1 {
    color: #e24000; 
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: bold;
}

 /* CAMPO DO LOGIN / SENHA */ 
 

/* Estilo dos campos de entrada (Usuário, Senha, Email) */
.input-field {
    
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #eaeaea; /* Cinza claro do campo */
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho total */
    
}

.input-field:hover {

    /* CRUCIAL 2: Aplica o zoom */
    /* scale(1.05) aumenta o tamanho do elemento em 5% (1.10 seria 10%) */
    transform: scale(1.01);
    
    /* Opcional: Intensifica a sombra para dar mais sensação de profundidade/elevação */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
    
    /* Opcional: Garante que o item no zoom fique por cima de outros elementos */
    z-index: 10;

}

.input-field:focus {

    /* CRUCIAL 2: Aplica o zoom */
    /* scale(1.05) aumenta o tamanho do elemento em 5% (1.10 seria 10%) */
    transform: scale(1.03);
    
    /* Opcional: Intensifica a sombra para dar mais sensação de profundidade/elevação */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
    
    /* Opcional: Garante que o item no zoom fique por cima de outros elementos */
    z-index: 10;

}


/* Estilo do botão "Recuperar" */
.recover-button {
    background-color: #e24000; /* Azul do botão */
    color: white;
    padding: 15px;
    width: 100%;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 10px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.recover-button:hover {
    background-color: #972b00; /* Azul um pouco mais escuro no hover */
    transform: scale(1.01); 
}

/* Estilo do link "Login" */
.login-link {
    color: #e24000; /* Azul do link */
    text-decoration: none;
    display: block; /* Para ocupar sua própria linha */
    margin-top: 15px;
    font-size: 16px;
}

.login-link:hover {
    text-decoration: underline;
}





/* TELA MEUS ALUGUEIS */

/* Contêiner principal (o retângulo cinza escuro) */
.box-aluguel {
    /* width: 90%; Responsividade para telas menores */
    max-width: 1200px; /* Limite para telas maiores */
    padding: 50px 30px;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    text-align: center;
    color: white;

    /* 1. Defina uma largura máxima ou largura fixa */
    max-width: 1200px; /* Ajuste este valor conforme o seu layout */
    width: 90%;       /* Opcional: Garante que ela seja responsiva */

    /* 2. Centraliza o bloco horizontalmente */
    margin-left: auto;
    margin-right: auto;
    /* Ou, de forma abreviada, */
    margin: 0 auto;
}
.box-aluguel h1 {
    color: white;
    text-align: center;
    text-align: fixed;
    font-size: 42px;
}

.box-aluguel h3 {
    text-align: center;
    text-align: fixed;
}

.box-aluguel span {
    color: e24000;
    text-align: center;
    text-align: fixed;
}

.box-aluguel a {
    color: e24000;
    text-align: center;
    text-align: fixed;
}

.espacobotao-meusaluguel{
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Adiciona 15px de espaçamento entre os itens */
}

.botaoes-meusaluguel {
    background-color: #d3d3d3; /* Azul do botão */
    color: rgb(0, 0, 0);
    padding: 15px;
    width: 100%;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;

    font-weight: bold;
    transition: background-color 0.3s;
}

.botaoes-meusaluguel:hover {
    background-color: #373737; /* Azul um pouco mais escuro no hover */
    
    
    transform: scale(1.01); 
}

.container-alugueis-telacheia {
/* Define a exibição horizontal (lado a lado) e o alinhamento */
display: flex;
flex-wrap: wrap; 
justify-content: space-evenly;
gap: 20px; /* Adiciona um espaço entre os cartões */
width: 100%; /* Ocupa a largura total */
max-width: 1000px; /* Limita o tamanho máximo para melhor visualização */
margin: 20px auto; /* Centraliza no fundo branco */
flex-wrap: nowrap
}
.container-alugueis {
/* Define a exibição horizontal (lado a lado) e o alinhamento */
display: flex;
flex-wrap: wrap; 
justify-content: space-evenly;
gap: 20px; /* Adiciona um espaço entre os cartões */
width: 100%; /* Ocupa a largura total */
max-width: 1000px; /* Limita o tamanho máximo para melhor visualização */
margin: 20px auto; /* Centraliza no fundo branco */

}

/* Os cards individuais (se forem divs, por exemplo): */
.card-aluguel { /* Substitua por .container-alugueis > div se não tiver uma classe */
    width: calc(33.33% - 14px); /* Mantém 3 cards por linha na largura máxima */
    flex-basis: calc(33.33% - 14px); 
    flex-grow: 0; /* Impede que o item cresça e ocupe o espaço vazio */
    flex-shrink: 0;
}



.cartao-produto {
/* Estilo do cartão baseado na sua imagem */
color: #ffffff; /* Texto principal branco */
border-radius: 12px;
padding: 20px;
flex: 1; /* Faz com que todos os 3 cartões tenham a mesma largura */
    min-width: 260px;
    max-width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: left;

flex-basis: calc(33.33% - 14px); 
flex-grow: 0; /* Impede que o item cresça e ocupe o espaço vazio */
flex-shrink: 0;

background-color: rgba(0, 0, 0, 0.2);

/* (Seus estilos de largura/flex-basis, etc., vêm aqui) */
    
    /* CRUCIAL 1: Adiciona a transição suave */
    /* Faz a animação de 'transform' durar 0.3 segundos (300ms) */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 
    
    /* Opcional: Adiciona uma sombra sutil que também fará a transição */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)


}

.cartao-produto input{
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #eaeaea; /* Cinza claro do campo */
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box; /* Garante que padding e borda não aumentem o tamanho total */
}

.cartao-produto a {
    text-decoration: none; 
    /* ... outros estilos ... */
}



.valor-data{
    color: white;
}

.cartao-produto:hover {

    /* CRUCIAL 2: Aplica o zoom */
    /* scale(1.05) aumenta o tamanho do elemento em 5% (1.10 seria 10%) */
    transform: scale(1.05);
    
    /* Opcional: Intensifica a sombra para dar mais sensação de profundidade/elevação */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); 
    
    /* Opcional: Garante que o item no zoom fique por cima de outros elementos */
    z-index: 10;

}

.cartao-produto h3 {
    text-align: center;
    text-align: fixed;
}




.titulo-produto {
color: #ff6600; /* Cor de destaque (vermelho/laranja) */
font-size: 1.3em;
margin-top: 0;
margin-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}

/* Estilo para centralizar a imagem */
.imagem-produto-centralizada {
    /* Define uma largura para que a imagem não ocupe 100% e possa ser centralizada */
    width: 80%; 
    height: auto; /* Mantém a proporção */
    max-height: 150px; /* Limita a altura, se necessário */
    
    /* Chave para centralizar: */
    display: block; /* Transforma a imagem em um elemento de bloco */
    margin: 10px auto; /* Define margem superior/inferior de 10px e 'auto' para centralizar horizontalmente */

     /* 1. Propriedade para bloquear a seleção de texto e o arrasto */
    user-select: none; 
    
    /* 2. Propriedade específica para arrastar (principalmente para Webkit/Chrome) */
    -webkit-user-drag: none; 
    
    /* 3. Evita que a imagem seja destacada ao clicar rapidamente */
    -webkit-touch-callout: none;
}
.imagem-produto-centralizada-grande {
    /* Define uma largura para que a imagem não ocupe 100% e possa ser centralizada */
    width: 100%; 
    height: auto; /* Mantém a proporção */
    max-height: 700px ; /* Limita a altura, se necessário */
    
    /* Chave para centralizar: */
    display: block; /* Transforma a imagem em um elemento de bloco */
    margin: 20px auto; /* Define margem superior/inferior de 10px e 'auto' para centralizar horizontalmente */
    
}

.data-info {
font-size: 0.9em;
margin: 5px 0;
font-size: 18px;
}

.label {
color: white; /* Rótulo (label) em cinza claro */
font-weight: 300;
margin-right: 5px;
}

.valor-pago {
/* Área de destaque do valor */
margin-top: 20px;
padding-top: 10px;
border-top: 2px solid #ff6600; /* Linha divisória em cor de destaque */
text-align: center;
}


.label-valor {
display: block; /* O rótulo "Valor Pago" fica em uma linha separada */
color: #ffffff; /* Cor de destaque */
font-size: 0.9em;
margin-bottom: 3px;
font-weight: bold;
}

.valor-total {
/* O valor pago em destaque */
color: #ff6600; /* Cor de destaque mais forte */
font-size: 1.8em;
font-weight: 700;
}

.textarea-maior {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #eaeaea; /* Cinza claro do campo */
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    resize: vertical; /* Permite redimensionar apenas na vertical */
    box-sizing: border-box;
}

.test {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #eaeaea; /* Cinza claro do campo */
    border: none;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    resize: vertical; /* Permite redimensionar apenas na vertical */
    box-sizing: border-box;
}