/* ============================================================
   Átrio Imóveis — design system
   Mobile-first · sem dependências externas
   ============================================================ */

:root {
    --bg:        #f7f5f1;
    --superficie:#ffffff;
    --tinta:     #1b2530;
    --suave:     #6b7580;
    --linha:     #e7e2d8;
    --marca:     #186179;
    --marca-escura: #104a5e;
    --ouro:      #b98a3b;
    --ouro-claro:#f4ead7;
    --whats:     #1fae54;
    --perigo:    #b3402e;
    --raio:      18px;
    --raio-md:   12px;
    --sombra:    0 1px 2px rgb(28 36 34 / .05), 0 14px 34px -14px rgb(28 36 34 / .16);
    --sombra-leve: 0 1px 3px rgb(28 36 34 / .08);
    --serif:     "New York", ui-serif, Georgia, "Times New Roman", serif;
    --sans:      ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 .6em; }

.container {
    width: min(1120px, 100% - 2.5rem);
    margin-inline: auto;
}

.ico { flex: none; vertical-align: -3px; }

/* ---------- Cabeçalho ---------- */

.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--linha) 70%, transparent);
}

.topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .8rem;
}

.logo {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

.logo small {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--suave);
}

.logo-ponto { color: var(--ouro); margin-left: -0.25rem; }

.menu {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .92rem;
    font-weight: 550;
}

.menu a {
    padding: .5rem .7rem;
    border-radius: 999px;
    transition: background .15s ease;
}

.menu a:hover { background: color-mix(in srgb, var(--marca) 8%, transparent); }

.menu-cta {
    background: var(--marca);
    color: #fff !important;
}

.menu-cta:hover { background: var(--marca-escura) !important; }

.menu-fav {
    display: inline-grid;
    place-items: center;
    padding: .45rem !important;
    color: var(--marca);
}

/* Telas estreitas: logotipo empilhado ("imóveis" abaixo do nome) para o menu caber inteiro */
@media (max-width: 560px) {
    .topo-linha { gap: .5rem; }
    .topo .logo {
        flex-wrap: wrap;
        row-gap: .2rem;
        font-size: 1.2rem;
        line-height: 1;
    }
    .topo .logo small {
        flex-basis: 100%;
        font-size: .54rem;
        letter-spacing: .3em;
    }
    .menu { font-size: .8rem; gap: 0; }
    .menu a { padding: .4rem .45rem; }
    .menu-fav { padding: .4rem .3rem !important; }
}

/* ---------- Botões ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--marca);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .78rem 1.5rem;
    font: 600 .95rem var(--sans);
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.botao:hover { background: var(--marca-escura); }
.botao:active { transform: scale(.98); }

.botao-claro { background: #fff; color: var(--marca); }
.botao-claro:hover { background: var(--ouro-claro); color: var(--marca-escura); }

.botao-borda {
    background: transparent;
    color: var(--tinta);
    border: 1.5px solid var(--linha);
}
.botao-borda:hover { background: color-mix(in srgb, var(--linha) 35%, transparent); border-color: var(--suave); }

.botao-whats { background: var(--whats); }
.botao-whats:hover { background: #178a42; }

.botao-perigo { background: transparent; color: var(--perigo); border: 1.5px solid color-mix(in srgb, var(--perigo) 35%, transparent); }
.botao-perigo:hover { background: color-mix(in srgb, var(--perigo) 8%, transparent); }

/* ---------- Hero ---------- */

.hero {
    padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem);
    background:
        radial-gradient(1100px 480px at 85% -10%, color-mix(in srgb, var(--ouro) 14%, transparent), transparent 65%),
        radial-gradient(900px 420px at 0% 0%, color-mix(in srgb, var(--marca) 9%, transparent), transparent 60%);
}

.hero-olho {
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--marca);
    margin-bottom: 1rem;
}

.hero-titulo {
    font-size: clamp(2.1rem, 6.5vw, 3.6rem);
    max-width: 15ch;
}

.hero-titulo em {
    font-style: italic;
    color: var(--marca);
}

.hero-sub {
    color: var(--suave);
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    max-width: 44ch;
    margin-bottom: 1.8rem;
}

.hero-numeros {
    margin-top: 1.2rem;
    color: var(--suave);
    font-size: .92rem;
}

.hero-numeros strong { color: var(--tinta); font-size: 1.05rem; }

/* Busca */

.busca {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: .9rem;
    max-width: 720px;
}

.busca-abas {
    display: inline-flex;
    background: var(--bg);
    border-radius: 999px;
    padding: .25rem;
    margin-bottom: .8rem;
}

.busca-abas input { position: absolute; opacity: 0; }

.busca-abas span {
    display: inline-block;
    padding: .45rem 1.2rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--suave);
    cursor: pointer;
    transition: all .15s ease;
}

.busca-abas input:checked + span {
    background: var(--tinta);
    color: #fff;
}

.busca-campos {
    display: grid;
    gap: .6rem;
}

.busca-texto {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--bg);
    border-radius: var(--raio-md);
    padding: 0 .9rem;
    color: var(--suave);
}

.busca-texto input {
    border: none;
    background: none;
    padding: .85rem 0;
    font: inherit;
    width: 100%;
    outline: none;
    color: var(--tinta);
}

.busca select {
    border: none;
    background: var(--bg);
    border-radius: var(--raio-md);
    padding: .85rem .9rem;
    font: inherit;
    color: var(--tinta);
}

@media (min-width: 720px) {
    .busca-campos { grid-template-columns: 1fr 200px auto; }
}

/* ---------- Seções ---------- */

.secao { padding-block: clamp(1.8rem, 5vw, 3.2rem); }

.secao-cabeca {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.secao-cabeca h2 { margin: 0; }

.link-seta {
    font-size: .92rem;
    font-weight: 600;
    color: var(--marca);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

/* ---------- Cards de imóvel ---------- */

.cards { display: grid; gap: 1.1rem; }

.cards-rolagem {
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 320px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .25rem .25rem 1rem;
    margin: -.25rem;
    scrollbar-width: none;
}

.cards-rolagem::-webkit-scrollbar { display: none; }

.cards-rolagem .card { scroll-snap-align: start; }

.cards-grade { grid-template-columns: 1fr; }

@media (min-width: 640px) {
    .cards-grade { grid-template-columns: repeat(2, 1fr); }
    .cards-rolagem { grid-auto-columns: 320px; }
}

@media (min-width: 980px) {
    .cards-grade { grid-template-columns: repeat(3, 1fr); }
    .cards-rolagem {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        padding: 0;
        margin: 0;
    }
}

.card {
    position: relative;
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra-leve);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
    .card:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
}

.card-foto {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--linha);
}

.card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-selos {
    position: absolute;
    top: .7rem;
    left: .7rem;
    display: flex;
    gap: .4rem;
}

.selo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgb(28 36 34 / .78);
    color: #fff;
    backdrop-filter: blur(4px);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: .3rem .65rem;
}

.selo-ouro { background: var(--ouro); }
.selo-novo { background: var(--marca); }
.selo-claro { background: rgb(255 255 255 / .85); color: var(--tinta); }
.selo-verde { background: color-mix(in srgb, var(--marca) 14%, #fff); color: var(--marca); }
.selo-status { background: var(--perigo); }

.card-favorito {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgb(255 255 255 / .88);
    color: var(--tinta);
    cursor: pointer;
    transition: transform .12s ease;
}

.card-favorito:active { transform: scale(.88); }

.card-favorito.ativo { color: var(--perigo); }
.card-favorito.ativo .ico { fill: currentColor; }

.card-corpo { padding: .95rem 1.05rem 1.1rem; }

.card-preco {
    font-size: 1.22rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    margin-bottom: .15rem;
}

.card-titulo {
    font-family: var(--sans);
    font-size: .98rem;
    font-weight: 550;
    line-height: 1.35;
    margin-bottom: .25rem;
}

.card-lugar {
    color: var(--suave);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .6rem;
}

.card-ficha {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin: 0;
    padding: .6rem 0 0;
    border-top: 1px solid var(--linha);
    color: var(--suave);
    font-size: .86rem;
    font-weight: 550;
}

.card-ficha li { display: flex; align-items: center; gap: .35rem; }

/* ---------- Home: tipos & CTA ---------- */

.tipos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
}

@media (min-width: 720px) { .tipos { grid-template-columns: repeat(3, 1fr); } }

.tipos a {
    display: grid;
    justify-items: start;
    gap: .6rem;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.1rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--tinta);
    transition: border-color .15s ease, transform .15s ease;
}

.tipos a:hover { border-color: var(--marca); transform: translateY(-2px); }
.tipos .ico { color: var(--marca); }

/* "Onde você quer estar?" — cartões-destino com gradiente e ondas */

.lugares-grupo {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--suave);
    margin: 1.4rem 0 .8rem;
}

.lugares-grupo:first-of-type { margin-top: 0; }
.lugares-grupo .ico { color: var(--marca); }

.lugares {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 164px;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .25rem .25rem 1rem;
    margin: -.25rem;
    scrollbar-width: none;
}

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

@media (min-width: 980px) {
    .lugares {
        grid-auto-flow: row;
        grid-auto-columns: unset;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        overflow: visible;
        padding: 0;
        margin: 0;
    }
}

.lugar {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
    border-radius: 20px;
    padding: 1rem;
    background: linear-gradient(155deg, var(--g1), var(--g2));
    color: #fff;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.lugar:hover { transform: translateY(-4px); box-shadow: var(--sombra); }

.lugar-ondas {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    width: 100%;
    height: 58%;
    pointer-events: none;
}

.lugar-sol {
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgb(255 255 255 / .35);
}

.lugar-nome {
    position: relative;
    font-family: var(--serif);
    font-size: 1.18rem;
    font-weight: 650;
    line-height: 1.12;
    text-wrap: balance;
    text-shadow: 0 1px 8px rgb(0 0 0 / .18);
}

.lugar-cidade {
    position: relative;
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .85;
    margin-top: .15rem;
}

.lugar-n {
    position: relative;
    align-self: flex-start;
    margin-top: .55rem;
    background: rgb(255 255 255 / .22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: .28rem .65rem;
    font-size: .74rem;
    font-weight: 650;
}

/* Estado vazio com saídas */

.vazio-saidas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-top: .9rem;
}

.vazio-ajuda { margin-top: 1.2rem; font-size: .92rem; }

.vazio-whats {
    color: var(--marca);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faixa-cta {
    background: linear-gradient(120deg, var(--marca-escura), var(--marca));
    color: #fff;
    border-radius: calc(var(--raio) + 6px);
    padding: clamp(1.6rem, 4vw, 2.6rem);
    display: grid;
    gap: 1.2rem;
}

.faixa-cta h2 { color: #fff; margin-bottom: .3rem; }
.faixa-cta p { color: rgb(255 255 255 / .82); margin: 0; }

@media (min-width: 820px) {
    .faixa-cta { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- Listagem ---------- */

.listagem-cabeca { margin-bottom: 1rem; }
.listagem-cabeca h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: .1em; }
.listagem-sub { color: var(--suave); }

.filtros { margin-bottom: 1.4rem; display: grid; gap: .7rem; }

.chips {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .3rem;
    scrollbar-width: none;
}

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

.chip {
    flex: none;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: var(--superficie);
    border: 1.5px solid var(--linha);
    font-size: .88rem;
    font-weight: 600;
    color: var(--suave);
    transition: all .15s ease;
}

.chip:hover { border-color: var(--suave); color: var(--tinta); }

.chip-ativo {
    background: var(--tinta);
    border-color: var(--tinta);
    color: #fff;
}

.chips-divisor {
    flex: none;
    width: 1px;
    background: var(--linha);
    margin-block: .3rem;
}

.filtros-mais {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
}

.filtros-mais summary {
    list-style: none;
    cursor: pointer;
    padding: .8rem 1.1rem;
    font-weight: 600;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--marca);
}

.filtros-mais summary::-webkit-details-marker { display: none; }

.filtros-form {
    display: grid;
    gap: .9rem;
    padding: .3rem 1.1rem 1.1rem;
    border-top: 1px solid var(--linha);
    padding-top: 1rem;
}

@media (min-width: 720px) {
    .filtros-form { grid-template-columns: repeat(3, 1fr); align-items: end; }
    .filtros-form button { grid-column: -2; }
}

.filtros-form label,
.admin-form label,
.login-card label {
    display: grid;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--suave);
}

.filtros-form input,
.filtros-form select,
.admin-form input:not([type="checkbox"]),
.admin-form select,
.admin-form textarea,
.login-card input {
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-md);
    background: var(--superficie);
    padding: .7rem .85rem;
    font: inherit;
    color: var(--tinta);
    width: 100%;
}

.filtros-form input:focus,
.filtros-form select:focus,
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus,
.login-card input:focus {
    outline: 2px solid color-mix(in srgb, var(--marca) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--marca);
}

/* ---------- Paginação / vazio ---------- */

.paginacao {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: 2rem;
}

.pagina {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    border-radius: 50%;
    font-weight: 600;
    font-size: .92rem;
    border: 1.5px solid var(--linha);
    background: var(--superficie);
}

.pagina:hover { border-color: var(--marca); color: var(--marca); }

.pagina-atual { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.vazio {
    text-align: center;
    background: var(--superficie);
    border-radius: var(--raio);
    padding: 3rem 1.5rem;
    display: grid;
    justify-items: center;
    gap: .4rem;
    color: var(--suave);
}

.vazio-titulo { font-size: 1.15rem; font-weight: 650; color: var(--tinta); }
.vazio .botao, .vazio .botao-borda { margin-top: .8rem; }

/* ---------- Detalhe do imóvel ---------- */

.voltar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--suave);
    margin-bottom: 1rem;
}

.voltar:hover { color: var(--marca); }

.galeria {
    position: relative;
    border-radius: calc(var(--raio) + 4px);
    overflow: hidden;
    box-shadow: var(--sombra-leve);
    margin-bottom: 1.6rem;
}

.galeria-trilho {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    aspect-ratio: 4 / 3;
}

.galeria-trilho::-webkit-scrollbar { display: none; }

@media (min-width: 900px) { .galeria-trilho { aspect-ratio: 21 / 10; } }

.galeria-trilho img {
    flex: 0 0 100%;
    width: 100%;
    object-fit: cover;
    scroll-snap-align: center;
}

.galeria-seta {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgb(255 255 255 / .92);
    color: var(--tinta);
    cursor: pointer;
    box-shadow: var(--sombra-leve);
}

.galeria-ant { left: .9rem; }
.galeria-prox { right: .9rem; }

@media (hover: hover) and (min-width: 720px) {
    .galeria-seta { display: grid; }
}

.galeria-contador {
    position: absolute;
    right: .9rem;
    bottom: .9rem;
    background: rgb(28 36 34 / .72);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .3rem .75rem;
    backdrop-filter: blur(4px);
}

.detalhe-grade { display: grid; gap: 2rem; }

@media (min-width: 900px) {
    .detalhe-grade { grid-template-columns: 1fr 340px; align-items: start; }
}

.selos-linha { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }

.detalhe-cabeca h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }

.detalhe-lugar {
    color: var(--suave);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.preco-bloco {
    margin-block: 1.2rem;
    padding: 1.1rem 1.3rem;
    background: var(--superficie);
    border-radius: var(--raio);
    border: 1px solid var(--linha);
}

.preco {
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.preco-extras { color: var(--suave); font-size: .9rem; margin: .3rem 0 0; }

.ficha-grade {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
}

@media (min-width: 640px) { .ficha-grade { grid-template-columns: repeat(4, 1fr); } }

.ficha-grade li {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio-md);
    padding: .9rem;
    display: grid;
    gap: .15rem;
    color: var(--suave);
    font-size: .82rem;
}

.ficha-grade .ico { color: var(--marca); margin-bottom: .25rem; }
.ficha-grade strong { font-size: 1.15rem; color: var(--tinta); }

/* Simulador de financiamento */

.simulador {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1.3rem;
    margin-bottom: 1.8rem;
}

.simulador h2 { font-size: 1.25rem; margin-bottom: .9rem; }

.simulador-grade {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 720px) { .simulador-grade { grid-template-columns: 1fr 1fr auto; align-items: end; } }

.simulador-grade label {
    display: grid;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--suave);
}

.simulador-grade strong { color: var(--tinta); font-weight: 700; }

.simulador input[type="range"] {
    width: 100%;
    accent-color: var(--marca);
    height: 28px;
}

.simulador-juros span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--tinta);
}

.simulador-juros input {
    width: 5.2rem;
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-md);
    padding: .5rem .6rem;
    font: inherit;
    text-align: right;
}

.simulador-resultado {
    font-size: 1.05rem;
    color: var(--suave);
    margin: 0 0 .3rem;
}

.simulador-resultado strong {
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    font-weight: 800;
    color: var(--marca-escura);
    letter-spacing: -0.01em;
    margin-left: .2rem;
}

.simulador-resultado small { color: var(--suave); font-weight: 600; }

.simulador-nota { color: var(--suave); font-size: .82rem; margin: 0; }

/* Página de favoritos */

.fav-acoes {
    display: flex;
    justify-content: center;
    margin-top: 1.8rem;
}

.descricao h2, .caracteristicas h2 { font-size: 1.25rem; }
.descricao p { color: color-mix(in srgb, var(--tinta) 82%, var(--suave)); max-width: 65ch; }

.caracteristicas { margin-top: 1.6rem; }

.caracteristicas ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.caracteristicas li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-size: .88rem;
    font-weight: 550;
}

.caracteristicas .ico { color: var(--marca); }

.contato-card {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
    display: grid;
    gap: .7rem;
    position: sticky;
    top: 84px;
}

.contato-titulo { font-family: var(--serif); font-size: 1.3rem; font-weight: 650; margin: 0; }
.contato-texto { color: var(--suave); font-size: .92rem; margin: 0 0 .4rem; }
.contato-creci { color: var(--suave); font-size: .78rem; text-align: center; margin: .4rem 0 0; }

/* Formulário "Tenho interesse" */

.form-lead {
    display: grid;
    gap: .7rem;
    border-top: 1px solid var(--linha);
    padding-top: .9rem;
    margin-top: .3rem;
}

.form-lead-titulo {
    text-align: center;
    color: var(--suave);
    font-size: .82rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0;
}

.form-lead label {
    display: grid;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--suave);
}

.form-lead .opcional { font-weight: 400; }

.form-lead input:not([type="hidden"]),
.form-lead textarea {
    border: 1.5px solid var(--linha);
    border-radius: var(--raio-md);
    background: var(--superficie);
    padding: .65rem .8rem;
    font: inherit;
    color: var(--tinta);
    width: 100%;
    resize: vertical;
}

.form-lead input:focus,
.form-lead textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--marca) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--marca);
}

.campo-oculto {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Aviso (flash) público */

.aviso-flutuante {
    margin-top: 1rem;
    background: color-mix(in srgb, var(--marca) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--marca) 35%, transparent);
    color: var(--marca-escura);
    border-radius: var(--raio-md);
    padding: .85rem 1.1rem;
    font-weight: 600;
    font-size: .95rem;
}

/* ---------- Página Sobre ---------- */

.sobre-cabeca {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin-bottom: 1.8rem;
}

.sobre-cabeca h1 { margin: 0; font-size: clamp(2rem, 6vw, 2.8rem); }

.sobre-cargo { color: var(--suave); margin: .2rem 0 0; }

.sobre-foto {
    flex: none;
    width: clamp(96px, 22vw, 140px);
    height: clamp(96px, 22vw, 140px);
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 18%;
    box-shadow: 0 0 0 4px var(--superficie), 0 0 0 6px var(--marca), var(--sombra);
}

.sobre-monograma {
    flex: none;
    display: grid;
    place-items: center;
    width: clamp(76px, 18vw, 110px);
    height: clamp(76px, 18vw, 110px);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--marca-escura), var(--marca));
    color: var(--ouro-claro);
    font-family: var(--serif);
    font-size: clamp(2.4rem, 8vw, 3.6rem);
    font-weight: 700;
    box-shadow: var(--sombra);
}

.sobre-grade { display: grid; gap: 1.8rem; margin-bottom: 1.6rem; }

@media (min-width: 860px) { .sobre-grade { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.sobre-texto p {
    color: color-mix(in srgb, var(--tinta) 84%, var(--suave));
    max-width: 60ch;
    margin-bottom: .9em;
}

.sobre-valores {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .8rem;
}

.sobre-valores li {
    display: flex;
    gap: .8rem;
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 1rem 1.1rem;
}

.sobre-valores .ico { color: var(--marca); margin-top: .15rem; }
.sobre-valores strong { display: block; margin-bottom: .1rem; }
.sobre-valores span { color: var(--suave); font-size: .88rem; }

.sobre-numeros { color: var(--suave); margin-bottom: 1.8rem; }
.sobre-numeros strong { color: var(--tinta); font-size: 1.1rem; }

/* ---------- Leads (admin) ---------- */

.leads-badge {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    margin-left: .35rem;
    padding-inline: .3rem;
    border-radius: 999px;
    background: var(--ouro);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.lead-item { grid-template-columns: 1fr; }

@media (min-width: 820px) { .lead-item { grid-template-columns: 1fr auto; } }

.lead-novo { border-left: 4px solid var(--ouro); }

.lead-mensagem {
    color: var(--tinta);
    font-style: italic;
    background: var(--bg);
    border-radius: var(--raio-md);
    padding: .6rem .8rem;
    margin: .4rem 0 0;
    font-size: .92rem;
}

.lead-imovel { color: var(--marca); font-weight: 600; }

.similares-cabeca { margin-top: 2.5rem; }

/* Barra fixa no celular */

.barra-movel {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgb(255 255 255 / .92);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--linha);
    padding: .7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));
}

.barra-preco { font-weight: 800; font-size: 1.05rem; margin: 0; }
.barra-lugar { color: var(--suave); font-size: .78rem; margin: 0; }

@media (min-width: 900px) { .barra-movel { display: none; } }

body:has(.barra-movel) .rodape { padding-bottom: 5.5rem; }

/* ---------- 404 ---------- */

.pagina-404 { text-align: center; padding-block: clamp(3rem, 10vw, 6rem); }
.erro-codigo { font-family: var(--serif); font-size: clamp(4rem, 15vw, 7rem); font-weight: 700; color: var(--linha); margin: 0; line-height: 1; }
.pagina-404 p { color: var(--suave); }
.pagina-404 .botao { margin-top: 1rem; }

/* ---------- Rodapé ---------- */

.rodape {
    background: var(--tinta);
    color: rgb(255 255 255 / .75);
    margin-top: 2rem;
    padding-block: 2.6rem 1.4rem;
    font-size: .92rem;
}

.rodape-grade { display: grid; gap: 1.8rem; }

@media (min-width: 720px) { .rodape-grade { grid-template-columns: 2fr 1fr 1fr; } }

.logo-rodape { color: #fff; margin-bottom: .4rem; }
.rodape-slogan { max-width: 30ch; }

.rodape-titulo {
    color: #fff;
    font-weight: 650;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .7rem;
}

.rodape a { display: block; padding-block: .22rem; }
.rodape a:hover { color: #fff; }

.rodape-base {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgb(255 255 255 / .12);
    font-size: .8rem;
    color: rgb(255 255 255 / .5);
}

/* ============================================================
   Painel administrativo
   ============================================================ */

.admin { background: #f2f0eb; }

.admin-topo {
    background: var(--tinta);
    color: #fff;
}

.admin-topo .logo small { color: rgb(255 255 255 / .6); }

.admin-topo-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: .75rem;
}

.admin-menu { display: flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 550; }

.admin-menu a, .admin-sair {
    padding: .45rem .8rem;
    border-radius: 999px;
    background: none;
    border: none;
    color: rgb(255 255 255 / .85);
    font: inherit;
    cursor: pointer;
}

.admin-menu a:hover, .admin-sair:hover { background: rgb(255 255 255 / .12); color: #fff; }

.admin-conteudo { padding-block: 1.8rem 3rem; }

.aviso {
    margin-top: 1rem;
    background: var(--ouro-claro);
    border: 1px solid color-mix(in srgb, var(--ouro) 45%, transparent);
    color: #6d4e1b;
    border-radius: var(--raio-md);
    padding: .8rem 1.1rem;
    font-weight: 550;
    font-size: .92rem;
}

.admin-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.admin-cabeca h1 { margin: 0; font-size: 1.7rem; }

.admin-contagem {
    font-family: var(--sans);
    font-size: .85rem;
    font-weight: 650;
    background: var(--linha);
    border-radius: 999px;
    padding: .2rem .7rem;
    vertical-align: middle;
}

.painel-numeros {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
}

@media (min-width: 720px) { .painel-numeros { grid-template-columns: repeat(4, 1fr); } }

.painel-numeros li {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra-leve);
    padding: 1rem 1.2rem;
    display: grid;
    gap: .1rem;
}

.painel-numeros strong { font-size: 1.6rem; letter-spacing: -0.02em; }
.painel-numeros span { color: var(--suave); font-size: .82rem; font-weight: 550; }

.painel-numero-alerta { outline: 2px solid var(--ouro); }
.painel-numero-alerta strong { color: var(--ouro); }

.admin-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

.admin-item {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 1rem;
    background: var(--superficie);
    border-radius: var(--raio);
    padding: .9rem;
    box-shadow: var(--sombra-leve);
    align-items: center;
}

@media (min-width: 820px) { .admin-item { grid-template-columns: 92px 1fr auto; } }

.admin-item-foto {
    aspect-ratio: 1;
    border-radius: var(--raio-md);
    overflow: hidden;
    background: var(--linha);
}

.admin-item-foto img { width: 100%; height: 100%; object-fit: cover; }

.admin-item-titulo { font-weight: 650; margin-bottom: .1rem; }
.admin-item-meta { color: var(--suave); font-size: .88rem; margin-bottom: .35rem; }
.admin-item-info p:last-child { margin: 0; display: flex; align-items: center; gap: .6rem; }
.admin-item-fotos { color: var(--suave); font-size: .82rem; }

.admin-item-acoes {
    display: flex;
    gap: .5rem;
    grid-column: 1 / -1;
}

@media (min-width: 820px) { .admin-item-acoes { grid-column: auto; } }

.admin-item-acoes .botao { padding: .5rem 1rem; font-size: .85rem; }

/* Formulário */

.container-form { max-width: 860px; }

.admin-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    background: var(--superficie);
    border-radius: var(--raio);
    padding: 1.4rem;
    box-shadow: var(--sombra-leve);
}

@media (min-width: 720px) { .admin-form { grid-template-columns: repeat(2, 1fr); } }

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

.campo-caixa {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    color: var(--tinta) !important;
    font-size: .95rem !important;
}

.campo-caixa input { width: 18px; height: 18px; accent-color: var(--marca); }

.admin-form textarea { resize: vertical; line-height: 1.6; }

.previa-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.previa-fotos img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--raio-md);
    border: 1px solid var(--linha);
}

.fotos-titulo { margin-top: 2rem; font-size: 1.25rem; }
.fotos-dica { color: var(--suave); font-size: .88rem; }

.admin-fotos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .8rem;
}

.admin-fotos li {
    position: relative;
    border-radius: var(--raio-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--linha);
}

.admin-fotos img { width: 100%; height: 100%; object-fit: cover; }

.capa-selo { position: absolute; top: .5rem; left: .5rem; }

.admin-fotos-acoes {
    position: absolute;
    right: .4rem;
    bottom: .4rem;
    display: flex;
    gap: .35rem;
}

.admin-fotos-acoes button {
    border: none;
    background: rgb(255 255 255 / .92);
    border-radius: 999px;
    padding: .35rem .7rem;
    font: 600 .78rem var(--sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.admin-fotos-acoes button:hover { background: #fff; }

/* Login */

.login-caixa {
    display: grid;
    place-items: center;
    min-height: 70vh;
}

.login-card {
    width: min(400px, 100%);
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 2rem;
    display: grid;
    gap: 1rem;
}

.login-card h1 { margin: 0; font-size: 1.5rem; }
.login-sub { color: var(--suave); margin: -0.6rem 0 .2rem; font-size: .92rem; }

/* ---------- Impressão: ficha limpa do imóvel ---------- */

.so-impressao { display: none; }

@media print {
    .topo, .rodape, .barra-movel, .voltar, .galeria-seta, .galeria-contador,
    .simulador, .detalhe-lateral, .card-favorito, .aviso-flutuante,
    .similares-cabeca, .similares-cabeca + .cards { display: none !important; }

    body { background: #fff; }

    .detalhe-grade { grid-template-columns: 1fr; }

    .galeria { box-shadow: none; }
    .galeria-trilho { aspect-ratio: auto; overflow: visible; }
    .galeria-trilho img { display: none; }
    .galeria-trilho img:first-child { display: block; max-height: 10cm; width: auto; }

    .so-impressao {
        display: block !important;
        margin-top: 1.2rem;
        padding-top: .8rem;
        border-top: 1px solid #ccc;
        font-size: .9rem;
    }

    .so-impressao p { margin: .15rem 0; }
}

/* ---------- Acessibilidade ---------- */

:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}