/* ===========================
   LOFTS ITAJAÍ
=========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#071521;

font-family:'Inter',sans-serif;

color:#ffffff;

line-height:1.6;

}


/*=============================
TOPO
=============================*/

header{

padding:70px 25px 50px;

text-align:center;

}

.topo{

max-width:900px;

margin:auto;

}

.topo h1{

font-family:'Playfair Display',serif;

font-size:52px;

font-weight:700;

color:#d4b06d;

margin-bottom:20px;

letter-spacing:1px;

}

.topo p{

font-size:19px;

color:#d5dde5;

}


/*=============================
CATÁLOGO
=============================*/

.catalogo{

width:95%;

max-width:1500px;

margin:auto;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

padding-bottom:70px;

}


/*=============================
CARD
=============================*/

.imovel{

background:#0d2234;

border:1px solid rgba(212,176,109,.20);

border-radius:18px;

overflow:hidden;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.20);

}

.imovel:hover{

transform:translateY(-8px);

box-shadow:0 25px 50px rgba(0,0,0,.40);

}


/*=============================
IMAGEM
=============================*/

.imovel img{

width:100%;

aspect-ratio:16/10;

object-fit:cover;

display:block;

}


/*=============================
CONTEÚDO
=============================*/

.conteudo{

padding:28px;

text-align:center;

}

.conteudo h2{

font-family:'Playfair Display',serif;

font-size:30px;

font-weight:700;

color:#d4b06d;

margin-bottom:10px;

}

.conteudo h3{

font-size:20px;

font-weight:500;

margin-bottom:20px;

color:white;

}


/*=============================
PREÇO
=============================*/

.preco{

font-size:34px;

font-weight:700;

margin-bottom:18px;

color:white;

}

.preco sup{

font-size:16px;

vertical-align:super;

}


/*=============================
DESCRIÇÃO
=============================*/

.descricao{

font-size:17px;

color:#d3dce4;

min-height:65px;

margin-bottom:28px;

}


/*=============================
BOTÃO
=============================*/

.botao{

display:inline-block;

background:#d4b06d;

color:#071521;

padding:15px 38px;

border:none;

border-radius:50px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.30s;

}

.botao:hover{

background:white;

transform:scale(1.05);

}


/*=============================
RODAPÉ
=============================*/

footer{

background:#04111b;

padding:70px 20px;

margin-top:30px;

border-top:1px solid rgba(212,176,109,.15);

}

.rodape{

max-width:900px;

margin:auto;

text-align:center;

}

.rodape h2{

font-family:'Playfair Display',serif;

font-size:36px;

color:#d4b06d;

margin-bottom:20px;

}

.rodape p{

color:#d8e1e8;

margin-bottom:25px;

}

.contatos{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

.contatos a{

color:#8fc6ff;

text-decoration:none;

font-weight:600;

transition:.30s;

}

.contatos a:hover{

color:white;

}


/*=============================
MODAL
=============================*/

.modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.80);

backdrop-filter:blur(5px);

z-index:999;

}

.modal-box{

background:#081826;

width:92%;

max-width:1200px;

height:88vh;

margin:4vh auto;

border-radius:20px;

overflow:auto;

position:relative;

padding:40px;

border:1px solid rgba(212,176,109,.20);

}

.fechar{

position:absolute;

right:20px;

top:18px;

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#d4b06d;

font-size:28px;

cursor:pointer;

}


/*=============================
RESPONSIVO
=============================*/

@media(max-width:980px){

.catalogo{

grid-template-columns:1fr;

}

.topo h1{

font-size:38px;

}

.conteudo h2{

font-size:25px;

}

.preco{

font-size:30px;

}

.contatos{

flex-direction:column;

gap:15px;

}

.modal-box{

padding:25px;

width:95%;

height:92vh;

}

}
/* ==========================================
   APRESENTAÇÃO DO IMÓVEL
========================================== */

.apresentacao{

max-width:900px;

margin:auto;

}

.fotoPrincipal{

width:100%;

height:520px;

object-fit:cover;

border-radius:16px;

display:block;

margin-bottom:20px;

}

.miniaturas{

display:flex;

justify-content:center;

gap:15px;

margin-bottom:40px;

}

.mini{

width:130px;

height:85px;

object-fit:cover;

border-radius:10px;

cursor:pointer;

border:2px solid transparent;

transition:.30s;

}

.mini:hover{

border-color:#d4b06d;

transform:scale(1.05);

}

.apresentacao h5{

text-align:center;

font-size:13px;

letter-spacing:4px;

font-weight:600;

color:#d4b06d;

margin-bottom:12px;

text-transform:uppercase;

}

.apresentacao h1{

font-family:'Playfair Display',serif;

font-size:42px;

text-align:center;

color:#ffffff;

margin-bottom:10px;

}

.apresentacao h2{

text-align:center;

font-size:34px;

color:#d4b06d;

margin-bottom:35px;

}

.dados{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-bottom:45px;

}

.dados div{

background:#10283d;

padding:18px;

border-radius:12px;

border:1px solid rgba(212,176,109,.20);

text-align:center;

}

.dados strong{

display:block;

font-size:15px;

color:#d4b06d;

margin-bottom:8px;

}

.dados span{

font-size:24px;

font-weight:700;

color:white;

}

.apresentacao h3{

margin-top:35px;

margin-bottom:18px;

font-size:24px;

font-family:'Playfair Display',serif;

color:#d4b06d;

}

.apresentacao p{

font-size:18px;

line-height:1.9;

color:#d7e0e8;

}

.comprar{

display:block;

margin:50px auto;

background:#d4b06d;

color:#071521;

text-decoration:none;

padding:26px;

border-radius:16px;

text-align:center;

transition:.30s;

max-width:700px;

}

.comprar:hover{

background:white;

}

.comprar div{

font-size:24px;

font-weight:700;

margin-bottom:8px;

}

.comprar span{

font-size:17px;

}

.comentario{

margin-top:15px;

padding:25px;

background:#10283d;

border-radius:14px;

border-left:4px solid #d4b06d;

}

@media(max-width:900px){

.fotoPrincipal{

height:260px;

}

.mini{

width:90px;

height:65px;

}

.dados{

grid-template-columns:1fr;

}

.apresentacao h1{

font-size:32px;

}

.apresentacao h2{

font-size:28px;

}

.comprar div{

font-size:20px;

}

}