/* ===========================================================================
   HOME: CAPA, BUSCA, SERVIÇOS E FAIXA DE ADMINISTRAÇÃO DE CONDOMÍNIOS.
   =========================================================================== */

/* ---- CAPA ------------------------------------------------------------------
   OS SLIDES SE EMPILHAM NA MESMA CÉLULA DA GRADE (A CAPA TEM A ALTURA DO MAIOR)
   E TROCAM EM FADE DE 300ms (.ativo, site.js). MÍNIMO DE 530px; A PARTIR DE
   1600px, 75% DA JANELA COM A CHAMADA CENTRADA NA ALTURA. */

.capa {
    position: relative;
    display: grid;
    background-color: #171B2A;
}

.capa__slide {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-start;
    min-height: 530px;
    padding: 90px 0 100px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s linear, visibility .3s linear;
}

.capa__slide.ativo {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

/* VÉU ESCURO SOBRE A FOTO (60%). */
.capa__slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(7, 28, 31, .6);
}

.capa__foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.capa__chamada {
    position: relative;
    max-width: 650px;
}

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

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

.capa__texto p {
    color: #fff;
}

.capa__botao {
    margin-top: 40px;
}

/* ALINHAMENTO DA CHAMADA: NO CENTRO O TEXTO NÃO TEM O FIO; À DIREITA O FIO MUDA DE LADO. */
.capa__slide--centro .capa__chamada {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.capa__slide--centro .capa__texto {
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    border: 0;
}

.capa__slide--direita .capa__chamada {
    margin-left: auto;
    text-align: right;
}

.capa__slide--direita .capa__texto {
    margin-left: auto;
    padding-right: 30px;
    padding-left: 0;
    border-right: 1px solid #576466;
    border-left: 0;
}

/* A CHAMADA DO SLIDE ATIVO SOBE EM SEQUÊNCIA: TÍTULO, TEXTO E BOTÃO. */
.capa__chamada > * {
    opacity: 0;
    visibility: hidden;
}

.capa__slide.ativo .capa__chamada > * {
    opacity: 1;
    visibility: visible;
    animation: capa-subir 1s both;
}

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

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

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

/* SETAS: A PARTIR DE 1200px, APARECEM COM O PONTEIRO SOBRE A CAPA; ABAIXO DISSO (TELA DE TOQUE)
   FICAM SEMPRE À MOSTRA, MENORES, NAS PONTAS. COM UM SLIDE SÓ, NÃO SAEM (.capa--um-slide). */
.capa__seta {
    position: absolute;
    top: 50%;
    left: 40px;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border: 1px solid #e5eaee;
    color: #fff;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: all .3s ease 0s;
}

.capa__seta--proxima {
    right: 40px;
    left: auto;
}

.capa:hover .capa__seta {
    left: 20px;
    opacity: 1;
    visibility: visible;
}

.capa:hover .capa__seta--proxima {
    right: 20px;
    left: auto;
}

.capa__seta:hover {
    border-color: var(--verde);
    background-color: var(--verde);
}

@media (min-width: 1200px) {
    .capa__seta { display: flex; }
}

@media (max-width: 1199px) {
    .capa__seta,
    .capa:hover .capa__seta {
        left: 10px;
        display: flex;
        width: 40px;
        height: 40px;
        font-size: 16px;
        opacity: 1;
        visibility: visible;
    }
    .capa__seta--proxima,
    .capa:hover .capa__seta--proxima { right: 10px; left: auto; }
}

@media (min-width: 1400px) {
    .capa:hover .capa__seta { left: 60px; }
    .capa:hover .capa__seta--proxima { right: 60px; left: auto; }
}

/* PONTOS: O ATIVO CRESCE PARA 15px E DESCE 2px. */
.capa__pontos {
    position: absolute;
    bottom: 50px;
    z-index: 3;
    width: 100%;
    line-height: 1;
    text-align: center;
}

.capa__pontos li {
    display: inline-block;
    margin-right: 10px;
    font-size: 0;
}

.capa__ponto {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #C0C0C0;
    transition: all .3s ease 0s;
}

.capa__pontos li:hover .capa__ponto,
.capa__ponto.ativo {
    width: 15px;
    height: 15px;
    margin-bottom: -2px;
    background-color: var(--verde);
}

/* COM ARTE DE CELULAR CADASTRADA, O BANNER SEM ELA SAI DA CAPA NO CELULAR. NO SLIDE COM ARTE DE
   CELULAR, CADA TELA MOSTRA A SUA CHAMADA; A ARTE DE CELULAR SEM TEXTO FICA SEM O VÉU ESCURO. */
.capa__chamada--celular {
    display: none;
}

@media (max-width: 767px) {
    .capa--arte-celular .capa__slide--so-desktop,
    .capa--arte-celular .capa__ponto--so-desktop { display: none; }
    .capa__chamada--desktop { display: none; }
    .capa__chamada--celular { display: block; }
    .capa__slide--celular-limpo::before { display: none; }
}

/* UM SLIDE SÓ À MOSTRA (site.js): SEM BOLINHAS NEM SETAS. */
.capa.capa--um-slide .capa__pontos,
.capa.capa--um-slide .capa__seta {
    display: none;
}

@media (min-width: 1600px) {
    .capa__slide { align-items: center; height: 75vh; }
    .capa__titulo { font-size: 65px; }
}

@media (max-width: 1199px) {
    .capa__chamada { margin-bottom: 30px; }
    .capa__texto { padding-left: 15px; }
    .capa__slide--centro .capa__texto,
    .capa__slide--direita .capa__texto { padding-left: 0; }
}

@media (max-width: 991px) {
    .capa__titulo { font-size: 40px; }
    .capa__texto p { font-size: 14px; }
    .capa__botao { margin-top: 20px; }
}

/* CELULAR: BANNER DE DESKTOP SEM ARTE DE CELULAR TAMBÉM APARECE AQUI. A CHAMADA FICA NO
   MEIO DA CAPA E SEMPRE CENTRADA (SEM O FIO DO LADO), COM TEXTO LEGÍVEL E SEM HIFENIZAR. */
@media (max-width: 767px) {
    .capa__slide { align-items: center; padding: 60px 0 80px; }
    .capa__chamada,
    .capa__slide--direita .capa__chamada {
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .capa__texto,
    .capa__slide--direita .capa__texto {
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        border: 0;
    }
    /* ESPAÇO PARA AS SETAS NAS PONTAS NÃO COBRIREM O TEXTO. */
    .capa:not(.capa--um-slide) .capa__chamada { padding: 0 45px; }
    .capa__titulo { margin-bottom: 15px; font-size: 28px; line-height: 1.15; }
    .capa__texto p { margin: 0; font-size: 15px; line-height: 1.6; hyphens: none; }
    .capa__botao { margin-top: 25px; }
}

/* ---- BUSCA -------------------------------------------------------------------
   ABAS CENTRADAS EM CAIXA ALTA (A ATIVA EM VERDE) E O FORMULÁRIO EM SEIS COLUNAS;
   DUAS ENTRE 768 E 991px; UMA ABAIXO DISSO. */

.busca {
    background-color: var(--fundo-claro);
}

.busca__abas {
    padding: 1rem 0 0;
    text-align: center;
    text-transform: uppercase;
}

.busca__aba {
    display: inline-block;
    margin: 0 5px 10px 0;
    padding: 15px 40px;
    background-color: var(--fundo-claro);
    color: var(--titulo);
    font-weight: 700;
}

.busca__aba:last-child {
    margin-right: 0;
}

.busca__aba .icone {
    margin-right: 10px;
    padding: 0 2px;
    box-sizing: content-box;
}

.busca__aba-icone {
    color: var(--verde);
}

.busca__aba--ativa,
.busca__aba--ativa:hover {
    border-radius: 10px;
    background-color: var(--verde);
    color: #fff;
}

.busca__caixa {
    padding: 1rem 3rem 0;
    background-color: var(--fundo-claro);
}

.busca__form {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.busca__campo {
    position: relative;
    flex: 0 0 auto;
    width: 16.66666667%;
    margin-bottom: 30px;
    padding: 0 15px;
}

/* CAIXA DO CAMPO: A LISTA DESENHADA (.seletor, seletor.js + seletor.css) E O <select>
   NATIVO QUE FICA QUANDO O SCRIPT NÃO RODA. NO MÍNIMO 200px, COMO NO SITE DE ORIGEM: NAS
   LARGURAS APERTADAS ELA PASSA DA COLUNA. A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23256c4a' d='M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z'/%3E%3C/svg%3E") VERDE FICA ANTES DO TEXTO. */
.busca__campo select,
.busca__campo .seletor {
    display: block;
    width: 100%;
    min-width: 200px;
    height: 65px;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23256c4a' d='M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z'/%3E%3C/svg%3E") no-repeat 21px calc(50% - 2px) / 12px 16px;
    color: var(--texto);
    font-family: var(--fonte-titulo);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.busca__campo select:hover,
.busca__campo .seletor:hover {
    border-color: #dbdbdb;
}

.busca__campo select:focus,
.busca__campo .seletor:focus,
.busca__campo .seletor.aberto {
    border-color: #999;
    outline: 0;
}

/* NATIVO: O "V" CINZA VAI COMO SEGUNDA IMAGEM DO FUNDO. */
.busca__campo select {
    padding: 0 40px 3px 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23256c4a' d='M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='2'/%3E%3C/svg%3E");
    background-position: 21px calc(50% - 2px), right 12px center;
    background-size: 12px 16px, 10px 6px;
    background-repeat: no-repeat;
    appearance: none;
}

.busca__campo .seletor {
    padding: 0 40px 0 42px;
    line-height: 60px;
}

.busca__campo .seletor__lista {
    width: 100%;
    max-height: 250px;
}

.botao--busca {
    width: 100%;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .busca__aba { padding: 15px 25px; font-size: 14px; }
    .busca__campo { width: 50%; }
}

@media (max-width: 767px) {
    .busca__campo { width: 100%; }
    .busca__campo .seletor__lista { max-height: 200px; }
}

/* ---- VITRINE: DESTAQUE PARA LOCAÇÕES ------------------------------------------
   CARROSSEL DE 3 CARTÕES (2 ABAIXO DE 992px, 1 ABAIXO DE 580px). SETAS REDONDAS
   QUE APARECEM COM O PONTEIRO EM CIMA (SÓ A PARTIR DE 768px); PONTOS EMBAIXO. */

/* SEM ESPAÇO EM CIMA: COMEÇA LOGO ABAIXO DA FAIXA DA BUSCA, COMO NO SITE DE ORIGEM. */
.vitrine {
    padding-bottom: 90px;
}

.vitrine__palco {
    position: relative;
}

.vitrine__trilho {
    --por-vez: 3;
    display: flex;
    margin: 0 -15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vitrine__trilho::-webkit-scrollbar {
    display: none;
}

.vitrine__item {
    flex: 0 0 calc(100% / var(--por-vez));
    padding: 0 15px;
    scroll-snap-align: start;
}

@media (max-width: 991px) {
    .vitrine__trilho { --por-vez: 2; }
}

@media (max-width: 767px) {
    .vitrine__trilho { margin: 0 -8px; }
    .vitrine__item { padding: 0 8px; }
}

@media (max-width: 579px) {
    .vitrine__trilho { --por-vez: 1; }
}

.destaque {
    position: relative;
    margin-bottom: 50px;
    border: 1px solid #f1f8ff;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(23, 44, 82, .1);
}

.destaque__foto {
    position: relative;
    max-height: 175px;
    overflow: hidden;
}

.destaque__foto a {
    display: block;
}

.destaque__foto img {
    display: block;
    width: 100%;
    transition: all .5s ease 0s;
}

.destaque:hover .destaque__foto img {
    transform: scale(1.1);
}

.destaque__selo {
    position: absolute;
    top: 15px;
    right: 18px;
    margin: 0;
    padding: 3px 15px 0;
    background-color: #77C720;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 25px;
    text-transform: uppercase;
}

/* BAIRRO E CIDADE SOBRE A FOTO, NUMA SOMBRA QUE ESCURECE PARA BAIXO. */
.destaque__local {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 30px 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .8) 70%);
    color: #fff;
    font-size: 14px;
}

.destaque__info {
    padding: 30px 30px 1px;
}

.destaque__preco {
    margin-bottom: 5px;
    color: var(--verde);
    font-family: var(--fonte-titulo);
    font-size: 18px;
    font-weight: 600;
}

.destaque__titulo {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 600;
}

/* DADOS COM UM FIO FINO ENTRE ELES. */
.destaque__dados {
    margin-bottom: 1rem;
}

.destaque__dados li {
    position: relative;
    display: inline-block;
    max-width: 160px;
    margin: 1rem 30px 0 0;
    font-size: 14px;
}

.destaque__dados li:last-child {
    margin-right: 0;
}

.destaque__dados li::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -15px;
    width: 1px;
    height: 100%;
    background-color: #000;
    opacity: .2;
    transform: translateY(-50%);
}

.destaque__dados li:last-child::after {
    display: none;
}

.destaque__dados span {
    display: block;
    font-weight: 700;
}

@media (max-width: 991px) {
    .destaque__info { padding: 30px 20px 1px; }
    .destaque__titulo { font-size: 20px; }
    .destaque__local { padding: 0 15px 15px; font-size: 13px; }
}

@media (max-width: 767px) {
    .destaque__titulo { font-size: 18px; }
    .destaque__dados li::after { right: -12px; }
}

.vitrine__seta {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 1px solid #e6ecf0;
    border-radius: 100%;
    background-color: #fff;
    color: #000;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: all .3s ease 0s;
}

.vitrine__seta--proxima {
    right: 15px;
    left: auto;
}

.vitrine__palco:hover .vitrine__seta {
    opacity: 1;
    visibility: visible;
}

.vitrine__seta:not(:disabled):hover {
    border-color: var(--verde);
    background-color: var(--verde);
    color: #fff;
}

/* SEM CARTÃO DAQUELE LADO (data-vitrine-sem-volta, vitrine.js): APAGADA E SEM CLIQUE. */
.vitrine__palco:hover .vitrine__seta:disabled {
    opacity: .4;
    cursor: default;
}

@media (min-width: 768px) {
    .vitrine__seta { display: flex; }
}

@media (min-width: 1350px) {
    .vitrine__palco:hover .vitrine__seta--anterior { left: -50px; }
    .vitrine__palco:hover .vitrine__seta--proxima { right: -50px; }
}

.vitrine__pontos {
    margin: 0 0 30px;
    font-size: 0;
    line-height: 1;
    text-align: center;
}

.vitrine__pontos li {
    display: inline-block;
    margin-right: 10px;
}

.vitrine__pontos button {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #C0C0C0;
    transition: all .3s ease 0s;
}

.vitrine__pontos li:hover button,
.vitrine__pontos .ativo {
    width: 15px;
    height: 15px;
    margin-bottom: -2px;
    background-color: var(--verde);
}

@media (max-width: 767px) {
    .vitrine__pontos { margin-bottom: 15px; }
}

/* TODOS OS CARTÕES CABEM NA TELA: NÃO HÁ PARA ONDE ANDAR (vitrine.js). */
.vitrine--parada .vitrine__seta,
.vitrine--parada .vitrine__pontos {
    display: none;
}

/* ---- SERVIÇOS ------------------------------------------------------------------
   OS CARTÕES SÃO O COMPONENTE .servico DE style.css (O MESMO DA ÁREA DO CLIENTE). */

.servicos {
    padding-top: 115px;
}

/* ---- ADMINISTRAÇÃO DE CONDOMÍNIOS ------------------------------------------------
   TEXTO À ESQUERDA E A FOTO OCUPANDO 45% À DIREITA, NA ALTURA TODA. ABAIXO DE 992px
   A FOTO DESCE PARA DEPOIS DO TEXTO. A PARTIR DE 1600px, A FAIXA TEM A ALTURA DA
   JANELA MENOS 160px E O TEXTO FICA CENTRADO NELA. */

.condominios {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-height: 530px;
    margin-top: 115px;
    padding: 100px 0;
    background-color: var(--fundo-claro);
}

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

.condominios__apoio {
    margin-bottom: 20px;
    color: var(--titulo);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.condominios__apoio span,
.condominios__titulo span {
    color: var(--verde);
}

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

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

.condominios__botao {
    margin-top: 40px;
}

.condominios__foto {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 45%;
    height: 100%;
}

.condominios__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

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

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

@media (max-width: 991px) {
    .condominios { display: block; }
    .condominios__apoio { font-size: 15px; }
    .condominios__titulo { font-size: 40px; }
    .condominios__botao { margin-top: 20px; }
    .condominios__foto { position: relative; width: 100%; height: auto; }
    .condominios__foto img { height: auto; }
}

@media (max-width: 767px) {
    .condominios__apoio { font-size: 14px; }
    .condominios__titulo { font-size: 30px; }
}