/* ===========================================================================
   FOTOS EM FADE: O FLEXSLIDER 2.5.0 DO SITE ANTIGO (CAPA DA HOME E FOTOS DOS DETALHES
   DE VENDA). NO MÁXIMO 500px DE ALTURA; OS SLIDES SE EMPILHAM (FLOAT COM MARGEM
   NEGATIVA) E SÓ O ATIVO FICA OPACO. O RITMO ESTÁ NO fotos-fade.js.
   =========================================================================== */

.fotos-fade {
    position: relative;
    max-height: 500px;
    margin: 0 0 60px;
    overflow: hidden;
    border: 0;
    border-radius: 4px;
    background: #000;
}

.fotos-fade__slides {
    display: block;
    max-height: 500px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fotos-fade__slides::after {
    content: "\0020";
    display: block;
    clear: both;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.fotos-fade__slide {
    position: relative;
    z-index: 1;
    display: block;
    float: left;
    width: 100%;
    margin-right: -100%;
    opacity: 0;
    transition: opacity .6s ease;
    -webkit-backface-visibility: hidden;
}

.fotos-fade__slide.ativo {
    z-index: 2;
    opacity: 1;
}

/* A FOTO QUE QUEBROU NO CARROSSEL (OS DETALHES): O "FOTOS EM BREVE" NO LUGAR DELA, DO TAMANHO DO AVISO
   DE IMÓVEL SEM FOTO (detalhes.css). */
.fotos-fade__slide .foto-indisponivel {
    height: 400px;
    font-size: 18px;
}

.fotos-fade__slide .foto-indisponivel .icone {
    font-size: 60px;
}

@media (max-width: 767px) {
    .fotos-fade__slide .foto-indisponivel { height: 250px; }
}

/* FOTO À ESPERA DA VEZ (fotos-fade.php): SEM CAIXA, O loading="lazy" NÃO BAIXA. O fotos-fade.js TIRA A CLASSE. */
.fotos-fade__slide--espera { display: none; }

/* BANNER SEM ARTE DE CELULAR, QUANDO OUTROS TÊM (home.php): SÓ NO DESKTOP. O fotos-fade.js PULA ELE. */
@media (max-width: 767px) {
    .fotos-fade__slide--so-desktop { display: none; }
}

.fotos-fade__slide img {
    display: block;
    max-width: 100%;
    max-height: 500px;
    height: auto;
    margin: 0 auto;
}

/* SETAS: FORA DA CAIXA ATÉ O MOUSE ENTRAR NELA; ATÉ 860px FICAM SEMPRE À MOSTRA. */
.fotos-fade__seta {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: block;
    width: 31px;
    height: 57px;
    margin: -20px 0 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent no-repeat;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.fotos-fade__seta--anterior {
    left: -50px;
    background-image: url('../img/home/capa/arrow-prev.png');
}

.fotos-fade__seta--proxima {
    right: -50px;
    background-image: url('../img/home/capa/arrow-next.png');
}

.fotos-fade:hover .fotos-fade__seta--anterior {
    left: 10px;
    opacity: .7;
}

.fotos-fade:hover .fotos-fade__seta--proxima {
    right: 10px;
    opacity: .7;
}

.fotos-fade:hover .fotos-fade__seta:hover {
    opacity: 1;
}

@media screen and (max-width: 860px) {
    .fotos-fade__seta--anterior { left: 10px; opacity: 1; }
    .fotos-fade__seta--proxima { right: 10px; opacity: 1; }
}