/* ============================================================
   RESIDENCIAL ÉVORA — Atibaia/SP
   Apresentação SeedBrokers
   Sistema visual: "luz de altitude" — claro, arejado, editorial
   ============================================================ */

:root {
    /* Marca Évora — tinta marinha e dourado */
    --tinta: #0E2033;
    --tinta-2: #16304A;
    --tinta-3: #1E4166;
    --tinta-4: #0A1826;

    --ouro: #C1934E;
    --ouro-claro: #E2C79A;
    --ouro-palha: #F0E4D0;
    --ouro-escuro: #9A7439;

    /* Mata — acento discreto vindo dos renders */
    --mata: #3D5140;
    --mata-claro: #6E8168;

    /* Claros — a base da página */
    --branco: #FFFFFF;
    --papel: #FBFAF7;
    --papel-2: #F5F2EB;
    --papel-3: #EDE8DE;
    --linha: #E4DFD4;
    --linha-forte: #D2CABA;

    /* Texto sobre claro */
    --texto: #17222E;
    --texto-medio: #56626F;
    --texto-claro: #8E97A2;

    /* Texto sobre escuro */
    --luz: rgba(251, 250, 247, 0.90);
    --luz-media: rgba(251, 250, 247, 0.62);
    --luz-fraca: rgba(251, 250, 247, 0.32);

    --font-marca: 'Jost', 'Futura', 'Century Gothic', sans-serif;
    --font-display: 'Jost', 'Futura', sans-serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;

    --t-fast: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --t-smooth: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow: 1.1s cubic-bezier(0.22, 1, 0.36, 1);

    --sombra-sm: 0 2px 10px rgba(14, 32, 51, 0.05);
    --sombra-md: 0 18px 46px rgba(14, 32, 51, 0.10);
    --sombra-lg: 0 34px 88px rgba(14, 32, 51, 0.16);

    --nav-h: 78px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    color: var(--texto);
    background: var(--papel);
    line-height: 1.75;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--t-fast); }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
::selection { background: var(--ouro-claro); color: var(--tinta); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.container-estreito { max-width: 900px; margin: 0 auto; padding: 0 48px; }
.section { padding: 132px 0; position: relative; }
/* Navegação por âncora direta (link colado, recarregar em #clube): sem isso
   o topo da seção fica escondido atrás da barra fixa. */
section[id] { scroll-margin-top: calc(var(--nav-h) + 30px); }
.section-compacta { padding: 96px 0; }

/* ============================================================
   TIPOGRAFIA COMUM
   ============================================================ */
.olho {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ouro-escuro);
    margin-bottom: 26px;
}
.olho::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--ouro);
}
.olho.centro { justify-content: center; }
.olho.claro { color: var(--ouro-claro); }
.olho.claro::before { background: var(--ouro-claro); }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -0.012em;
    color: var(--tinta);
}

.titulo-secao {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    margin-bottom: 26px;
}
.titulo-secao em {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ouro-escuro);
}
.titulo-secao strong { font-weight: 500; }

.intro {
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    color: var(--texto-medio);
    max-width: 62ch;
    font-weight: 350;
}
.intro.centro { margin-left: auto; margin-right: auto; text-align: center; }

.fio {
    width: 54px;
    height: 2px;
    background: var(--ouro);
    margin: 30px 0;
}
.fio.centro { margin-left: auto; margin-right: auto; }

/* Entrada dos blocos */
[data-anima] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-anima].visivel { opacity: 1; transform: none; }
[data-anima][data-atraso="1"] { transition-delay: 0.10s; }
[data-anima][data-atraso="2"] { transition-delay: 0.20s; }
[data-anima][data-atraso="3"] { transition-delay: 0.30s; }
[data-anima][data-atraso="4"] { transition-delay: 0.40s; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 38px;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    border-radius: 2px;
    transition: var(--t-fast);
    white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-ouro {
    background: var(--ouro);
    color: var(--branco);
    box-shadow: 0 10px 26px rgba(193, 147, 78, 0.28);
}
.btn-ouro:hover {
    background: var(--ouro-escuro);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(193, 147, 78, 0.34);
}

.btn-tinta {
    background: var(--tinta);
    color: var(--papel);
}
.btn-tinta:hover { background: var(--tinta-3); transform: translateY(-2px); }

.btn-contorno {
    border: 1px solid var(--linha-forte);
    color: var(--tinta);
    background: transparent;
}
.btn-contorno:hover { border-color: var(--ouro); color: var(--ouro-escuro); }

.btn-contorno-claro {
    border: 1px solid rgba(251, 250, 247, 0.34);
    color: var(--papel);
}
.btn-contorno-claro:hover {
    border-color: var(--ouro-claro);
    color: var(--ouro-claro);
    background: rgba(251, 250, 247, 0.05);
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
#preloader.loaded { opacity: 0; visibility: hidden; }

.pre-inner { text-align: center; }

.pre-marca {
    width: 168px;
    margin: 0 auto 30px;
    opacity: 0;
    animation: preSobe 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.pre-sub {
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--luz-fraca);
    margin-bottom: 34px;
    opacity: 0;
    animation: preSobe 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.pre-barra {
    width: 168px;
    height: 1px;
    margin: 0 auto 34px;
    background: rgba(251, 250, 247, 0.14);
    overflow: hidden;
}
.pre-progresso {
    height: 100%;
    width: 0;
    background: var(--ouro);
    animation: preCarrega 2.1s cubic-bezier(0.5, 0, 0.2, 1) 0.3s forwards;
}
.pre-seed { width: 104px; margin: 0 auto; opacity: 0.5; }

@keyframes preSobe { to { opacity: 1; } }
@keyframes preCarrega { to { width: 100%; } }

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: var(--t-smooth);
}
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Opaco de propósito: com fundo translúcido os números da faixa seguinte
       aparecem por baixo da barra ao rolar. */
    background: var(--papel);
    border-bottom: 1px solid var(--linha);
    opacity: 0;
    /* Rápido de propósito: enquanto o fundo não fecha, o conteúdo da página
       aparece por trás do menu. */
    transition: opacity var(--t-fast);
}
.navbar.scrolled::before { opacity: 1; }

.nav-container {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 48px;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.nav-marca { display: flex; align-items: center; }
.nav-marca img { height: 34px; width: auto; transition: var(--t-smooth); }
.nav-marca .marca-escura { display: none; }
.navbar.scrolled .nav-marca .marca-clara { display: none; }
.navbar.scrolled .nav-marca .marca-escura { display: block; }

.nav-links {
    display: flex;
    gap: 34px;
    list-style: none;
}
.nav-links a {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(251, 250, 247, 0.82);
    position: relative;
    padding: 6px 0;
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--ouro);
    transition: var(--t-fast);
}
.nav-links a:hover::after, .nav-links a.ativo::after { width: 100%; }
.nav-links a:hover, .nav-links a.ativo { color: var(--ouro-claro); }

.navbar.scrolled .nav-links a { color: var(--texto-medio); }
.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a.ativo { color: var(--ouro-escuro); }

.nav-direita { display: flex; align-items: center; gap: 22px; }
.nav-seed img { height: 26px; width: auto; opacity: 0.9; }
.nav-seed .seed-escura { display: none; }
.navbar.scrolled .nav-seed .seed-clara { display: none; }
.navbar.scrolled .nav-seed .seed-escura { display: block; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px 0;
}
.nav-toggle span {
    display: block;
    width: 25px;
    height: 1.5px;
    background: var(--papel);
    transition: var(--t-fast);
}
.navbar.scrolled .nav-toggle span { background: var(--tinta); }
.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-creci {
    position: relative;
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--luz-fraca);
    padding-bottom: 8px;
    transition: var(--t-smooth);
}
.navbar.scrolled .nav-creci { color: var(--texto-claro); }

.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--t-smooth);
}
.menu-mobile.active { opacity: 1; visibility: visible; }
.menu-mobile ul { list-style: none; text-align: center; }
.menu-mobile li { margin: 18px 0; }
.menu-mobile a {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--luz);
}
.menu-mobile a:hover { color: var(--ouro-claro); }

/* ============================================================
   HERÓI
   ============================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--tinta);
}

.hero-bg { position: absolute; inset: 0; }
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 2.4s ease, transform 9s ease;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.hero-slide-1 { background-image: url('../midias/piscina.jpg'); }
.hero-slide-2 { background-image: url('../midias/fireplace.jpg'); }
.hero-slide-3 { background-image: url('../midias/clube-aereo.jpg'); }

.hero-veu {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(10, 24, 38, 0.86) 0%, rgba(10, 24, 38, 0.58) 42%, rgba(10, 24, 38, 0.16) 74%),
        linear-gradient(to top, rgba(10, 24, 38, 0.55) 0%, transparent 40%);
}

.hero-conteudo {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 130px 48px 100px;
    width: 100%;
}

.hero-selo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ouro-claro);
    margin-bottom: 30px;
}
.hero-selo::before { content: ''; width: 34px; height: 1px; background: var(--ouro); }

.hero-titulo {
    color: var(--papel);
    font-size: clamp(2.5rem, 6.2vw, 5.1rem);
    font-weight: 200;
    line-height: 1.05;
    margin-bottom: 0;
}
/* Visível para reforçar marca + cidade no H1, mas discreta: a força visual
   fica com as duas linhas de venda logo abaixo. */
.hero-titulo-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--luz-fraca);
    margin-bottom: 14px;
}
.hero-titulo .linha { display: block; overflow: hidden; }
.hero-titulo .linha > span {
    display: block;
    transform: translateY(105%);
    animation: heroSobe 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-titulo .linha-1 > span { animation-delay: 0.15s; }
.hero-titulo .linha-2 > span { animation-delay: 0.30s; }
.hero-titulo .linha-3 > span { animation-delay: 0.45s; }
.hero-titulo .destaque {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ouro-claro);
}
@keyframes heroSobe { to { transform: none; } }

.hero-fio {
    width: 76px;
    height: 2px;
    background: var(--ouro);
    margin: 36px 0 30px;
    transform-origin: left;
    transform: scaleX(0);
    animation: fioAbre 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}
@keyframes fioAbre { to { transform: none; } }

.hero-sub {
    max-width: 54ch;
    font-size: clamp(1rem, 1.5vw, 1.13rem);
    font-weight: 350;
    color: var(--luz);
    opacity: 0;
    animation: apareceSuave 1.2s ease 1s forwards;
}
.hero-sub strong { color: var(--branco); font-weight: 600; }
@keyframes apareceSuave { to { opacity: 1; } }

.hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 42px;
    opacity: 0;
    animation: apareceSuave 1.2s ease 1.25s forwards;
}

.hero-rodape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 48px 34px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    opacity: 0;
    animation: apareceSuave 1.2s ease 1.5s forwards;
}

.hero-preco {
    color: var(--papel);
    line-height: 1.35;
}
.hero-preco .rotulo {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--luz-fraca);
    margin-bottom: 6px;
}
.hero-preco .valor {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 300;
    color: var(--ouro-claro);
}
.hero-preco .condicao {
    display: block;
    font-size: 0.78rem;
    color: var(--luz-media);
}

.hero-contador {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--luz-fraca);
}
.hero-contador .atual { color: var(--ouro-claro); }

.hero-rolar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 0.58rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--luz-fraca);
}
.hero-rolar .traco {
    width: 1px;
    height: 46px;
    background: linear-gradient(to bottom, var(--ouro), transparent);
    animation: rolaTraco 2.2s ease-in-out infinite;
}
@keyframes rolaTraco {
    0%, 100% { opacity: 0.35; transform: scaleY(0.6); transform-origin: top; }
    50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ============================================================
   FAIXA DE NÚMEROS
   ============================================================ */
.numeros {
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
}
.numeros-grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.numero {
    padding: 54px 30px;
    text-align: center;
    border-right: 1px solid var(--linha);
}
.numero:last-child { border-right: none; }
.numero .valor {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    font-weight: 300;
    color: var(--tinta);
    line-height: 1;
    margin-bottom: 12px;
}
.numero .valor span { color: var(--ouro); font-size: 0.5em; }
.numero .rotulo {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-claro);
}

/* ============================================================
   BLOCO EDITORIAL (texto + imagem)
   ============================================================ */
.editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 88px;
    align-items: center;
}
.editorial.invertido .editorial-texto { order: 2; }

.editorial-texto p + p { margin-top: 20px; }
.editorial-texto p {
    color: var(--texto-medio);
    font-weight: 350;
}
.editorial-texto strong { color: var(--tinta); font-weight: 600; }

.editorial-figura {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: var(--sombra-md);
}
.editorial-figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.editorial-figura:hover img { transform: scale(1.04); }

.editorial-figura .selo-figura {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(14, 32, 51, 0.88);
    backdrop-filter: blur(8px);
    color: var(--papel);
    padding: 13px 22px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Lista de marcadores dourados */
.lista-marcas { list-style: none; margin-top: 32px; }
.lista-marcas li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    color: var(--texto-medio);
    font-weight: 350;
}
.lista-marcas li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 1px;
    background: var(--ouro);
}
.lista-marcas strong { color: var(--tinta); font-weight: 600; }

/* ============================================================
   O CLUBE — galeria
   ============================================================ */
.clube { background: var(--papel-2); }

.clube-cabeca {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 62px;
}
.clube-cabeca > div { flex: 0 0 auto; }
.clube-cabeca .intro { margin-bottom: 6px; flex: 1 1 46%; }

.galeria {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.galeria-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--tinta);
    border-radius: 3px;
}
.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity var(--t-smooth);
}
.galeria-item:hover img { transform: scale(1.06); opacity: 0.86; }

.galeria-item .legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 46px 22px 18px;
    background: linear-gradient(to top, rgba(10, 24, 38, 0.86), transparent);
    color: var(--papel);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.galeria-item .legenda .lupa {
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: translateX(-6px);
    transition: var(--t-fast);
}
.galeria-item:hover .legenda .lupa { opacity: 1; transform: none; }

.g-larga { grid-column: span 4; aspect-ratio: 16 / 9; }
/* 0.868 é a proporção que deixa a célula de 2 colunas com a mesma altura
   da célula de 4 colunas em 16/9 — sem isso a primeira fileira fica torta. */
.g-media { grid-column: span 2; aspect-ratio: 0.868; }
.g-terco { grid-column: span 2; aspect-ratio: 4 / 3; }
.g-meia  { grid-column: span 3; aspect-ratio: 3 / 2; }

/* ============================================================
   IMPLANTAÇÃO
   ============================================================ */
.implantacao { background: var(--branco); }

.planta {
    margin-top: 56px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--tinta);
    box-shadow: var(--sombra-lg);
    cursor: zoom-in;
}
.planta img { width: 100%; }

.planta-nota {
    margin-top: 18px;
    font-size: 0.76rem;
    color: var(--texto-claro);
    text-align: center;
}

.destaques-planta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 62px;
}
.destaque-planta {
    padding-top: 24px;
    border-top: 1px solid var(--linha);
}
.destaque-planta .num {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ouro);
    margin-bottom: 12px;
}
.destaque-planta h4 {
    font-size: 1.16rem;
    font-weight: 400;
    margin-bottom: 10px;
}
.destaque-planta p {
    font-size: 0.92rem;
    color: var(--texto-medio);
    font-weight: 350;
    line-height: 1.7;
}

/* ============================================================
   UM DIA AQUI — narrativa escura
   ============================================================ */
.dia {
    background: var(--tinta);
    color: var(--luz);
    position: relative;
    overflow: hidden;
}
.dia .titulo-secao { color: var(--papel); }
.dia .titulo-secao em { color: var(--ouro-claro); }
.dia .intro { color: var(--luz-media); }

.dia-grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 66px;
}
.dia-cartao {
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    aspect-ratio: 3 / 4.2;
}
.dia-cartao img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.dia-cartao:hover img { transform: scale(1.07); }
.dia-cartao::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 24, 38, 0.94) 6%, rgba(10, 24, 38, 0.30) 52%, rgba(10, 24, 38, 0.12) 100%);
}
.dia-texto {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 32px 28px;
}
.dia-texto .hora {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ouro-claro);
    margin-bottom: 8px;
}
.dia-texto h4 {
    color: var(--papel);
    font-size: 1.22rem;
    font-weight: 400;
    margin-bottom: 10px;
}
.dia-texto p {
    font-size: 0.88rem;
    color: var(--luz-media);
    font-weight: 350;
    line-height: 1.65;
}

/* ============================================================
   ATIBAIA / LOCALIZAÇÃO
   ============================================================ */
.atibaia { background: var(--papel); }

.mapa-figura {
    margin-top: 56px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: var(--sombra-md);
    cursor: zoom-in;
}

.distancias {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--linha);
    border: 1px solid var(--linha);
    margin-top: 56px;
}
.distancia {
    background: var(--branco);
    padding: 34px 26px;
    text-align: center;
}
.distancia .km {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 300;
    color: var(--tinta);
    line-height: 1;
}
.distancia .km span { font-size: 0.48em; color: var(--ouro); margin-left: 3px; }
.distancia .destino {
    margin-top: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-claro);
}

.cidade-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
    margin-top: 66px;
}
.cidade-item {
    padding-top: 26px;
    border-top: 1px solid var(--linha);
}
.cidade-item .icone {
    width: 26px;
    height: 26px;
    color: var(--ouro);
    margin-bottom: 16px;
}
.cidade-item h4 { font-size: 1.14rem; font-weight: 400; margin-bottom: 10px; }
.cidade-item p {
    font-size: 0.93rem;
    color: var(--texto-medio);
    font-weight: 350;
    line-height: 1.7;
}

.mapa-iframe {
    margin-top: 62px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: var(--sombra-md);
    filter: saturate(0.82);
}
.mapa-iframe iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ============================================================
   OBRAS
   ============================================================ */
.obras { background: var(--branco); }

.obras-status {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 26px;
    background: var(--papel-2);
    border-left: 2px solid var(--ouro);
    margin-top: 32px;
}
.obras-status .pulso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mata-claro);
    box-shadow: 0 0 0 0 rgba(110, 129, 104, 0.6);
    animation: pulsa 2.4s infinite;
    flex-shrink: 0;
}
@keyframes pulsa {
    70% { box-shadow: 0 0 0 12px rgba(110, 129, 104, 0); }
    100% { box-shadow: 0 0 0 0 rgba(110, 129, 104, 0); }
}
.obras-status p { font-size: 0.92rem; color: var(--texto-medio); font-weight: 350; }
.obras-status strong { color: var(--tinta); font-weight: 600; }

.obras-galeria {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 20px;
    margin-top: 56px;
}
.obras-galeria figure {
    border-radius: 3px;
    overflow: hidden;
    box-shadow: var(--sombra-md);
    cursor: zoom-in;
    position: relative;
}
.obras-galeria img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   OS LOTES — oferta
   ============================================================ */
.lotes {
    background: var(--tinta);
    color: var(--luz);
    position: relative;
    overflow: hidden;
}
.lotes::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../midias/aerea-lotes.jpg') center/cover;
    opacity: 0.10;
}
/* Escurece o topo e o rodapé para os cartões não flutuarem sobre a textura. */
.lotes::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--tinta) 0%, rgba(14, 32, 51, 0.35) 40%, rgba(14, 32, 51, 0.35) 60%, var(--tinta) 100%);
}
.lotes .container { position: relative; z-index: 2; }
.lotes .titulo-secao { color: var(--papel); }
.lotes .titulo-secao em { color: var(--ouro-claro); }
.lotes .intro { color: var(--luz-media); }

.oferta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 62px;
}
.oferta-cartao {
    background: rgba(10, 24, 38, 0.55);
    border: 1px solid rgba(251, 250, 247, 0.15);
    padding: 46px 42px;
    border-radius: 3px;
    backdrop-filter: blur(6px);
}
.oferta-cartao.principal {
    background: var(--papel);
    border-color: var(--papel);
    color: var(--texto);
}
.oferta-cartao .etiqueta {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ouro-claro);
    margin-bottom: 20px;
}
.oferta-cartao.principal .etiqueta { color: var(--ouro-escuro); }

.oferta-cartao h3 {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--papel);
    margin-bottom: 18px;
}
.oferta-cartao.principal h3 { color: var(--tinta); }

.preco-grande {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 300;
    color: var(--tinta);
    line-height: 1;
    margin-bottom: 8px;
}
.preco-grande .cifrao { font-size: 0.44em; color: var(--ouro); margin-right: 6px; vertical-align: 0.42em; }
.preco-nota { font-size: 0.86rem; color: var(--texto-medio); }

.condicoes { list-style: none; margin: 30px 0 0; }
.condicoes li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 0;
    border-top: 1px solid var(--linha);
    font-size: 0.94rem;
    color: var(--texto-medio);
    font-weight: 350;
}
.condicoes li:first-child { border-top: none; padding-top: 0; }
.condicoes li svg { width: 17px; height: 17px; color: var(--ouro); flex-shrink: 0; margin-top: 4px; }
.condicoes strong { color: var(--tinta); font-weight: 600; }

.lista-infra { list-style: none; }
.lista-infra li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 13px 0;
    border-top: 1px solid rgba(251, 250, 247, 0.11);
    font-size: 0.93rem;
    color: var(--luz-media);
    font-weight: 350;
}
.lista-infra li:first-child { border-top: none; padding-top: 0; }
.lista-infra li svg { width: 16px; height: 16px; color: var(--ouro-claro); flex-shrink: 0; margin-top: 4px; }
.lista-infra strong { color: var(--papel); font-weight: 600; }

.lotes-cta { margin-top: 38px; }

/* ============================================================
   FICHA TÉCNICA
   ============================================================ */
.ficha { background: var(--papel-2); }

.ficha-grade {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 76px;
    margin-top: 56px;
}
.ficha-linha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 26px;
    padding: 19px 0;
    border-bottom: 1px solid var(--linha);
}
.ficha-linha dt {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--texto-claro);
    padding-top: 4px;
}
.ficha-linha dd {
    text-align: right;
    margin-left: auto;
    color: var(--tinta);
    font-weight: 400;
    font-size: 0.97rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--branco); }

.faq-lista { margin-top: 50px; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-pergunta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 27px 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 400;
    color: var(--tinta);
}
.faq-pergunta:hover { color: var(--ouro-escuro); }
.faq-sinal {
    position: relative;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.faq-sinal::before, .faq-sinal::after {
    content: '';
    position: absolute;
    background: var(--ouro);
    transition: var(--t-fast);
}
.faq-sinal::before { left: 0; top: 7px; width: 15px; height: 1.5px; }
.faq-sinal::after { left: 6.75px; top: 0; width: 1.5px; height: 15px; }
.faq-item.aberto .faq-sinal::after { transform: rotate(90deg); opacity: 0; }

.faq-resposta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-resposta p {
    padding-bottom: 28px;
    color: var(--texto-medio);
    font-weight: 350;
    max-width: 76ch;
}

/* ============================================================
   FAIXA FAMÍLIA
   ============================================================ */
.faixa-familia {
    position: relative;
    height: 46vh;
    min-height: 320px;
    background: url('../midias/familia.jpg') center 30% / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.faixa-familia::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 24, 38, 0.52);
}
.faixa-familia blockquote {
    position: relative;
    z-index: 2;
    max-width: 24ch;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.24;
    color: var(--papel);
    padding: 0 30px;
}
.faixa-familia blockquote span { color: var(--ouro-claro); }

/* ============================================================
   CONTATO
   ============================================================ */
.contato { background: var(--papel); }

.contato-grade {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 80px;
    align-items: start;
}

.contato-canais { list-style: none; margin-top: 40px; }
.contato-canais li {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 0;
    border-top: 1px solid var(--linha);
}
.contato-canais li:first-child { border-top: none; }
.contato-canais svg { width: 19px; height: 19px; color: var(--ouro); flex-shrink: 0; margin-top: 4px; }
.contato-canais .rotulo {
    display: block;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--texto-claro);
    margin-bottom: 3px;
}
.contato-canais .dado { color: var(--tinta); font-weight: 500; }
.contato-canais a.dado:hover { color: var(--ouro-escuro); }

.form-caixa {
    background: var(--branco);
    border: 1px solid var(--linha);
    padding: 48px 44px;
    border-radius: 3px;
    box-shadow: var(--sombra-sm);
}
.form-caixa h3 {
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: 8px;
}
.form-caixa .sub {
    font-size: 0.9rem;
    color: var(--texto-medio);
    margin-bottom: 32px;
}

.campo { margin-bottom: 20px; }
.campo label {
    display: block;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--texto-claro);
    margin-bottom: 9px;
}
.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: 2px;
    transition: var(--t-fast);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--ouro);
    background: var(--branco);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-caixa .btn { width: 100%; margin-top: 8px; }
.form-nota {
    margin-top: 18px;
    font-size: 0.74rem;
    color: var(--texto-claro);
    text-align: center;
    line-height: 1.6;
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape {
    background: var(--tinta);
    color: var(--luz-media);
    padding: 84px 0 34px;
}
.rodape-topo {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 62px;
    padding-bottom: 54px;
    border-bottom: 1px solid rgba(251, 250, 247, 0.11);
}
.rodape-marca img { width: 200px; margin-bottom: 24px; }
.rodape-marca p { font-size: 0.9rem; font-weight: 350; max-width: 42ch; }

.rodape-col h5 {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ouro-claro);
    margin-bottom: 20px;
}
.rodape-col ul { list-style: none; }
.rodape-col li { margin-bottom: 11px; font-size: 0.9rem; font-weight: 350; }
.rodape-col a:hover { color: var(--ouro-claro); }

.rodape-baixo {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}
.rodape-seed { display: flex; align-items: center; gap: 15px; }
.rodape-seed img { width: 118px; opacity: 0.86; }
.rodape-seed span {
    font-size: 0.66rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--luz-fraca);
}
.rodape-legal {
    font-size: 0.7rem;
    color: var(--luz-fraca);
    max-width: 62ch;
    line-height: 1.7;
}

/* ============================================================
   BOTÃO FLUTUANTE
   ============================================================ */
.zap {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px 14px 18px;
    background: var(--tinta);
    color: var(--papel);
    border-radius: 60px;
    box-shadow: 0 14px 40px rgba(14, 32, 51, 0.32);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transform: translateY(90px);
    opacity: 0;
    transition: var(--t-smooth);
}
.zap.visivel { transform: none; opacity: 1; }
.zap:hover { background: var(--ouro); transform: translateY(-3px); }
.zap svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(8, 18, 30, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 68px 26px;
    opacity: 0;
    visibility: hidden;
    transition: var(--t-smooth);
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 2px;
}
.lightbox-legenda {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--luz-media);
}
.lightbox-contador {
    position: absolute;
    top: 26px;
    left: 30px;
    font-family: var(--font-display);
    font-size: 0.82rem;
    color: var(--luz-fraca);
}
.lightbox-fechar {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 42px;
    height: 42px;
    color: var(--luz-media);
    font-size: 1.5rem;
    line-height: 1;
}
.lightbox-fechar:hover { color: var(--ouro-claro); }
.lightbox-ant, .lightbox-prox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luz-media);
    font-size: 1.7rem;
}
.lightbox-ant { left: 20px; }
.lightbox-prox { right: 20px; }
.lightbox-ant:hover, .lightbox-prox:hover { color: var(--ouro-claro); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1080px) {
    .container, .container-estreito, .nav-container, .hero-conteudo, .hero-rodape { padding-left: 32px; padding-right: 32px; }
    .section { padding: 96px 0; }
    .editorial { gap: 52px; }
    .destaques-planta, .distancias { grid-template-columns: repeat(2, 1fr); }
    .dia-grade { grid-template-columns: repeat(2, 1fr); }
    .cidade-grade { grid-template-columns: 1fr; gap: 30px; }
    .contato-grade { grid-template-columns: 1fr; gap: 52px; }
    .rodape-topo { grid-template-columns: 1fr 1fr; gap: 40px; }
    .rodape-marca { grid-column: 1 / -1; }
    .ficha-grade { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
    .nav-creci { display: none; }
    :root { --nav-h: 68px; }

    .editorial, .editorial.invertido { grid-template-columns: 1fr; }
    .editorial.invertido .editorial-texto { order: 0; }
    .editorial-figura { aspect-ratio: 4 / 3; }

    .numeros-grade { grid-template-columns: repeat(2, 1fr); }
    .numero { padding: 36px 20px; border-bottom: 1px solid var(--linha); }
    .numero:nth-child(2n) { border-right: none; }
    .numero:nth-child(n+3) { border-bottom: none; }

    .clube-cabeca { flex-direction: column; align-items: flex-start; gap: 26px; }
    .galeria { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .g-larga, .g-media, .g-terco, .g-meia { grid-column: span 2; aspect-ratio: 16 / 10; }

    .oferta { grid-template-columns: 1fr; }
    .oferta-cartao { padding: 34px 28px; }

    .obras-galeria { grid-template-columns: 1fr; }
    .form-caixa { padding: 34px 26px; }
    .campo-duplo { grid-template-columns: 1fr; }

    /* O rodapé do herói é absoluto: sem essa folga ele encosta nos botões. */
    .hero-conteudo { padding-bottom: 190px; }
    .hero-rodape { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hero-rolar { display: none; }
    .nav-marca img { height: 27px; }
    .zap { right: 16px; bottom: 16px; padding: 13px 19px 13px 16px; }
    .zap span { display: none; }
    .zap { border-radius: 50%; padding: 16px; }
}

@media (max-width: 560px) {
    .container, .container-estreito, .nav-container, .hero-conteudo, .hero-rodape { padding-left: 22px; padding-right: 22px; }
    .section { padding: 76px 0; }
    .galeria { grid-template-columns: 1fr; }
    .g-larga, .g-media, .g-terco, .g-meia { grid-column: span 1; }
    .dia-grade { grid-template-columns: 1fr; }
    .destaques-planta, .distancias { grid-template-columns: 1fr; }
    .distancia { border-bottom: 1px solid var(--linha); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero-titulo .linha > span { transform: none; }
    .hero-fio { transform: none; }
    .hero-sub, .hero-acoes, .hero-rodape { opacity: 1; }
    [data-anima] { opacity: 1; transform: none; }
}

/* ============================================================
   IMPRESSÃO — evita desperdício de tinta
   ============================================================ */
@media print {
    .navbar, .menu-mobile, .zap, .lightbox, #preloader, .hero-rolar { display: none !important; }
    body { background: #fff; }
    .section { padding: 30px 0; break-inside: avoid; }
}