/* Intro */
.intro h1 {
    font-size: 2rem;
    margin-bottom: 0.3rem;
    color: #222;
}
.intro .preco {
    font-size: 1.6rem;
    font-weight: 700;
    color: #d93025;
    margin-bottom: 1rem;
}
.btn-ver-fotos {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    background: #128217;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.btn-ver-fotos:hover {
    background: #2db334;
}

.btn-listar-todos {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    background: #043a3b;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.btn-listar-todos:hover {
    background: #087678;
}

/* Blocos */

.detalhes-bloco.caracteristicas {
    padding-left: 200px;
}

.detalhes-bloco {
    background: #fff;
    border: none;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}
.detalhes-bloco h2 {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.3rem;
    color: red;
}
.imagem-capa h3 {
    font-size: 1.5rem;
    padding-bottom: 0.3rem;
    color: blue;
}
.detalhes-bloco p,
.detalhes-bloco li {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.4rem;
}
.detalhes-bloco ul {
    list-style: none;
    padding-left: 0;
}

/* =========================
   AÇÕES (favoritar, compartilhar)
   ========================= */
.acoes {
    display: flex;             /* flex container para os botões */
    gap: 2rem;                 /* espaço entre os botões */
    width: 100%;               /* ocupa toda a largura do container */
    justify-content: center;   /* centraliza os botões horizontalmente */
    margin-top: 0.5rem !important;          /* espaço acima das ações */
}

.acoes button {
    flex: 1;                   /* se quiser que tenham mesma largura, ou remova para tamanho natural */
    max-width: 180px;          /* largura máxima para não ficarem gigantes */
    padding: 0.8rem 1rem;      /* espaçamento interno */
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.btn-favoritar {
    background: #fb0835;
    color: white;
}

.btn-favoritar:hover {
    background: #de6a7d;
}

.btn-compartilhar {
    background: #2c6cd1;
    color: white;
}

.btn-compartilhar:hover {
    background: #698fce;
}

.galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.foto-item img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.2s;
}

.foto-item img:hover {
    transform: scale(1.05);
}

/* Lightbox */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 0 15px #000;
}

.lightbox .fechar {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

/* Imagem de capa */
.imagem-capa img.capa {
    display: block;
    max-width: 250px;   /* largura máxima */
    max-height: 180px;  /* altura máxima */
    width: auto;        /* mantém proporção */
    height: auto;       /* mantém proporção */
    margin: 1rem auto;  /* centraliza horizontalmente e dá espaço vertical */
    border-radius: 8px; /* cantos arredondados */
    object-fit: cover;  /* preenche o espaço sem distorcer */
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

/* Layout com Flexbox */
.detalhes-topo {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.proprietario, .caracteristicas {
    flex: 1 1 200px; /* flexível, largura mínima 200px */
}

.imagem-capa {
    flex: 0 0 250px; /* tamanho fixo para a foto */
    text-align: center;
}

.localizacao {
    width: 100%;
}

.detalhes-bloco .titulo-fin-tipo {
    font-size: 2rem;
}