/* ===========================================================================
   condominios.css — página institucional (pages/condominios.php)
   ---------------------------------------------------------------------------
   Mesma técnica do hero com foto de pages/sobre.php (ver sobre.css): o
   .pagina-hero padrão (fundo cinza, texto escuro) vira foto + véu escuro
   + texto branco só aqui. O resto da página (features do portal, chamada
   final) é exclusivo desta página.
   =========================================================================== */

/* ===========================================================================
   HERO COM FOTO
   =========================================================================== */
/* Compacto, na mesma densidade do hero da home (.hero em home.css): banner
   menor, título menor, gaps menores — não o hero "grande" de sobre.php. */
.condo-hero {
    position: relative;
    padding: 0;
    padding-top: clamp(3rem, 7vw, 5rem);
    background-color: var(--cor-escura);
    background-size: cover;
    background-position: center;
    border-bottom: none;
    overflow: hidden;
}

.condo-hero .pagina-hero__titulo {
    font-size: clamp(1.75rem, 1.15rem + 1.8vw, 2.5rem);
}

.condo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(2, 8, 40, .82) 0%, rgba(2, 8, 40, .58) 55%, rgba(2, 8, 40, .78) 100%);
}

.condo-hero .container { position: relative; z-index: 1; }

.condo-hero .migalhas a,
.condo-hero .migalhas span { color: rgba(255, 255, 255, .7); }

.condo-hero .migalhas a:hover { color: var(--cor-branco); }

.condo-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: var(--gap-sm);
    padding: .45rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
}

.condo-hero__pill svg { width: 13px; height: 13px; flex: none; color: var(--cor-primaria-clara); }

.condo-hero .pagina-hero__titulo,
.condo-hero .pagina-hero__subtitulo { color: var(--cor-branco); }

.condo-hero .pagina-hero__subtitulo { color: rgba(255, 255, 255, .82); max-width: 56ch; }

.condo-hero__titulo-leve {
    display: block;
    font-weight: 400;
    color: rgba(255, 255, 255, .82);
}

.condo-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin-top: var(--gap-sm);
}

/* Contorno claro sobre a foto — o .btn--contorno padrão (borda/texto
   --cor-escura) some num fundo escuro; aqui vira vidro fosco. */
.condo-hero__acoes .btn--contorno {
    border-color: rgba(255, 255, 255, .35);
    color: var(--cor-branco);
    background: rgba(255, 255, 255, .08);
}

.condo-hero__acoes .btn--contorno:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
    color: var(--cor-branco);
}

/* ===========================================================================
   NÚMEROS DO HERO
   =========================================================================== */
.condo-hero__numeros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    width: fit-content;
    margin-top: var(--gap-md);
    padding: var(--gap-md) var(--gap-sm);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--raio-lg);
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.condo-hero__numero {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-inline: var(--gap-md);
}

.condo-hero__numero-valor {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--cor-branco);
}

.condo-hero__numero-legenda {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
}

.condo-hero__numero-sep {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 575px) {
    .condo-hero__numeros { flex-direction: column; align-items: stretch; width: 100%; gap: var(--gap-xs); padding: var(--gap-sm); }
    .condo-hero__numero { padding-inline: 0; }
    .condo-hero__numero-sep { display: none; }
}

/* ===========================================================================
   PORTAL DO CONDÔMINO
   =========================================================================== */
.condo-portal__cabecalho {
    max-width: 720px;
    margin: 0 auto var(--gap-lg);
    text-align: center;
}

.condo-portal__chapeu {
    justify-content: center;
}

.condo-portal__chapeu svg { width: 14px; height: 14px; color: var(--cor-primaria); }

.condo-portal__cabecalho .secao__titulo mark {
    background: none;
    color: var(--cor-primaria-escura);
}

.condo-portal__texto {
    max-width: none;
    margin: 0 auto;
}

.condo-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-md);
}

.condo-feature {
    padding: var(--gap-md);
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

.condo-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra);
    border-color: transparent;
}

.condo-feature__icone {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--gap-sm);
    border-radius: var(--raio);
    background: color-mix(in srgb, var(--cor-primaria) 10%, transparent);
    color: var(--cor-primaria-escura);
}

.condo-feature__icone svg { width: 22px; height: 22px; }

.condo-feature__titulo {
    margin: 0 0 .35rem;
    font-size: var(--fs-base);
}

.condo-feature__texto {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    line-height: 1.6;
}

@media (max-width: 991px) {
    .condo-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .condo-features { grid-template-columns: 1fr; }
}

/* ===========================================================================
   CHAMADA FINAL
   ---------------------------------------------------------------------------
   Faixa escura em degradê — mesmo espírito do .card-imovel__veu/.rodape,
   pra fechar a página com peso, não outro cartão claro igual às de cima.
   =========================================================================== */
.condo-cta {
    padding-block: var(--gap-xl);
    background: linear-gradient(135deg, var(--cor-escura), var(--cor-primaria-escura));
    color: var(--cor-branco);
}

.condo-cta__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    flex-wrap: wrap;
}

.condo-cta__tag {
    display: inline-flex;
    align-items: center;
    padding: .3rem .8rem;
    margin-bottom: var(--gap-sm);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--raio-pill);
    background: rgba(255, 255, 255, .1);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.condo-cta__titulo {
    margin: 0 0 .5rem;
    font-size: var(--fs-2xl);
    color: var(--cor-branco);
}

.condo-cta__texto {
    margin: 0;
    max-width: 54ch;
    color: rgba(255, 255, 255, .75);
}

.condo-cta__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    flex: none;
}

@media (max-width: 767px) {
    .condo-cta__interno { flex-direction: column; align-items: flex-start; }
    .condo-cta__acoes { width: 100%; }
    .condo-cta__acoes .btn { flex: 1; justify-content: center; }
}

/* ===========================================================================
   FORMULÁRIO DE PROPOSTA
   ---------------------------------------------------------------------------
   Cartão branco flutuando sobre o fundo cinza — mesma linguagem do
   .sobre-historia/.diferencial-card (borda + sombra), só que maior porque
   carrega um formulário de verdade dentro. 3 colunas (não 2, como o
   .form-lead padrão do site) porque aqui são muitos campos curtos.
   =========================================================================== */
.condo-proposta { background: var(--cor-fundo-alt); }

.condo-proposta__card {
    margin: 0 auto;
    padding: var(--gap-xl) var(--gap-lg);
    background: var(--cor-branco);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-lg);
}

.condo-proposta__cabecalho {
    max-width: 60ch;
    margin: 0 auto var(--gap-lg);
    text-align: center;
}

.condo-proposta__chapeu { justify-content: center; }

.condo-form__campos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.condo-form__campos .campo--largo {
    grid-column: 1 / -1;
}

/* style.css força .campo--dropdown a ocupar a linha inteira dentro de
   .form-lead (pensado pro form de 2 colunas de contato/anuncie) — aqui os 3
   dropdowns (Tipo/Administradora/Síndico) são só mais um campo comum na
   grid de 3 colunas, não precisam da linha toda. */
.condo-form__campos .campo--dropdown {
    grid-column: auto;
}

.condo-proposta__selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: var(--gap-md);
}

.condo-proposta__selos span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pill);
    background: var(--cor-fundo-alt);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--cor-texto-suave);
}

.condo-proposta__selos svg { width: 13px; height: 13px; color: var(--cor-primaria); }

@media (max-width: 767px) {
    .condo-proposta__card { padding: var(--gap-lg) var(--gap-md); }
    .condo-form__campos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .condo-form__campos { grid-template-columns: 1fr; }
}