/* ===========================================================================
   ADMINISTRAÇÃO DE CONDOMÍNIO: CAPA COM A ANIMAÇÃO E A SEÇÃO DE GESTÃO.
   =========================================================================== */

/* ---- CAPA ---------------------------------------------------------------------
   FUNDO BRANCO, MÍNIMO DE 530px. A ANIMAÇÃO OCUPA 45% DA LARGURA E 70% DA ALTURA,
   ENCOSTADA À DIREITA; A POSIÇÃO MUDA POR FAIXA COMO NO SITE DE ORIGEM. A PARTIR DE
   1600px A CAPA TEM A ALTURA DA JANELA MENOS 160px E A CHAMADA FICA CENTRADA. */

.condominio-capa {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 530px;
    padding: 100px 0;
}

.condominio-capa__chamada {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.condominio-capa__titulo {
    margin-bottom: 20px;
    font-size: 50px;
    line-height: 1;
}

.condominio-capa__texto {
    max-width: 450px;
    padding-left: 30px;
    border-left: 1px solid #576466;
}

.condominio-capa__botao {
    margin-top: 40px;
}

.condominio-capa__animacao {
    position: absolute;
    right: 150px;
    bottom: 100px;
    width: 45%;
    height: 70%;
}

.condominio-capa__animacao img {
    display: block;
    width: auto;
    height: 100%;
    margin-left: auto;
    object-fit: contain;
}

/* A CHAMADA SOBE EM SEQUÊNCIA AO CARREGAR. */
.condominio-capa__chamada > * {
    animation: condominio-subir 1s both;
}

.condominio-capa__chamada > :nth-child(1) { animation-delay: .5s; animation-duration: .5s; }
.condominio-capa__chamada > :nth-child(2) { animation-delay: 1s; animation-duration: 1s; }
.condominio-capa__chamada > :nth-child(3) { animation-delay: 1.5s; animation-duration: 1.5s; }

@keyframes condominio-subir {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .condominio-capa__chamada > * { animation: none; }
}

@media (min-width: 1600px) {
    .condominio-capa { align-items: center; height: calc(100vh - 160px); }
    .condominio-capa__titulo { font-size: 65px; }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    .condominio-capa__animacao { top: 60%; right: 60px; transform: translateY(-50%); }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .condominio-capa__animacao { top: 55%; right: 60px; transform: translateY(-50%); }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .condominio-capa__animacao { right: 60px; }
}

@media (max-width: 1199px) {
    .condominio-capa__chamada { margin-bottom: 30px; }
    .condominio-capa__texto { padding-left: 15px; }
}

@media (max-width: 991px) {
    .condominio-capa { display: block; }
    .condominio-capa__titulo { font-size: 40px; }
    .condominio-capa__texto p { font-size: 14px; }
    .condominio-capa__botao { margin-top: 20px; }
    .condominio-capa__animacao { position: relative; right: auto; bottom: auto; width: 100%; height: auto; }
    .condominio-capa__animacao img { height: auto; }
}

@media (max-width: 767px) {
    .condominio-capa__titulo { font-size: 30px; }
}

/* ---- GESTÃO: FOTO E TEXTO LADO A LADO, CENTRADOS NA ALTURA -------------------- */

.gestao {
    padding: 120px 0 90px;
}

.gestao__linha {
    align-items: center;
}

.gestao__coluna {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 15px;
}

.gestao__foto {
    margin-right: 30px;
}

.gestao__cabeca {
    margin-bottom: 20px;
}

.gestao__cabeca p {
    max-width: 500px;
    margin-bottom: 0;
}

/* SERVIÇOS EM DUAS COLUNAS (UMA ABAIXO DE 768px), ÍCONE DE 45px À ESQUERDA. */
.gestao__lista {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1rem;
}

.gestao__lista li {
    display: flex;
    align-items: center;
    width: 50%;
    margin-top: 1rem;
    padding-right: 20px;
}

.gestao__lista img {
    max-width: 50px;
    margin-right: 10px;
}

.gestao__botao {
    margin-top: 40px;
}

@media (min-width: 992px) {
    .gestao__coluna { width: 50%; }
}

@media (max-width: 991px) {
    .gestao__foto { margin-right: 0; margin-bottom: 40px; }
}

@media (max-width: 767px) {
    .gestao__lista li { width: 100%; padding-right: 0; }
}