/* =========================================================
   Casa Louzada — design tokens (extraídos do Figma)
   ========================================================= */
:root {
    --bg: #f3f3f1;
    --brown-950: #2b2217;
    --brown-900: #3b342b;
    --brown-800: #53493d;
    --brown-600: #776d61;
    --brown-400: #aca18e;
    --gold-grad-start: #b2a28e;
    --gold-grad-end: #56483a;
    --white: #ffffff;

    --font-heading:
        'Poppins', sans-serif; /* substitui "Cal Sans" (fonte proprietária, sem licença livre via CDN) */
    --font-body: 'Poppins', sans-serif;
    --font-script: 'Rouge Script', cursive;
}

* {
    box-sizing: border-box;
}
a {
    text-decoration: none !important;
}
/* Largura de conteúdo = 1290px (medida exata do Figma, canvas 1920px com margens de 315px).
   max-width inclui os 24px de padding de cada lado, então a área de conteúdo
   (dentro do padding) fica em exatos 1290px a partir de 1338px de viewport —
   e a 1920px de viewport as margens batem exatamente com os 315px do Figma. */
.container-fig {
    width: 100%;
    max-width: 1338px;
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--brown-800);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
.section-title,
.destaque-card__desc,
.destaque-card__price,
.property-card h3,
.property-card__price,
.bairro-card__nome,
.stat strong,
.curadoria-card h3,
.financiamento-panel h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.script-text {
    font-family: var(--font-script);
    font-size: 2.5rem;
    background: linear-gradient(90deg, #947d62 0%, #b49f7b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: -0.5rem;
    position: relative;
    top: -20px;
    /* A Rouge Script desenha a 1ª e a última letra para fora da caixa (o "o" de
       "oportunidades", a perna do "S" de "Sinta-se"), e o background-clip: text
       só pinta dentro dela — o que sai some, cortado reto. A folga alarga a caixa
       e a margem negativa devolve o texto ao alinhamento de antes. */
    padding-inline: 0.3em;
    margin-inline: -0.3em;
}
.script-text--dark {
    color: var(--brown-800);
}
header .script-text {
    color: var(--white);
}

.section-title {
    font-size: 2rem;
    color: var(--brown-800);
}

/* Títulos de seção e de página: linhas equilibradas, sem palavra sozinha na
   última linha (os textos de SEO ficaram longos). Navegador sem suporte quebra
   como antes. */
.section-title,
.internal-hero__title,
.page-intro__title,
.section-sobre h2 {
    text-wrap: balance;
}

.text-white-70 {
    color: rgba(255, 255, 255, 0.7);
}

.btn-brand-gradient {
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    border: none;
    font-family: var(--font-heading);
    font-weight: 600;
}
.btn-brand-gradient:hover {
    color: var(--white);
    opacity: 0.92;
}

.badge-outline {
    display: inline-block;
    border: 1px solid var(--brown-400);
    color: var(--brown-400);
    border-radius: 40px;
    padding: 0.25rem 1rem;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.pill-outline {
    display: inline-block;
    border: 1px solid var(--brown-400);
    color: #d5c6b3 !important;
    border-radius: 40px;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    text-decoration: none;
    margin: 0.3rem;
    transition:
        background 0.2s,
        color 0.2s;
}
.pill-outline:hover {
    background: var(--brown-400);
    color: var(--white);
}
.pill-outline--light {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--white);
}
.pill-outline--light:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

.logo {
    height: 56px;
    width: auto;
    object-fit: contain;
}

/* ============ NAV (medidas exatas do Figma, container 1290px) ============ */
.hero__nav-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.nav-logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}
.nav-logo img {
    height: 50px;
    width: auto;
    display: block;
}
@media (max-width: 1337.98px) {
    .hero__nav-row {
        flex-wrap: wrap;
    }
    .nav-logo img {
        height: 56px;
    }
    .navbar-toggler {
        margin-left: auto;
        border-color: rgba(255, 255, 255, 0.5);
    }
    #mainNav {
        flex-basis: 100%;
    }
}

@media (min-width: 1338px) {
    .navbar-toggler {
        display: none;
    }
    #mainNav {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
    }
}
@media (max-width: 1337.98px) {
    #mainNav {
        background: var(--brown-900);
        border-radius: 20px;
        padding: 1.5rem;
        margin-top: 1rem;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 30px;
    margin: 0 0 0 155px;
    padding: 0;
}
@media (max-width: 1337.98px) {
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin: 0 0 1.5rem;
    }
}
.nav-links > li > a,
.nav-links > li > a.dropdown-toggle {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.nav-links > li > a:hover {
    opacity: 0.8;
}
.nav-links .dropdown-menu {
    min-width: 12rem;
    margin-top: 14px;
    background: var(--brown-900);
    border: none;
    border-radius: 14px;
    padding: 0.6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.nav-links .dropdown-item {
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}
.nav-links .dropdown-item:hover,
.nav-links .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.nav-contato {
    flex: 0 0 auto;
    margin-left: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 190px;
    height: 60px;
    border-radius: 47px;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    font-size: 18px;
}
.nav-contato:hover {
    color: var(--white);
    opacity: 0.92;
}
.nav-contato__arrow {
    width: 20px;
    height: 14px;
    object-fit: contain;
    /* transform: rotate(180deg); */
    filter: brightness(0) invert(1);
}

.nav-divider {
    flex: 0 0 auto;
    margin-left: 30px;
    width: 1px;
    height: 55px;
    background: rgba(255, 255, 255, 0.34);
}

.nav-whats {
    flex: 0 0 auto;
    margin-left: 30px;
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    white-space: nowrap;
}
.nav-whats span {
    display: block;
    font-size: 18px;
}
.nav-whats a {
    color: var(--white);
    text-decoration: none;
    font-size: 18px;
}

.nav-social {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 30px;
}
.nav-social img {
    width: 37px;
    height: 37px;
    object-fit: contain;
}

@media (max-width: 1337.98px) {
    .nav-contato,
    .nav-whats,
    .nav-social {
        margin-left: 0;
    }
    .nav-contato {
        margin-bottom: 1.25rem;
    }
    .nav-divider {
        display: none;
    }
    .nav-whats {
        margin-bottom: 1.25rem;
    }
    .nav-social {
        padding-left: 0;
    }
}

/* ============ HERO ============ */
.hero {
    position: relative;
    border-radius: 0 0 0 90px;
    overflow: hidden;
    color: var(--white);
    padding-bottom: 6rem;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* O vídeo de fundo (drone de dia: céu, mar, prédios) é bem mais claro que a
   foto que havia aqui: a película escurece desde o topo, para o menu, o título
   e a cursiva lerem em qualquer quadro. */
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(43, 34, 23, 0.5) 0%,
        rgba(43, 34, 23, 0.55) 35%,
        rgba(43, 34, 23, 0.8) 65%,
        rgba(43, 34, 23, 0.92) 100%
    );
}
/* Grafismo "C" vazado — medida exata do Figma (637x493 a 388,1320 num frame de 1920px),
   reproduzido em vw para escalar proporcionalmente com a largura da foto (full-bleed). */
.hero__decor {
    position: absolute;
    left: 68.75vw;
    top: 15.21vw;
    width: 33.18vw;
    height: 25.68vw;
    max-width: 637px;
    max-height: 493px;
    z-index: 1;
    opacity: 0.9;
    object-fit: contain;
    object-position: left top;
    pointer-events: none;
}
.hero__nav {
    position: relative;
    z-index: 3;
    padding-top: 69px;
}

.hero__content {
    position: relative;
    z-index: 2;
    /* O header flutua absoluto por cima (.site-header-bar--transparente), então
       nada empurra o conteúdo pra baixo no fluxo normal. 129px é a altura real
       do header flutuante (mesma constante usada em .internal-hero) — abaixo
       disso o título fica atrás da logo/menu no mobile, onde o clamp sozinho
       não chega nem perto desse valor. */
    padding-top: max(150px, clamp(3rem, 18vw, 8rem));
    padding-bottom: 8rem;
    position: relative;
    top: 80px;
}
/* Em `em`, a largura acompanha a fonte: cabe sempre "Imobiliária em Vila Velha - ES."
   (~15em) e o título fica em 1 linha do tablet para cima. O teto de 3,8rem (antes
   4,6rem) impede a linha de passar por cima do "C" decorativo em telas largas. */
.hero__title {
    font-size: clamp(2rem, 3.85vw, 3.8rem);
    max-width: 15.6em;
    line-height: 1.05;
    font-weight: 700;
    color: var(--white);
    margin: 0;
}
.hero__content .script-text {
    font-size: clamp(1.8rem, 4.15vw, 5rem);
    margin-top: 0.5rem;
    margin-bottom: 0;
    /* Precisa ficar legível sobre a foto escura do hero — um gradiente
     escuro (como usado em fundos claros) quase some aqui, por isso
     o degradê vai do branco pra um dourado bem claro, não pra marrom. */
    background: linear-gradient(90deg, #947d62 0%, #e7ddcc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--brown-800);
    /* Sombra suave que destaca a letra dos prédios claros do vídeo de fundo.
       `filter`, não `text-shadow`: com o preenchimento transparente, a
       text-shadow apareceria por dentro da letra e sujaria o degradê. */
    filter: drop-shadow(0 2px 6px rgba(20, 15, 10, 0.55));
}

.hero__search {
    position: relative;
    z-index: 1;
    margin-top: -3.5rem;
}
.search-bar {
    background: var(--white);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    height: clamp(72px, 5.8vw, 111px);
    padding: 0 8px 0 clamp(24px, 2.5vw, 38px);
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.7vw, 14px);
    color: var(--brown-600);
    overflow: hidden;
}
.search-field {
    flex: 1 1 0;
    min-width: 0;
    height: clamp(48px, 3.3vw, 76px);
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1.5px solid rgba(172, 161, 142, 0.45);
    border-radius: 999px;
    padding: 0 clamp(14px, 1.3vw, 22px);
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}
.search-field:hover,
.search-field:focus-within {
    border-color: var(--brown-400);
    background: var(--white);
}
@media (min-width: 768px) {
    .search-field--finalidade {
        flex: 1.5 1 0;
    }
}
.search-field__control {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-field__control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    min-width: 0;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(13px, 0.9vw, 16px);
    color: var(--brown-800);
    cursor: pointer;
}
.search-field__control:focus {
    outline: none;
}
.search-field__control::placeholder {
    color: var(--brown-800);
    opacity: 1;
}

select.search-field__control {
    padding-right: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23776d61' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px 6px;
}
select.search-field__control option {
    color: var(--brown-800);
}
.search-buscar {
    flex: 0 0 auto;
    align-self: stretch;
    margin-left: auto;
    min-width: clamp(120px, 11.3vw, 217px);
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(15px, 1.15vw, 22px);
    left: 15px;
    position: relative;
}
.search-buscar:hover {
    opacity: 0.92;
}

@media (max-width: 767.98px) {
    .search-bar {
        flex-wrap: wrap;
        height: auto;
        padding: 1.25rem;
        row-gap: 0.75rem;
        border-radius: 28px;
    }
    .search-field {
        flex: 1 1 45%;
        height: 52px;
    }
    .search-field:nth-of-type(5) {
        flex: 1 1 100%;
    }
    .search-buscar {
        flex: 1 1 100%;
        height: 52px;
        margin-left: 0;
    }
}
/* ANTES: essas 4 propriedades estavam em .hero */
.hero-wrap {
    position: relative;
    border-radius: 0 0 0 90px;
    overflow: hidden;
    color: var(--white);
}

.hero {
    padding-bottom: 6rem;
}
.whatsapp-float {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 64px;
    height: 64px;
    z-index: 999;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.whatsapp-float img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ============ CABEÇALHO DE SEÇÃO CENTRADO (home) ============ */
/* Título e subtítulo no meio da tela. No desktop as ações (setas, "Veja mais")
   ficam na ponta direita: as duas colunas laterais têm a mesma largura (1fr), o
   que mantém o título centrado. Abaixo de 1200px não sobra espaço lateral para o
   título mais longo ("Imóveis para alugar…") mais setas e botão, e as ações
   descem para baixo do título, também centradas. */
.secao-cabecalho {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
@media (min-width: 1200px) {
    .secao-cabecalho {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: end;
    }
    .secao-cabecalho__titulo {
        grid-column: 2;
    }
    .secao-cabecalho__acoes {
        grid-column: 3;
        justify-self: end;
    }
}

/* ============ DESTAQUE (slider com efeito de "peek" nas bordas) ============ */
.slider-arrows {
    display: flex;
    gap: 10px;
}
.slider-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brown-800);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.slider-arrow:hover {
    background: var(--brown-900);
}
.slider-arrow img {
    width: 14px;
    height: auto;
    filter: brightness(0) invert(1);
}
/* icon-arrow.png aponta para a direita: só o "anterior" é girado. */
.slider-arrow--prev img {
    transform: rotate(180deg);
}

.destaque-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-anchor: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding-bottom: 6px;
    user-select: none;
}
.destaque-slider::-webkit-scrollbar {
    display: none;
}
.destaque-slider.is-dragging {
    cursor: grabbing;
}

/* Piso de 400px: no tablet, 34vw (261px em 768) é baixo demais para o card
   aberto — o texto, alinhado por baixo, subia por cima do "Cód …". */
.destaque-slider {
    align-items: stretch;
    height: clamp(400px, 34vw, 468px);
}

/* Cada card começa "fechado" (só a foto) e expande ao ficar ativo,
   revelando código, bairro, descrição e preço — como um acordeão. */
.destaque-slide {
    position: relative;
    flex: 0 0 auto;
    width: min(190px, 20vw);
    min-width: 130px;
    height: 100%;
    border-radius: 27px;
    overflow: hidden;
    cursor: pointer;
    /* box-shadow: 0 10px 26px rgba(43, 34, 23, 0.18);
    transition:
        width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        min-width 0.5s cubic-bezier(0.65, 0, 0.35, 1); */
}
.destaque-slide.is-active {
    width: min(410px, 44vw);
    min-width: 280px;
}

.destaque-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 0.6s ease;
}
.destaque-slide:hover .destaque-card__img {
    transform: scale(1.04);
}

.destaque-card__code {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(43, 34, 23, 0.65);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        opacity 0.35s ease 0.1s,
        transform 0.35s ease 0.1s;
}
.destaque-slide.is-active .destaque-card__code {
    opacity: 1;
    transform: translateY(0);
}

.destaque-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 15%,
        rgba(0, 0, 0, 0.5) 40%,
        rgba(0, 0, 0, 0.85) 100%
    );
    color: var(--white);
    opacity: 0;
    transform: translateY(10px);
    white-space: normal;
    transition:
        opacity 0.35s ease 0.1s,
        transform 0.35s ease 0.1s;
}
.destaque-slide.is-active .destaque-card__overlay {
    opacity: 1;
    transform: translateY(0);
}
@media (min-width: 768px) {
    /* Card fechado: o overlay invisível (e o "Ver imóvel" dentro dele) não
       recebe clique — o primeiro gesto abre o card, o seguinte abre o imóvel. */
    .destaque-slide:not(.is-active) .destaque-card__overlay {
        pointer-events: none;
    }
}
/* Link do slide de destaque: rastreável e clicável sem brigar com o clique do
   acordeão, que fica no .destaque-slide inteiro. Só aparece com o card ativo. */
.destaque-card__link {
    align-self: flex-start;
    margin-top: 0.75rem;
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--white);
    border-radius: 999px;
    color: var(--white);
    font-size: 0.9rem;
    text-decoration: none;
    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}
.destaque-card__link:hover,
.destaque-card__link:focus-visible {
    background-color: var(--white);
    color: var(--brown-900, #2b2217);
}
.destaque-slide:not(.is-active) .destaque-card__link {
    pointer-events: none;
}

/* Rótulo acessível de campo cujo texto é comunicado pelo placeholder/option. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.destaque-card__overlay .badge-outline {
    align-self: flex-start;
    color: var(--white);
    border-color: var(--white);
}
.destaque-card__desc {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}
.destaque-card__price {
    font-size: 1.8rem;
}

/* Card fechado: um leve véu escuro pra sugerir que é clicável */
.destaque-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(43, 34, 23, 0.15);
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.destaque-slide.is-active::after {
    opacity: 0;
}

@media (max-width: 767.98px) {
    /* No mobile mostra 1 card por vez, já "aberto" (info sempre visível),
       ocupando a largura do slider e parando centralizado (scroll-snap) —
       inclusive depois das setas e do salto do loop infinito. */
    .destaque-slider {
        height: min(120vw, 520px);
        gap: 12px;
        scroll-snap-type: x mandatory;
    }
    /* Arraste com mouse (janela estreita no desktop) move o scroll na mão:
       o snap brigaria com cada passo. Solta, ele volta a centralizar. */
    .destaque-slider.is-dragging {
        scroll-snap-type: none;
    }
    .destaque-slide,
    .destaque-slide.is-active {
        width: 100%;
        min-width: 0;
        scroll-snap-align: center;
    }
    .destaque-card__overlay {
        padding: 1.25rem;
    }
    .destaque-card__desc {
        font-size: 1rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .destaque-card__price {
        font-size: 1.5rem;
    }
    /* "Veja mais imóveis disponíveis" numa linha só. */
    .section-destaque .btn-brand-gradient {
        padding-inline: 1.5rem !important;
        font-size: 0.95rem;
    }
    .destaque-card__overlay,
    .destaque-card__code {
        opacity: 1;
        transform: none;
    }
    .destaque-slide::after {
        opacity: 0;
    }
    .destaque-slide:hover .destaque-card__img {
        transform: none;
    }
}

/* ============ CATEGORIAS ============ */
.section-categorias {
    /* background: var(--white); */
}
.categorias-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/* !important só porque o .pill-outline base já força a cor com !important. */
.categorias-grid .pill-outline {
    color: #7a6b5b !important;
}
.categorias-grid .pill-outline:hover {
    color: var(--white) !important;
}

/* ============ PROPERTY CARDS (slider com peek nas bordas) ============ */
.imoveis-slider {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    overflow-x: auto;
    overflow-anchor: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding-bottom: 6px;
    padding-inline: max(24px, calc((100vw - 1290px) / 2));
    user-select: none;
}
.imoveis-slider::-webkit-scrollbar {
    display: none;
}
.imoveis-slider.is-dragging {
    cursor: grabbing;
}

/* Dots de navegação abaixo de um slider (um por imóvel). */
.slider-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.75rem;
}
.slider-dots button {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(83, 73, 61, 0.25);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.slider-dots button:hover {
    background: rgba(83, 73, 61, 0.45);
}
.slider-dots button.is-active {
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
}

.property-card {
    flex: 0 0 458px;
    width: 458px;
    background: var(--white);
    border-radius: 27px;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    /* box-shadow: 0 10px 30px rgba(43, 34, 23, 0.15); */

    pointer-events: auto;
    /* NÃO "height: 100%": um item com altura definida (mesmo que a % não
       resolva, por o .imoveis-slider não ter altura própria) sai do
       align-items: stretch do flex pai — cada card ficava só do tamanho
       do próprio texto, descolando a fileira de botões "Veja mais". Com
       altura auto, o stretch iguala todos os cards ao mais alto da fileira. */
}

.property-card__photo {
    position: relative;
    height: 252px;
    flex: 0 0 auto;
    overflow: hidden;
    background: #eee;
}

.property-card__photo img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;

    pointer-events: none;
}

.property-card__photo img.is-active {
    opacity: 1;
    visibility: visible;
}
.property-card__code {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(43, 34, 23, 0.65);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    backdrop-filter: blur(2px);
}
.property-card__dots {
    position: absolute;
    z-index: 3;

    left: 0;
    right: 0;
    bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;
}

.property-card__dots button {
    width: 15px;
    height: 15px;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.55);

    cursor: pointer;

    transition:
        width 0.25s ease,
        height 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.property-card__dots button:hover {
    background: rgba(255, 255, 255, 0.85);
}

.property-card__dots button.is-active {
    width: 17px;
    height: 17px;
    background: var(--white);
}
.property-card__body {
    padding: 1.75rem 1.5rem 0.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.property-card__badge {
    position: relative;
    margin-top: 0.1rem;
    margin-bottom: 1.1rem;
    background: rgba(255, 255, 255, 0.96);
    width: fit-content;
}
.property-card h3 {
    font-size: 1.35rem;
    margin-bottom: 0.4rem;
}
.property-card p {
    color: var(--brown-600);
    font-size: 0.92rem;
    line-height: 1.4;
    margin-bottom: 1.1rem;
}
.property-card__specs {
    display: flex;
    gap: 1.15rem;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--brown-800);
    border-bottom: 1px solid rgba(43, 34, 23, 0.12);
    padding-bottom: 0.9rem;
    margin-bottom: 0.9rem;
}
.property-card__specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.property-card__specs img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    opacity: 0.85;
}
.property-card__price {
    display: block;
    font-size: 1.7rem;
    margin-top: auto;
    margin-bottom: 1.1rem;
}
.property-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    padding: 1rem;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
}
.property-card__cta img {
    width: 16px;
    height: auto;
    filter: brightness(0) invert(1);
    /* transform: rotate(180deg); */
}
/* Card inteiro clicável: o ::after do "Veja mais" se estica sobre o card todo
   (foto, título, texto). Os dots da galeria ficam acima (z-index 3) e seguem
   trocando a foto; o código não intercepta o clique. */
.property-card {
    position: relative;
}
.property-card__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.property-card__code {
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .property-card {
        /* `flex: 0 0 458px` no base define o flex-basis, que manda mais que
           `width` no eixo principal de um item flex — só sobrescrever
           `width` (como estava) não encolhia o card no mobile, e ele
           vazava pra fora da tela. */
        flex-basis: 86vw;
        width: 86vw;
    }
    /* No slider: o card ocupa a largura do conteúdo (a tela menos o
       padding de 24px de cada lado), então centralizado fica alinhado com
       o resto da página e mostra um card por vez. */
    .imoveis-slider .property-card {
        flex-basis: calc(100vw - 48px);
        width: calc(100vw - 48px);
    }
}
@media (max-width: 767.98px) {
    /* Para sempre com o card centralizado — no arraste, nas setas e no
       salto do loop infinito. */
    .imoveis-slider {
        scroll-snap-type: x mandatory;
    }
    .imoveis-slider.is-dragging {
        scroll-snap-type: none;
    }
    .imoveis-slider .property-card {
        scroll-snap-align: center;
    }
}

/* ============ BAIRROS ============ */
.bairro-card {
    position: relative;
    display: block;
    border-radius: 27px;
    overflow: hidden;
    height: 246px;
    text-decoration: none;
    color: var(--white);
}
.bairro-card--tall {
    height: 100%;
    min-height: 517px;
}
.bairro-card--wide {
    height: 246px;
}
/* Mosaico bento: o meio é um grid 2x2 de cards iguais que estica até a
   altura dos cards altos das laterais. Grid em vez de .row.g-3: a margem
   negativa do gutter do Bootstrap deixava o bloco 1rem mais curto que os
   cards altos. */
.bairros-meio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* minmax(0, …): sem isso a linha do grid cresce até caber o conteúdo. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    height: 100%;
}
.bairros-meio .bairro-card {
    height: 100%;
}
@media (max-width: 991.98px) {
    /* Empilhado, a coluna do meio não tem altura de referência pra esticar. */
    .bairros-meio {
        height: auto;
        grid-template-rows: auto;
    }
    .bairros-meio .bairro-card {
        height: 200px;
    }
}
/* Foto absoluta: só preenche o card, nunca dita a altura dele. No fluxo, a
   altura natural da foto esticava as linhas do mosaico (e os cards altos
   junto) conforme o tamanho de cada imagem enviada. */
.bairro-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Margem dos dois lados: o nome quebra dentro do card, em vez de vazar pela
   borda direita (com só `left`, a caixa ia até a borda e a palavra longa
   passava dela, cortada pelo overflow do card). */
.bairro-card__label {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1rem;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.bairro-card__label span {
    font-size: 0.85rem;
    display: block;
}
/* Palavra que ainda não cabe na linha ganha hífen ("Castanhei-ras", pelo
   lang="pt-BR" da página); sem dicionário de hifenização, quebra mesmo assim. */
.bairro-card__nome {
    margin: 0;
    font-size: 1.4rem;
    hyphens: auto;
    overflow-wrap: break-word;
}
/* Celular: o meio do mosaico tem dois cards por linha, estreitos — o nome
   acompanha a largura da tela. */
@media (max-width: 575.98px) {
    .bairros-meio .bairro-card__label {
        left: 1rem;
        right: 1rem;
        bottom: 0.85rem;
    }
    .bairros-meio .bairro-card__nome {
        font-size: clamp(1rem, 4.4vw, 1.25rem);
        line-height: 1.15;
    }
}
.bairro-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(43, 34, 23, 0) 35%, rgba(43, 34, 23, 0.85) 100%);
}

/* ============ FINANCIAMENTO ============ */
.section-financiamento {
    padding: 3rem 0;
    position: relative;
    top: 150px;
    z-index: 1;
    margin-top: -100px;
}
@media (max-width: 991px) {
    .section-financiamento {
        top: 0;
        margin-top: 50px;
    }
}
.financiamento-panel {
    position: relative;
    background: var(--brown-900);
    border-radius: 30px;
    padding: 3rem;
    color: var(--white);
    /* overflow: hidden; */
}
.financiamento-panel__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: 30px;
}
/* .financiamento-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(43, 34, 23, 0.88) 0%,
    rgba(43, 34, 23, 0.55) 55%,
    rgba(43, 34, 23, 0.25) 100%
  );
  z-index: 0;
} */
.financiamento-panel h2 {
    font-size: 1.9rem;
}
/* O texto vem do painel numa linha só: a largura máxima refaz as quebras do
   layout ("Financiamento imobiliário / em Vila Velha"). */
.financiamento-panel__titulo {
    max-width: 15em;
    text-wrap: balance;
}
.financiamento-panel__texto {
    max-width: 32.25em;
}
.checklist {
    list-style: none;
    padding: 0;
    margin-bottom: 1.75rem;
}
.checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}
.checklist li img {
    width: 18px;
}

.financiamento-card {
    background: var(--white);
    color: var(--brown-800);
    border-radius: 20px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.3);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    text-align: center;
    /* Na borda inferior da foto, à direita: metade dentro, metade fora. */
    position: absolute;
    right: 3rem;
    bottom: -45px;
    z-index: 2;
    width: min(380px, 32%);
}
.financiamento-card__logo {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 0.75rem;
}
.financiamento-card__texto {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    /* Empilhado: a caixa vem depois do conteúdo, dentro do painel. */
    .financiamento-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: auto;
        margin-top: 2rem;
    }
}
/* ============ SOBRE ============ */
.section-sobre {
    position: relative;
    overflow: hidden;
    /* A foto vem do painel (.section-sobre__bg); a cor segura o texto branco
       se ela for removida. */
    background: var(--brown-900);
    color: var(--white);
    padding: clamp(4rem, 12vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
    border-radius: 0 0 0 90px;
    padding-top: 180px;
}
.section-sobre__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-sobre > .container-fig {
    position: relative;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
}

.stat__number {
    font-size: clamp(2.25rem, 3.7vw, 4.2rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(
        180deg,
        #c2c2c2 0%,
        var(--gold-grad-start) 60%,
        var(--gold-grad-end) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
}

.stat__label {
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--white);
    padding-top: 0.35em;
}

@media (max-width: 991px) {
    .section-sobre {
        border-radius: 0 0 0 50px;
        padding-top: 5rem;
    }
    .section-sobre .row.align-items-end {
        align-items: flex-start;
    }
}

/* ============ MAPA ============ */
.section-mapa img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

@media (max-width: 767.98px) {
    .section-mapa img {
        height: 260px;
    }
}
/* FOOTER */
.site-footer {
    position: relative;
    overflow: hidden;
    border-radius: 0 90px 0 0;
    background: url('/img/tema-padrao/footer-bg.png') center / cover no-repeat;
    color: var(--white);
    padding-block: 4.5rem 1.5rem;
}

/* Título de coluna, não heading: as métricas são as do <h5> que ele era. */
.site-footer .footer-title {
    background: linear-gradient(180deg, var(--gold-grad-start), var(--gold-grad-end));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.footer-links a:hover {
    opacity: 1;
}

.footer-contact-info {
    font-weight: 600;
    line-height: 1.6;
}
.footer-contact-info a {
    color: inherit;
    text-decoration: none;
}
.footer-contact-info a:hover {
    text-decoration: underline;
}

.text-white-70 {
    color: rgba(255, 255, 255, 0.7);
}

.footer-divider {
    border: none;
    border-top: 1px solid rgb(255 255 255);
    margin: 2rem 0 0;
}

@media (max-width: 991px) {
    .site-footer {
        border-radius: 0 50px 0 0;
    }
}

/* ============ CURADORIA ============ */
.section-curadoria {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0;
}

.curadoria__img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

.curadoria__title {
    color: var(--brown-800);
    font-weight: 700;
    margin-bottom: 1rem;
}

.curadoria__text {
    color: var(--brown-600);
}

.curadoria__divider {
    border: none;
    border-top: 1px solid rgb(43 34 23 / 88%);
    margin: 1.75rem 0;
}

.section-curadoria .stat__label {
    color: var(--brown-600);
}

/* ============ ÁREA DO CLIENTE (flutuante) ============ */
/* Na base do canto direito; o WhatsApp flutuante (56px, definido em
   resources/tema/padrao/css/app.css) sobe para logo acima dela. A posição
   do WhatsApp é sobrescrita aqui porque este arquivo carrega depois. */
.whatsapp-flutuante {
    bottom: calc(1.25rem + 44px + 12px);
}
.area-cliente-flutuante {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 44px;
    padding: 0 1.1rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px rgba(43, 34, 23, 0.28);
    transition: opacity 0.2s;
}
.area-cliente-flutuante:hover {
    color: var(--white);
    opacity: 0.92;
}
.area-cliente-flutuante svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .whatsapp-flutuante {
        bottom: calc(1.25rem + 40px + 12px);
    }
    .area-cliente-flutuante {
        height: 40px;
        padding: 0 0.9rem;
        font-size: 0.82rem;
    }
}

.whats-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--white);
    border-radius: 18px;
    padding: 0.9rem 1.4rem;
    box-shadow: 0 12px 30px rgba(43, 34, 23, 0.08);
}

.whats-chip img {
    width: 70px;
    border-radius: 50%;
    flex-shrink: 0;
}

.whats-chip small {
    color: var(--brown-600);
    font-size: 0.9rem;
}

.whats-chip strong {
    color: var(--brown-800);
    font-size: 30px;
}
.whats-chip {
    text-decoration: none;
}
@media (max-width: 575.98px) {
    .whats-chip {
        gap: 0.75rem;
        padding: 0.85rem 1.1rem;
    }
    .whats-chip img {
        width: 52px;
    }
    .whats-chip strong {
        /* Cabe "(27) 99737-6060" numa linha até em tela de 320px; o
           telefone nunca quebra no meio. */
        font-size: clamp(18px, 5.6vw, 22px);
        white-space: nowrap;
    }
}

/* ============ BANNER INTERNO (todas as páginas internas) ============ */
.internal-hero-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 0 90px;
    color: var(--white);
}
.internal-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Fica atrás da foto; sem ela (removida no painel), segura o H1 branco. */
    background: var(--brown-900);
}
.internal-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.internal-hero {
    position: relative;
    z-index: 2;
    padding: clamp(2rem, 6vw, 4rem) 0 3.5rem;
}
.internal-hero__title {
    font-size: clamp(1.8rem, 2.6vw, 2.75rem);
    font-weight: 700;
    /* O mesmo dos headings: o rótulo do banner em <p class="h1"> fica igual ao <h1>. */
    letter-spacing: -0.01em;
    color: var(--white);
    margin: 0;
}
@media (max-width: 991px) {
    .internal-hero-wrap {
        border-radius: 0 0 0 50px;
    }
}

/* ============ INTRO DE PÁGINA INTERNA (Venda / Locação / etc.) ============ */
.page-intro {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}
.page-intro__title {
    color: var(--brown-800);
    font-weight: 700;
    margin-bottom: 0.25rem;
}
/* .page-intro__rich: texto rico do painel — cada <p> sai igual a .page-intro__text. */
.page-intro__text,
.page-intro__rich p {
    color: var(--brown-600);
    margin-bottom: 1.25rem;
    font-size: 18px;
}
.page-intro__cta {
    margin-top: 0.5rem;
}

.page-intro__gallery {
    position: relative;
}
.page-intro__photo {
    width: 100%;
    height: auto;
    border-radius: 18px;
    display: block;
}
.page-intro__photo--top {
    margin-bottom: 1.5rem;
}
.page-intro__stat {
    position: absolute;
    left: -1.5rem;
    bottom: -1.5rem;
    background: var(--white);
    border-radius: 18px;
    padding: 1rem 1.5rem;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.12);
}
.page-intro__gallery .stat__label {
    color: var(--brown-800);
}

@media (max-width: 767.98px) {
    .page-intro__gallery {
        margin-bottom: 3.5rem;
    }
    .page-intro__stat {
        left: 1rem;
        right: 1rem;
        bottom: -2rem;
    }
}
.btn-brand-gradient {
    text-decoration: none;
}
.btn:hover {
    text-decoration: none;
    color: var(--white);
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
}
.btn-brand-gradient:hover {
    text-decoration: none;
    color: var(--white);
}
.page-intro__cta {
    display: inline-flex;
    width: fit-content;
    justify-content: flex-start;
    padding: 0.9rem 1.75rem;
    gap: 0.75rem;
}

/* ============ BOTÃO PILL — GRADIENTE (universal) ============ */
.btn-pill-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: fit-content;
    padding: 0.9rem 1.75rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.btn-pill-gradient:hover,
.btn-pill-gradient:focus {
    color: var(--white);
    text-decoration: none;
    opacity: 0.9;
}
.btn-pill-gradient img {
    width: 18px;
    height: auto;
    /* transform: rotate(180deg); */
    filter: brightness(0) invert(1);
}
/* ============ TEXTO EM DESTAQUE (linha final antes do CTA) ============ */
.page-intro__text--strong {
    color: var(--brown-800);
    font-weight: 700;
}

/* ============ GALERIA COLAGEM — LOCAÇÃO ============ */
.locacao-gallery {
    position: relative;
    width: 100%;
    /* proporção medida no print, container-fig 1290px */
    aspect-ratio: 471 / 604;
}
.locacao-gallery__photo {
    position: absolute;
    object-fit: cover;
    display: block;
}
.locacao-gallery__photo--top {
    left: 30%;
    top: 0;
    width: 70%;
    height: 68%;
    z-index: 1;
}
.locacao-gallery__photo--bottom {
    left: 0;
    top: 33%;
    width: 55%;
    height: 51.5%;
    z-index: 2;
}
.locacao-gallery__stat {
    position: absolute;
    left: 0;
    top: 18%;
    width: 62%;
    z-index: 3;
    background: var(--white);
    border-radius: 18px;
    padding: 1.1rem 1.5rem;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.12);
}
.locacao-gallery__stat .stat__label {
    color: var(--brown-800);
}

@media (max-width: 767.98px) {
    .locacao-gallery__photo--bottom {
        top: 57%;
    }
    .locacao-gallery {
        aspect-ratio: auto;
        height: 420px;
    }
}

/* espaço extra entre as duas fileiras (dá lugar pro card que sai por baixo da 1ª foto) */
.page-intro__row-gap {
    margin-top: clamp(3rem, 6vw, 5.5rem);
}

.credito-gallery {
    position: relative;
}
.credito-gallery__photo {
    width: 100%;
    height: auto;
    display: block;
}
.credito-gallery__stat {
    position: absolute;
    right: 0;
    bottom: -12%;
    width: 65%;
    background: var(--white);
    border-radius: 18px;
    padding: 1.1rem 1.5rem;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.12);
}
.credito-gallery__stat .stat__label {
    color: var(--brown-800);
}

@media (max-width: 767.98px) {
    .credito-gallery__stat {
        position: static;
        width: fit-content;
        margin-top: -2.5rem;
        margin-left: auto;
        margin-right: 1rem;
    }
}
/* ============ SOBRE NÓS — QUEM SOMOS ============ */
.sobre-intro {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0 0;
}
.sobre-intro__gallery img {
    width: 100%;
    height: auto;
    display: block;
}
.sobre-intro__gallery img:first-child {
    margin-bottom: 1.5rem;
}

/* faixa "+26 mil" que atravessa a emenda entre as duas sections */
.sobre-stat {
    position: relative;
    z-index: 2;
    margin-top: clamp(2rem, 5vw, 4rem);
}
.sobre-stat .stat {
    display: inline-flex;
    align-items: baseline;
    gap: 1rem;
}
.sobre-stat .stat__number {
    font-size: clamp(3rem, 7vw, 6.5rem);
}
.sobre-stat .stat__label {
    font-size: clamp(1.1rem, 2vw, 1.75rem);
    color: var(--brown-800);
    font-weight: 700;
    font-size: 45px;
}

/* ============ SOBRE NÓS — ESPECIALISTAS ============ */
.sobre-especialistas {
    position: relative;
    overflow: hidden;
    background: url('/img/tema-padrao/especialistas-bg.png') center / cover no-repeat;
    border-radius: 0 0 0 90px;
    color: var(--white);
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}
@media (max-width: 991px) {
    .sobre-especialistas {
        border-radius: 0 0 0 50px;
    }
    .sobre-stat {
        margin-bottom: clamp(0rem, -5vw, -2rem);
    }
}
.sobre-especialistas__title {
    color: var(--white);
    font-weight: 700;
    margin-bottom: 1rem;
}
.sobre-especialistas__text {
    color: var(--white);
    opacity: 0.85;
    margin-bottom: 1.5rem;
}
.sobre-especialistas__gallery {
    position: relative;
}
.sobre-especialistas__photo {
    width: 100%;
    height: auto;
    display: block;
}
.sobre-especialistas__stat {
    position: absolute;
    right: -1.25rem;
    bottom: -1.25rem;
    background: var(--white);
    border-radius: 18px;
    padding: 1rem 1.5rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.sobre-especialistas__stat .stat__label {
    color: var(--brown-800);
}

.especialistas-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.especialistas-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--white);
    opacity: 0.9;
}
.especialistas-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold-grad-start);
}
.especialistas-list strong {
    color: var(--white);
    opacity: 1;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .sobre-especialistas__stat {
        right: 1rem;
        bottom: -1.5rem;
    }
}
/* ============ SOBRE NÓS — ATENDIMENTO / VÍDEO ============ */
.sobre-video {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0;
}
.sobre-video__divider {
    border: none;
    border-top: 1px solid rgb(43 34 23 / 60%);
    margin: 1.75rem 0;
}
.sobre-video__welcome {
    color: var(--brown-800);
    font-weight: 700;
    margin-bottom: 1rem;
}
.sobre-video__logo {
    height: 32px;
    width: auto;
}

.sobre-video__thumb {
    position: relative;
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    border: none;
    padding: 0;
    background: none;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
}
.sobre-video__thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.sobre-video__thumb:hover img {
    transform: scale(1.03);
}

/* triângulo puro em CSS, sem asset nem SVG */
.sobre-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
    border-left: 44px solid var(--white);
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
    transition: transform 0.2s ease;
}
.sobre-video__thumb:hover .sobre-video__play {
    transform: translate(-50%, -50%) scale(1.08);
}
/* Player do YouTube no lugar da miniatura: vertical (Shorts), na mesma largura. */
.sobre-video__thumb--player {
    aspect-ratio: 9 / 16;
    cursor: auto;
    background: var(--brown-900);
}
.sobre-video__thumb--player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ============ NOSSA HISTÓRIA — COLAGEM (sonho) ============ */
.historia-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 447 / 338;
}
.historia-gallery__photo {
    position: absolute;
    object-fit: cover;
    display: block;
}
.historia-gallery__photo--top {
    left: 30.4%;
    top: 0;
    width: 69.6%;
    height: 61.5%;
    z-index: 1;
}
.historia-gallery__photo--bottom {
    left: 0;
    top: 48.5%;
    width: 60.2%;
    height: 51.5%;
    z-index: 2;
}
.historia-gallery__badge {
    position: absolute;
    left: 66.9%;
    top: 53.5%;
    width: 33.1%;
    z-index: 3;
    background: var(--white);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    color: var(--brown-800);
    font-weight: 700;
    font-size: clamp(0.85rem, 1vw, 1rem);
    line-height: 1.35;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.12);
}

@media (max-width: 767.98px) {
    .historia-gallery {
        aspect-ratio: auto;
        height: 360px;
    }
    .historia-gallery__badge {
        left: 40%;
        width: 58%;
        top: 47.5%;
    }
}

/* ============ NOSSA HISTÓRIA — ESSÊNCIA ============ */
.historia-essencia {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0;
}
.historia-essencia__title {
    color: var(--brown-800);
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
}
.historia-essencia__banner {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 2.5rem;
}
.historia-essencia__text {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.historia-essencia__text p {
    color: var(--brown-600);
    margin-bottom: 1.25rem;
}

/* =========================================================
   Yamandu — ajustes para o header/footer viverem no layout
   global (todas as páginas, não só a home com foto de hero)
   e para estilizar a saída dinâmica de @the_menu()/opções.
   ========================================================= */

/* Sem foto de hero por página: o header ganha fundo sólido fixo. */
.site-header-bar {
    background: var(--brown-900);
}
.site-header-bar .hero__nav {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

/* Páginas com foto de hero (home): menu flutua transparente por cima da MESMA
   foto — sem barra própria, sem costura, igual ao mockup original. */
.site-header-bar--transparente {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background: transparent;
}
.site-header-bar--transparente .hero__nav {
    padding-top: 69px;
    padding-bottom: 0;
}

/* Banner interno (páginas com header transparente, mas sem o hero grande da
   home): o menu não empurra mais o conteúdo pra baixo no fluxo normal (é
   absolute), então o título ganha o respiro que o header ocupava. */
.internal-hero {
    padding-top: calc(129px + clamp(2rem, 6vw, 4rem));
}

/* Rede social sem ícone correspondente (ex: YouTube) — cai pra texto,
   mas não pode herdar o azul padrão de link. */
.nav-social--redes a,
.footer-social a {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
}
.nav-social--redes a:hover,
.footer-social a:hover {
    opacity: 0.8;
}
/* Área do Cliente no rodapé: contornado em branco, abaixo das redes. */
/* "Área do Cliente" e "Avalie-nos no Google": a mesma pílula de contorno. */
.footer-area-cliente,
.footer-avaliacao-google {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.25rem;
    padding: 0.55rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.2s;
}
.footer-area-cliente:hover,
.footer-avaliacao-google:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
}
.footer-area-cliente svg {
    width: 18px;
    height: 18px;
}
/* O "G" colorido some no marrom: vai num círculo branco, que encosta na borda. */
.footer-avaliacao-google {
    gap: 0.6rem;
    padding: 0.3rem 1.2rem 0.3rem 0.3rem;
}
.footer-avaliacao-google__g {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--white);
}
.footer-avaliacao-google__g svg {
    width: 17px;
    height: 17px;
}
.footer-avaliacao-google__estrelas {
    color: #fbbc04;
    letter-spacing: 0.08em;
}
.footer-social img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Abre/fecha o menu mobile via [data-menu-toggle] (JS já existente do tema,
   sem depender do bootstrap.bundle.js). */
#menu-principal {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
@media (max-width: 1337.98px) {
    #menu-principal {
        display: none;
        flex-basis: 100%;
        background: var(--brown-900);
        border-radius: 20px;
        padding: 1.5rem;
        margin-top: 1rem;
    }
    #menu-principal.aberto {
        display: block;
    }
}

/* @the_menu('header') devolve <ul><li><a> sem classes — estiliza igual .nav-links. */
.nav-links-wrap > ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 30px;
    margin: 0 0 0 155px;
    padding: 0;
}
.nav-links-wrap > ul > li {
    position: relative;
}
.nav-links-wrap > ul > li > a {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.nav-links-wrap > ul > li > a:hover {
    opacity: 0.8;
}
/* Seta do item com submenu — `@the_menu` não marca "tem filhos" com classe,
   então detecta via :has() em vez de depender de dropdown-toggle (Bootstrap
   JS não está carregado; o flyout é só CSS, ver .nav-links-wrap li:hover). */
.nav-links-wrap > ul > li:has(> ul) > a::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: '';
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}
/* Submenu (itens com filhos no menu do admin) — flyout ao passar o mouse.
   Fundo branco com bolinha marrom antes de cada item, não a caixa escura. */
.nav-links-wrap ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    /* `<ul>` vem com bullet e padding-left de fábrica do navegador — sem isso
       some um circulo vazado atrás da bolinha marrom que a gente desenha. */
    list-style: none;
    margin: 0;
    background: var(--white);
    border-radius: 14px;
    padding: 0.75rem 1.1rem;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.18);
    z-index: 10;
}
.nav-links-wrap ul ul li > a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--brown-800);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    padding: 0.3rem 0.25rem;
}
.nav-links-wrap ul ul li > a::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brown-400);
}
.nav-links-wrap ul ul li > a:hover {
    text-decoration: underline;
}
.nav-links-wrap li:hover > ul {
    display: block;
}
@media (max-width: 1337.98px) {
    .nav-links-wrap > ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin: 0 0 1.5rem;
    }
    .nav-links-wrap ul ul {
        display: block;
        position: static;
        box-shadow: none;
        margin-top: 0.5rem;
    }
}

/* @the_menu('footer') dentro de .footer-links (div, não <ul>) */
.footer-links > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.footer-links > ul a {
    color: var(--white);
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.footer-links > ul a:hover {
    opacity: 1;
}
/* ============ CONTATO ============ */
.contato__title {
    margin-bottom: 1.5rem;
}

.contato-card {
    background: var(--white);
    border-radius: 18px;
    padding: 0.5rem 1.5rem;
    margin-bottom: 2rem;
}
.contato-card__row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0;
}
.contato-card__row + .contato-card__row {
    border-top: 1px solid rgba(43, 34, 23, 0.08);
}
.contato-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    color: var(--brown-400);
    flex-shrink: 0;
}
.contato-card__icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.contato-card__row a {
    color: var(--brown-800);
    font-weight: 600;
    text-decoration: none;
    font-size: 20px;
}

.contato__social-title {
    color: var(--brown-800);
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 0.75rem;
}
.contato-social {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}
.contato-social img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    /* ícones já vêm brancos (usados no footer/nav escuros) — aqui tingimos
     pra um cinza-marrom neutro já que o fundo agora é claro */
    filter: brightness(0) opacity(45%);
}

.contato-gallery {
    position: relative;
    top: -300px;
    margin-bottom: -250px;
}
.contato-gallery__photo {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}
.contato-gallery__stat {
    position: absolute;
    bottom: -1.25rem;
    left: 10%;
    max-width: 46%;
    background: var(--white);
    border-radius: 16px;
    padding: 0.9rem 1.25rem;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.12);
}
.contato-gallery__stat--right {
    left: auto;
    right: 10%;
}
.contato-gallery .stat__number {
    font-size: clamp(2.5rem, 4.2vw, 3.75rem);
}
.contato-gallery .stat__label {
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    color: var(--brown-800);
}

.contato-form-card {
    background: var(--white);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.08);
    z-index: 1;
    position: relative;
}
.contato-form-card__title {
    color: var(--brown-800);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

@media (max-width: 991.98px) {
    /* O top/-margin negativos de .contato-gallery pressupõem as 2 colunas
       lado a lado do desktop — nesse ponto as colunas já empilham (col-lg-*),
       e o deslocamento levava a foto pra cima do bloco de contato. */
    .contato-gallery {
        top: 0;
        margin-bottom: 80px;
    }
}
@media (max-width: 767.98px) {
    .contato-gallery__stat,
    .contato-gallery__stat--right {
        position: static;
        display: inline-block;
        max-width: none;
        margin: 1rem 0.5rem 0 0;
    }
}

/* @formulario('contato') usa o mesmo markup .ya-form-* do core; o estilo
   genérico de resources/tema/padrao/css/app.css deixa o submit azul
   (var(--color-marca)) — sobrescreve aqui pra bater com o botão dourado
   usado no resto do tema (ver .imovel-proposal-form .ya-form-submit). */
.contato-form-card .ya-form-submit {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    border: none;
    border-radius: 999px;
    padding: 1.1rem;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
}
.contato-form-card .ya-form-submit:hover {
    opacity: 0.92;
}
/* ============ IMÓVEIS SEMELHANTES (grid estático, não é slider) ============ */
.similar-properties {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0;
}
.similar-properties__grid .property-card {
    width: 100%;
    flex: 1 1 auto;
    /* Aqui SIM precisa de height: 100% — o card não é filho direto do flex
       com stretch (é a .col do Bootstrap que estica), então sem isso ele só
       ocupa a própria altura de conteúdo, deixando espaço vazio na coluna. */
    height: 100%;
}
/* ============ IMÓVEL — CABEÇALHO ============ */
.imovel-single {
    background: var(--bg);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.imovel-single__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}
.imovel-single__title {
    color: var(--brown-800);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    margin: 0;
    max-width: 640px;
}
.imovel-single__head .badge-outline {
    font-size: 24px;
    padding: 0.4rem 1.25rem;
    white-space: nowrap;
}

/* ============ GALERIA ============ */
.imovel-gallery__main {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.imovel-gallery__main img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}
/* Foto principal clicável: abre a galeria ampliada. */
.imovel-gallery__main img[data-gallery-main] {
    cursor: zoom-in;
}
.imovel-gallery__code {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #53493d;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
}
.imovel-gallery__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    opacity: 0.55;
    pointer-events: none;
}

/* Miniaturas: uma linha só, rolando na horizontal, com setas nas pontas. */
.imovel-gallery__strip {
    position: relative;
    margin-bottom: 2.5rem;
}
.imovel-gallery__thumbs {
    position: relative;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.imovel-gallery__thumbs::-webkit-scrollbar {
    display: none;
}
.imovel-gallery__thumb {
    /* 4 miniaturas visíveis por vez. */
    flex: 0 0 calc((100% - 3 * 0.75rem) / 4);
    scroll-snap-align: start;
    border: 2px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background: none;
    line-height: 0;
}
.imovel-gallery__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brown-800);
    font-size: 1.6rem;
    line-height: 1;
    padding-bottom: 3px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%);
    cursor: pointer;
}
.imovel-gallery__nav--prev {
    left: 8px;
}
.imovel-gallery__nav--next {
    right: 8px;
}
.imovel-gallery__nav[hidden] {
    display: none;
}

/* Galeria ampliada (lightbox) da foto principal. */
.imovel-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 4.5rem;
    background: rgba(20, 16, 11, 0.92);
}
.imovel-lightbox[hidden] {
    display: none;
}
.imovel-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    user-select: none;
}
.imovel-lightbox__close,
.imovel-lightbox__nav {
    position: absolute;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    line-height: 1;
    cursor: pointer;
}
.imovel-lightbox__close:hover,
.imovel-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.28);
}
.imovel-lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
}
.imovel-lightbox__nav {
    top: 50%;
    width: 50px;
    height: 50px;
    font-size: 2.2rem;
    padding-bottom: 4px;
    transform: translateY(-50%);
}
.imovel-lightbox__nav--prev {
    left: 1rem;
}
.imovel-lightbox__nav--next {
    right: 1rem;
}
.imovel-lightbox__counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}
@media (max-width: 575.98px) {
    .imovel-lightbox {
        padding: 4rem 0.75rem;
    }
    .imovel-lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: 1.8rem;
    }
    .imovel-lightbox__nav--prev {
        left: 0.5rem;
    }
    .imovel-lightbox__nav--next {
        right: 0.5rem;
    }
}
.imovel-gallery__thumb img {
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
}
.imovel-gallery__thumb.is-active {
    border-color: var(--gold-grad-start);
}
/* Marca d'água nas miniaturas. O CRM só a aplica na foto grande; a versão
   pequena (FotoPequena) vem limpa, então o logo vai por cima aqui. */
.imovel-gallery__thumb {
    position: relative;
}
.imovel-gallery__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/tema-padrao/logo.png') center / 38% auto no-repeat;
    opacity: 0.75;
    pointer-events: none;
}

.imovel-single__description .page-intro__title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

/* ============ SIDEBAR ============ */
.imovel-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 1.5rem;
}

.imovel-price-card {
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    border-radius: 20px;
    padding: 1.75rem;
}
/* Pílula Venda | Locação, só quando o imóvel tem os dois valores. */
.imovel-price-card__toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.imovel-price-card__tab {
    border: 0;
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    background: transparent;
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
.imovel-price-card__tab:hover {
    background: rgba(255, 255, 255, 0.12);
}
.imovel-price-card__tab.is-active {
    background: var(--white);
    color: var(--gold-grad-end);
}
.imovel-price-card__tab:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
}
.imovel-price-card__panel[hidden] {
    display: none;
}
.imovel-price-card__label {
    display: block;
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}
.imovel-price-card__value {
    display: block;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}
.imovel-price-card__row {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.95rem;
}
.imovel-price-card__row:first-of-type {
    margin-top: 0;
}

.imovel-sidebar__whats {
    width: 100%;
}

/* Reels verticais na sidebar, acima da caixa de proposta — mesmo trilho com
   snap de .imovel-videos__reels, só que compacto o bastante para a coluna de
   4/12 (ver parts/imovel-videos-reels.blade.php). */
.imovel-sidebar-reels {
    background: var(--white);
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.08);
}
.imovel-sidebar-reels__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.imovel-sidebar-reels__title {
    color: var(--brown-800);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}
.imovel-sidebar-reels__setas .slider-arrow {
    width: 32px;
    height: 32px;
}
.imovel-sidebar-reels__setas .slider-arrow img {
    width: 11px;
}
.imovel-sidebar-reels__trilho {
    margin: 0 -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.imovel-sidebar-reels__trilho .imovel-video--vertical {
    width: clamp(160px, 60vw, 220px);
}

.imovel-proposal-form {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.08);
}
.imovel-proposal-form__title {
    color: var(--brown-800);
    font-weight: 700;
    font-size: 1.3rem;
    padding: 1.75rem 1.75rem 0;
    margin-bottom: 1rem;
}
.imovel-proposal-form__field {
    display: block;
    width: calc(100% - 3.5rem);
    margin: 0 1.75rem 1rem;
    background: var(--bg);
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.3rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--brown-800);
}
.imovel-proposal-form__field::placeholder {
    color: var(--brown-600);
}
.imovel-proposal-form__field--textarea {
    border-radius: 20px;
    resize: none;
    min-height: 140px;
}
.imovel-proposal-form__check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 1.75rem 1.5rem;
    font-size: 0.85rem;
    color: var(--brown-600);
    cursor: pointer;
}
.imovel-proposal-form__check input {
    margin-top: 0.2rem;
    accent-color: var(--gold-grad-end);
}
.imovel-proposal-form__check a {
    color: var(--brown-800);
    text-decoration: underline;
}
.imovel-proposal-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    border: none;
    padding: 1.25rem;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
}
.imovel-proposal-form__submit img {
    width: 18px;
    filter: brightness(0) invert(1);
    transform: rotate(180deg);
}
.imovel-proposal-form__submit:hover {
    opacity: 0.92;
}

@media (max-width: 991px) {
    .imovel-sidebar {
        position: static;
        margin-top: 2.5rem;
    }
}
@media (max-width: 575.98px) {
    .imovel-single__head {
        flex-direction: column;
    }
    .imovel-gallery__thumb {
        /* 3 miniaturas visíveis por vez no celular. */
        flex-basis: calc((100% - 2 * 0.75rem) / 3);
    }
    .imovel-gallery__thumb img {
        height: 72px;
    }
}
/* ============ IMÓVEL — CARACTERÍSTICAS ============ */
.imovel-specs {
    background: var(--bg);
    padding: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.imovel-specs__grid {
    margin-bottom: 3rem;
}
.imovel-spec-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white);
    border-radius: 16px;
    padding: 1.1rem 1.5rem;
    color: var(--brown-800);
}
.imovel-spec-card img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}
.imovel-spec-card strong {
    font-weight: 700;
}

.imovel-info-block {
    margin-bottom: 2.5rem;
}
.imovel-info-block__title {
    color: var(--brown-800);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.imovel-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--brown-600);
}
.imovel-check-list--2col {
    /* Era column-count: 2 — com itens curtos, o "column-count" abre uma coluna
       larga (metade do container) e deixa um vão enorme antes da segunda
       coluna começar. Grid de verdade alinha os itens lado a lado sem esse
       espaço morto no meio. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2rem;
}
.imovel-check-list li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.75rem;
}
.imovel-check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 16px;
    height: 16px;
    background: url('/img/tema-padrao/icon-done.png') center / contain no-repeat;
}

@media (max-width: 575.98px) {
    .imovel-check-list--2col {
        grid-template-columns: 1fr;
    }
}

/* ============ LISTAGEM DE IMÓVEIS (grid real, filtro em drawer) ============ */
.listagem-imoveis {
    background: var(--bg);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 6rem);
}
.listagem-imoveis__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}
.listagem-imoveis__count {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--brown-800);
    margin: 0;
}
/* H2 do acervo inteiro, na mesma linha da contagem: sem a margem do título de intro. */
.listagem-imoveis__header .page-intro__title {
    margin-bottom: 0;
}
.listagem-imoveis__grid .property-card {
    width: 100%;
    flex: 1 1 auto;
    /* Card não é filho direto do flex com stretch (a .col do Bootstrap é
       quem estica) — sem height: 100% aqui, ele só ocupa a própria altura de
       conteúdo e a coluna maior fica com espaço vazio embaixo do card menor. */
    height: 100%;
}
.listagem-imoveis__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}
.listagem-imoveis__resumo-pagina {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--brown-800);
    margin: 0;
}

/* ============ BLOG — LISTAGEM ============ */
.blog-index {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0;
}
.blog-index__subtitle {
    margin-bottom: 2.5rem;
}
.blog-index__grid {
    margin-bottom: 3rem;
}

.blog-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.blog-card__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.blog-card__media img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.blog-card__badge {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: rgba(43, 34, 23, 0.55);
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
}
.blog-card__title {
    color: var(--brown-800);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.35;
    margin-bottom: 0.6rem;
    /* trava em 2 linhas — todos os títulos ocupam a mesma altura */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__excerpt {
    color: var(--brown-600);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    /* mesma lógica no resumo, resto vira "..." */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brown-800);
    font-weight: 700;
    text-decoration: none;
}
.blog-card__link img {
    width: 16px;
    transform: rotate(180deg);
}
.blog-card__link:hover {
    color: var(--brown-600);
}

/* ============ BLOG — SINGLE (sem mockup próprio) ============ */
.blog-single {
    background: var(--bg);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.blog-single__content {
    max-width: 760px;
    margin: 0 auto;
}
.blog-single__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    margin-bottom: 0.5rem;
}
.blog-single__date {
    display: block;
    color: var(--brown-600);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.blog-single__media {
    position: relative;
    margin-bottom: 2rem;
}
.blog-single__cover {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}
/* Corpo do post (texto colado do Word/Google Docs): subtítulos, negrito e listas. */
.blog-single .page-intro__text h2,
.blog-single .page-intro__text h3 {
    color: var(--brown-800);
    font-weight: 700;
    margin: 2rem 0 0.75rem;
}
.blog-single .page-intro__text h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}
.blog-single .page-intro__text h3 {
    font-size: clamp(1.15rem, 1.8vw, 1.3rem);
}
.blog-single .page-intro__text strong {
    color: var(--brown-800);
}
.blog-single .page-intro__text ul,
.blog-single .page-intro__text ol {
    margin-bottom: 1.25rem;
}
.blog-single .page-intro__text li {
    margin-bottom: 0.5rem;
}
.blog-single__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    color: var(--brown-800);
    font-weight: 700;
    text-decoration: none;
}
.blog-single__back img {
    width: 16px;
}
.blog-single__back:hover {
    color: var(--brown-600);
}

/* ============ PAGINAÇÃO (pills circulares — resources/views/pagination/custom.blade.php) ============ */
.blog-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
@media (max-width: 575.98px) {
    .blog-pagination {
        /* Com muitas páginas (ex: listagem de imóveis) as pills não cabem
           numa linha só e vazavam da tela — aqui quebra e centraliza em vez
           de estourar a largura. */
        justify-content: center;
        gap: 0.5rem;
    }
    .blog-pagination__item {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}
.blog-pagination__item {
    font-size: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brown-800);
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(43, 34, 23, 0.15);
    transition:
        background 0.2s ease,
        color 0.2s ease;
}
.blog-pagination__item.is-active,
.blog-pagination__item:hover {
    background: var(--brown-400);
    color: var(--white);
    border-color: var(--brown-400);
}
.blog-pagination__item--next {
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    border: none;
}
.blog-pagination__item--next img {
    width: 16px;
    filter: brightness(0) invert(1);
}
.blog-pagination__item--gap {
    border: none;
    background: transparent;
    color: var(--brown-600);
    cursor: default;
}
.blog-pagination__item--next:hover {
    opacity: 0.9;
}

/* ============ FORMULÁRIO DE PROPOSTA (single de imóvel) ============
   O @formulario('interesse-imovel') do core gera markup próprio
   (.ya-form/.ya-form-field/.ya-form-submit — "o tema personaliza só por
   classes-hook CSS"), não as classes .imovel-proposal-form__* do mockup.
   Este bloco skina esse markup real pra ficar com a cara do mockup. */
.imovel-proposal-form .ya-form {
    display: block;
    padding-bottom: 1.75rem;
}
.imovel-proposal-form .ya-form-success {
    margin: 1.75rem 1.75rem 0;
    padding: 0.9rem 1.3rem;
    border-radius: 16px;
    background: rgba(43, 34, 23, 0.06);
    color: var(--brown-800);
    font-size: 0.9rem;
}
.imovel-proposal-form .ya-form-field {
    display: block;
    margin: 1rem 1.75rem 0;
}
.imovel-proposal-form .ya-form-field label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--brown-600);
    margin-bottom: 0.35rem;
}
.imovel-proposal-form .ya-form-field input,
.imovel-proposal-form .ya-form-field textarea,
.imovel-proposal-form .ya-form-field select {
    display: block;
    width: 100%;
    background: var(--bg);
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.3rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--brown-800);
}
.imovel-proposal-form .ya-form-field textarea {
    border-radius: 20px;
    resize: none;
    min-height: 120px;
}
.imovel-proposal-form .ya-form-field-consentimento {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--brown-600);
}
.imovel-proposal-form .ya-form-field-consentimento label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    margin-bottom: 0;
}
.imovel-proposal-form .ya-form-field-consentimento input {
    margin-top: 0.2rem;
    accent-color: var(--gold-grad-end);
}
.imovel-proposal-form .ya-form-error {
    margin: 0.35rem 1.75rem 0;
    color: #b3261e;
    font-size: 0.8rem;
}
.imovel-proposal-form .ya-form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 3.5rem);
    margin: 1.25rem 1.75rem 0;
    border: none;
    border-radius: 999px;
    padding: 1.1rem;
    background: linear-gradient(180deg, var(--gold-grad-start) 0%, var(--gold-grad-end) 100%);
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
}
.imovel-proposal-form .ya-form-submit:hover {
    opacity: 0.92;
}

/* ============ IMÓVEL — VÍDEOS ============ */
/* Seção própria, abaixo da galeria de fotos. Largura do .container-fig (e não da
   coluna de conteúdo) de propósito: é o que dá espaço para 4-5 cards verticais
   visíveis na faixa de reels. */
.imovel-videos {
    background: var(--bg);
    padding: 0 0 clamp(2.5rem, 5vw, 4rem);
}
.imovel-videos .page-intro__title {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
}

/* Horizontais: grade 16:9, mesmo raio do palco da galeria. */
.imovel-videos__wide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.imovel-video {
    margin: 0;
    background: var(--brown-950);
    border-radius: 20px;
    overflow: hidden;
}
.imovel-video__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--brown-950);
}
.imovel-video__caption {
    padding: 0.85rem 1.1rem;
    background: var(--white);
    color: var(--brown-800);
    font-size: 0.95rem;
    font-weight: 500;
}
.imovel-video__fallback {
    color: var(--white);
    padding: 1.5rem;
    margin: 0;
}

/* Verticais: trilho reels com snap. Rola por toque/trackpad sozinho; as setas
   são complemento (data-carrossel, ligado em resources/tema/padrao/js/app.js). */
.imovel-videos__reels {
    position: relative;
}
.imovel-videos__trilho {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.imovel-videos__trilho::-webkit-scrollbar {
    display: none;
}
.imovel-video--vertical {
    flex: 0 0 auto;
    width: clamp(200px, 22vw, 268px);
    scroll-snap-align: start;
}
.imovel-video--vertical .imovel-video__player {
    aspect-ratio: 9 / 16;
    height: auto;
}
.imovel-video--vertical .imovel-video__caption {
    font-size: 0.85rem;
    padding: 0.7rem 0.9rem;
}
.imovel-videos__setas {
    position: absolute;
    top: -3.4rem;
    right: 0;
}

@media (max-width: 575.98px) {
    .imovel-videos__wide {
        grid-template-columns: 1fr;
    }
    .imovel-video--vertical {
        width: 72vw;
    }
}
/* ============ EQUIPE ============ */
.team {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0;
}
.team__grid {
    margin-top: 2rem;
}

.team-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 392 / 488;
}
.team-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(43, 34, 23, 0) 40%, rgba(43, 34, 23, 0.85) 100%);
    pointer-events: none;
}
.team-card__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    z-index: 1;
    text-align: center;
    padding: 0 1rem;
}
.team-card__name {
    color: var(--white);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
}
.team-card__whats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.team-card__whats:hover {
    color: var(--white);
    opacity: 0.8;
}
.team-card__whats img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/* ============ NOSSA HISTÓRIA — RESULTADOS ============ */
.historia-resultados {
    background: var(--bg);
    padding: clamp(3rem, 6vw, 6rem) 0;
}
.historia-resultados__stats {
    margin: 1.5rem 0 2rem;
}
.historia-resultados__stats .stat__label {
    color: var(--brown-800);
}
.section-mapa {
    position: relative;
    top: 80px;
    margin-top: -80px;
}
@media (max-width: 767.98px) {
    .section-mapa {
        position: relative;
        top: 00;
        margin-top: 10px;
    }
}
.section-mapa img {
    width: 100%;
    height: auto;
    display: block;
}
.section-mapa__address {
    position: absolute;
    left: clamp(1rem, 6vw, 6rem);
    top: 2rem;
    max-width: 280px;
    background: var(--white);
    color: var(--brown-800);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 1rem 1.25rem;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 15px 35px rgba(43, 34, 23, 0.15);
    transition: opacity 0.2s ease;
}
.section-mapa__address:hover {
    opacity: 0.9;
}

@media (max-width: 767.98px) {
    .section-mapa__address {
        position: static;
        display: block;
        margin: 1rem auto;
        max-width: none;
    }
}