/* ============================================================
   LAYOUT "LIFESTYLE" — referência Barnes International
   ============================================================
   Agência boutique com narrativa própria e comprador estrangeiro.
   Vende poucas propriedades caras e precisa que cada uma respire.

   CONTRAPONTO DELIBERADO AO LAYOUT 1 ('catalogo'):
     densidade   lá 3–4 colunas · aqui 2, nunca 4
     respiro     lá 48–80px     · aqui 72–128px
     busca       lá domina o herói · aqui vem DEPOIS do conteúdo
     certificado lá escala A–G em barras · aqui só a letra oficial
     eixo        lá a zona geográfica · aqui o modo de vida
   Se der pra trocar as cores de um e confundir com o outro, algo
   deu errado. Os números acima são o que impede isso.

   TIPOGRAFIA: Marcellus (títulos) e Karla (texto), como todo o
   resto do sistema. O handoff vinha em Jost; trocamos de propósito
   — fonte é global por decisão de projeto, não por layout.
   O caráter aqui vem do respiro e da escala, não de outra fonte.

   COR: 100% do tenant via --dv2-* / --tenant-*. Nenhum valor fixo
   abaixo, com uma exceção: as cores oficiais do certificado
   energético (css/energy-certificate.css), que são lei e nunca
   podem virar a paleta do cliente.

   Tudo escopado em html[data-layout="lifestyle"]. Conferido por
   script: nenhum seletor vaza pros outros cinco layouts.
   ============================================================ */

/* ---- Escala própria deste layout -------------------------- */
html[data-layout="lifestyle"] {
    --lif-gap: clamp(72px, 10vw, 128px);     /* entre seções — o dobro do layout 1 */
    --lif-pad: clamp(20px, 4vw, 56px);       /* respiro lateral do container */
    --lif-max: 1400px;
    --lif-rot: .18em;                        /* tracking dos rótulos miúdos */
    --lif-tit: .08em;                        /* tracking dos títulos de seção */
}

html[data-layout="lifestyle"] .lif-wrap {
    max-width: var(--lif-max);
    margin: 0 auto;
    padding-left: var(--lif-pad);
    padding-right: var(--lif-pad);
}

/* Seções do layout: respiro generoso e nada de borda entre elas.
   A separação aqui é o vazio, não um traço. */
html[data-layout="lifestyle"] .lif-sec {
    padding-top: var(--lif-gap);
}

html[data-layout="lifestyle"] .lif-sec-fundo {
    background: var(--dv2-surface);
    padding-top: var(--lif-gap);
    padding-bottom: var(--lif-gap);
    margin-top: var(--lif-gap);
}

/* Título de seção: centralizado, maiúsculas, muito espaçado.
   Marcellus em caixa alta com tracking lê clássico — é o que
   substitui o Jost do handoff sem perder o caráter editorial. */
html[data-layout="lifestyle"] .lif-titulo {
    font-family: var(--dv2-font-display);
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 30px);
    letter-spacing: var(--lif-tit);
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0 0 clamp(24px, 3vw, 40px);
    text-align: center;
    text-wrap: balance;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-rot {
    font-family: var(--dv2-font-body);
    font-size: 11px;
    letter-spacing: var(--lif-rot);
    text-transform: uppercase;
    color: var(--dv2-text-muted);
}

/* Pílula — o único botão deste layout. Raio total, baixa altura,
   texto miúdo e muito espaçado. */
html[data-layout="lifestyle"] .lif-pilula {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--tenant-accent);
    color: var(--tenant-on-accent);
    text-decoration: none;
    font-family: var(--dv2-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .2s ease;
}

html[data-layout="lifestyle"] .lif-pilula:hover { opacity: .88; }

/* Seta circular dos carrosséis */
html[data-layout="lifestyle"] .lif-seta {
    width: 44px;
    height: 44px;
    border: 1px solid var(--dv2-line);
    border-radius: 50%;
    background: none;
    color: var(--dv2-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease;
}

html[data-layout="lifestyle"] .lif-seta:hover { border-color: var(--tenant-accent); }

/* ============================================================
   CABEÇALHO — seletores de unidade e moeda
   ============================================================
   Os outros layouts não têm isto. O bloco já nasce hidden e só o
   JS o revela, porque o seletor de moeda depende do câmbio do BCE
   ter respondido: sem cotação, ele não aparece de jeito nenhum.
   O de m²/sq ft não depende de rede e aparece sempre. */
html[data-layout="lifestyle"] .lif-seletores {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--dv2-font-body);
}

html[data-layout="lifestyle"] .lif-sel-grupo {
    display: flex;
    gap: 8px;
}

html[data-layout="lifestyle"] .lif-sel-moeda {
    padding-left: 16px;
    border-left: 1px solid var(--dv2-line);
}

html[data-layout="lifestyle"] .lif-sel-btn {
    background: none;
    border: 0;
    padding: 4px 0;
    min-height: 32px;
    white-space: nowrap;
    font: inherit;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--dv2-text-muted);
    cursor: pointer;
}

html[data-layout="lifestyle"] .lif-sel-btn.is-on {
    font-weight: 700;
    color: var(--dv2-text);
}

/* ============================================================
   1. CARROSSEL DO TOPO
   ============================================================
   Foto sangrada de tela com os dados do imóvel na base. O herói
   do layout 1 é uma busca com foto de apoio; aqui é o contrário:
   a foto é o conteúdo e não há busca nenhuma à vista. */
html[data-layout="lifestyle"] .lif-hero {
    position: relative;
    height: clamp(520px, 56vw, 820px);
    overflow: hidden;
    background: var(--dv2-surface);
}

html[data-layout="lifestyle"] .lif-hero-foto,
html[data-layout="lifestyle"] .lif-hero-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

html[data-layout="lifestyle"] .lif-hero-foto img {
    object-fit: cover;
    display: block;
}

/* Véu só na metade de baixo: a foto fica limpa em cima e o texto
   ganha contraste embaixo sem escurecer a imagem inteira. */
html[data-layout="lifestyle"] .lif-hero-veu {
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
    pointer-events: none;
}

html[data-layout="lifestyle"] .lif-hero-base {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px 40px;
    padding-bottom: clamp(24px, 3vw, 36px);
    color: #fff;
}

html[data-layout="lifestyle"] .lif-hero-texto {
    flex: 1 1 380px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

html[data-layout="lifestyle"] .lif-hero-rot {
    display: block;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .92;
}

html[data-layout="lifestyle"] .lif-hero-titulo {
    font-family: var(--dv2-font-display);
    font-weight: 400;
    font-size: clamp(26px, 3.6vw, 46px);
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 10px 0 14px;
    max-width: 26ch;
    text-wrap: balance;
    color: #fff;
}

html[data-layout="lifestyle"] .lif-hero-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    font-size: 14px;
}

html[data-layout="lifestyle"] .lif-hero-linha .lif-preco {
    font-weight: 600;
    font-size: 18px;
    white-space: nowrap;
}

html[data-layout="lifestyle"] .lif-hero-linha > span { white-space: nowrap; }

html[data-layout="lifestyle"] .lif-hero-aprox {
    font-size: 13px;
    margin-top: 6px;
    opacity: .9;
}

html[data-layout="lifestyle"] .lif-hero-aprox:empty { display: none; }

html[data-layout="lifestyle"] .lif-hero-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

html[data-layout="lifestyle"] .lif-hero .lif-seta {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

html[data-layout="lifestyle"] .lif-hero .lif-seta:hover { border-color: #fff; }

html[data-layout="lifestyle"] .lif-barras {
    display: flex;
    gap: 6px;
}

/* Barra fina, não bolinha: acompanha o tom editorial e o alvo de
   toque continua com 14px de altura por causa do padding. */
html[data-layout="lifestyle"] .lif-barra {
    width: 28px;
    height: 14px;
    border: 0;
    padding: 6px 0;
    background: rgba(255, 255, 255, .45);
    background-clip: content-box;
    cursor: pointer;
}

html[data-layout="lifestyle"] .lif-barra.is-on { background: #fff; background-clip: content-box; }

/* Um só destaque não é carrossel. */
html[data-layout="lifestyle"] .lif-hero-unico .lif-hero-nav { display: none; }

/* ============================================================
   2. FRASE-MANIFESTO
   ============================================================
   about_title sozinho, centrado, com ar dos dois lados. É a
   respiração entre a foto do topo e a banda escura do "sobre". */
html[data-layout="lifestyle"] .lif-manifesto {
    padding-top: clamp(44px, 5vw, 72px);
    padding-bottom: clamp(44px, 5vw, 72px);
}

html[data-layout="lifestyle"] .lif-manifesto-texto {
    font-family: var(--dv2-font-display);
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 30px);
    letter-spacing: var(--lif-tit);
    text-transform: uppercase;
    line-height: 1.35;
    margin: 0 auto;
    max-width: 30ch;
    text-align: center;
    text-wrap: balance;
    color: var(--dv2-text);
}

/* ============================================================
   3. SOBRE — banda dividida, metade escura
   ============================================================ */
html[data-layout="lifestyle"] .lif-sobre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    background: var(--dv2-text);
    color: var(--dv2-bg);
}

html[data-layout="lifestyle"] .lif-sobre-texto-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px);
}

html[data-layout="lifestyle"] .lif-sobre-titulo {
    font-family: var(--dv2-font-display);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0 0 18px;
    text-wrap: balance;
    color: var(--dv2-bg);
}

html[data-layout="lifestyle"] .lif-sobre-texto {
    margin: 0;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.7;
    opacity: .9;
    text-wrap: pretty;
}

html[data-layout="lifestyle"] .lif-cred {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 20px 28px;
    margin-top: 28px;
}

html[data-layout="lifestyle"] .lif-cred-valor {
    font-family: var(--dv2-font-display);
    font-size: 20px;
    letter-spacing: .03em;
}

html[data-layout="lifestyle"] .lif-cred-rot {
    font-size: 13px;
    line-height: 1.45;
    opacity: .75;
    margin-top: 2px;
}

html[data-layout="lifestyle"] .lif-sobre-acao { margin-top: 32px; }

html[data-layout="lifestyle"] .lif-sobre-foto {
    position: relative;
    min-height: clamp(320px, 34vw, 520px);
    background: var(--dv2-surface);
}

html[data-layout="lifestyle"] .lif-sobre-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   4/10/13. TEXTO + CARROSSEL (seleção, revista, equipe)
   ============================================================
   Mesmo esqueleto nos três: uma coluna estreita de texto à
   esquerda e uma faixa que rola à direita. Duas colunas, nunca
   quatro — é o contrário da grade densa do layout 1. */
html[data-layout="lifestyle"] .lif-split {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 32px;
}

@media (max-width: 760px) {
    html[data-layout="lifestyle"] .lif-split { grid-template-columns: minmax(0, 1fr); }
}

html[data-layout="lifestyle"] .lif-split-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 340px;
}

html[data-layout="lifestyle"] .lif-split-texto .lif-titulo {
    text-align: left;
    margin-bottom: 18px;
}

html[data-layout="lifestyle"] .lif-split-linha {
    margin: 0 0 24px;
    color: var(--dv2-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

html[data-layout="lifestyle"] .lif-split-linha[hidden] { display: none; }

/* A faixa que rola. scrollbar escondida de propósito: as setas
   abaixo é que comandam, e o arraste continua funcionando. */
html[data-layout="lifestyle"] .lif-faixa {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html[data-layout="lifestyle"] .lif-faixa::-webkit-scrollbar { display: none; }

html[data-layout="lifestyle"] .lif-faixa-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* ---- Card de imóvel --------------------------------------- */
html[data-layout="lifestyle"] .lif-card {
    flex: 0 0 clamp(250px, 26vw, 340px);
    scroll-snap-align: start;
    background: var(--dv2-bg);
    color: var(--dv2-text);
    text-decoration: none;
}

html[data-layout="lifestyle"] .lif-card-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dv2-surface);
}

html[data-layout="lifestyle"] .lif-card-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

html[data-layout="lifestyle"] .lif-card:hover .lif-card-foto img { transform: scale(1.04); }

html[data-layout="lifestyle"] .lif-card-corpo { padding: 16px 18px 22px; }

html[data-layout="lifestyle"] .lif-card-titulo {
    font-family: var(--dv2-font-display);
    font-size: 15px;
    letter-spacing: .03em;
    line-height: 1.35;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-card-lugar {
    font-size: 12px;
    color: var(--dv2-text-muted);
    margin-top: 5px;
}

html[data-layout="lifestyle"] .lif-card-specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: 13px;
    color: var(--dv2-text-muted);
    margin-top: 10px;
}

html[data-layout="lifestyle"] .lif-card-preco {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    white-space: nowrap;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-card-aprox {
    font-size: 12px;
    color: var(--dv2-text-muted);
    margin-top: 2px;
}

/* ---- Capa da revista (3:4, mais estreita que o card) ------- */
html[data-layout="lifestyle"] .lif-capa {
    flex: 0 0 clamp(220px, 22vw, 300px);
    scroll-snap-align: start;
    background: var(--dv2-bg);
    color: var(--dv2-text);
    text-decoration: none;
}

html[data-layout="lifestyle"] .lif-capa-foto {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--dv2-surface);
}

html[data-layout="lifestyle"] .lif-capa-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html[data-layout="lifestyle"] .lif-capa-corpo { padding: 14px 16px 20px; }

html[data-layout="lifestyle"] .lif-capa-num {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dv2-link);
}

html[data-layout="lifestyle"] .lif-capa-titulo {
    font-family: var(--dv2-font-display);
    font-size: 14px;
    letter-spacing: .03em;
    line-height: 1.35;
    margin-top: 5px;
}

/* ---- Pessoa da equipe ------------------------------------- */
html[data-layout="lifestyle"] .lif-pessoa {
    flex: 0 0 clamp(210px, 20vw, 260px);
    scroll-snap-align: start;
}

html[data-layout="lifestyle"] .lif-pessoa-foto {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--dv2-surface);
}

html[data-layout="lifestyle"] .lif-pessoa-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html[data-layout="lifestyle"] .lif-pessoa-nome {
    font-family: var(--dv2-font-display);
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 14px;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-pessoa-papel {
    font-size: 13px;
    color: var(--dv2-text-muted);
    line-height: 1.45;
    margin-top: 2px;
}

html[data-layout="lifestyle"] .lif-pessoa-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    margin-top: 8px;
    font-size: 13px;
}

html[data-layout="lifestyle"] .lif-pessoa-links a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: var(--dv2-link);
    text-decoration: none;
}

html[data-layout="lifestyle"] .lif-pessoa-links a:hover { text-decoration: underline; }

/* ============================================================
   5/9. MOSAICOS — ejes de vida e guias de destino
   ============================================================
   Grade de 12 colunas SEM gap: as peças se encostam e um fio da
   cor do fundo as separa. Linhas alternam 3 e 4 peças, então o
   ritmo nunca fica quadriculado como uma grade de catálogo.
   É aqui que o layout mais se afasta do nº 1. */
html[data-layout="lifestyle"] .lif-mosaico {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

html[data-layout="lifestyle"] .lif-peca {
    position: relative;
    display: block;
    height: clamp(220px, 24vw, 380px);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    outline: 1px solid var(--dv2-bg);
    outline-offset: -1px;
}

html[data-layout="lifestyle"] .lif-peca-alta { height: clamp(260px, 26vw, 400px); }

html[data-layout="lifestyle"] .lif-peca img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s ease;
}

html[data-layout="lifestyle"] .lif-peca:hover img { transform: scale(1.05); }

html[data-layout="lifestyle"] .lif-peca-veu {
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    pointer-events: none;
}

html[data-layout="lifestyle"] .lif-peca-nome {
    position: absolute;
    inset: auto 0 0 0;
    padding: 48px clamp(14px, 2vw, 28px) 20px;
    text-align: center;
    font-family: var(--dv2-font-display);
    font-size: clamp(12px, 1.3vw, 15px);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
}

/* Guia de destino: nome + duas linhas de texto. O texto é o
   protagonista aqui; no layout 1 o protagonista é a contagem de
   imóveis. Se este bloco virar contador, virou o layout 1. */
html[data-layout="lifestyle"] .lif-peca-texto {
    position: absolute;
    inset: auto 0 0 0;
    padding: 64px clamp(14px, 2vw, 28px) 22px;
    text-align: center;
}

html[data-layout="lifestyle"] .lif-peca-texto .lif-peca-nome {
    position: static;
    padding: 0;
    display: block;
}

html[data-layout="lifestyle"] .lif-peca-linha {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 10px auto 0;
    max-width: 44ch;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    opacity: .92;
}

/* No celular o mosaico vira 2 por linha, sempre: a alternância
   3/4 em 360px daria peças de 90px de largura. */
@media (max-width: 640px) {
    html[data-layout="lifestyle"] .lif-peca { grid-column: span 6 !important; }
}

/* ============================================================
   6. BUSCA — depois do conteúdo, de propósito
   ============================================================
   No layout 1 ela domina o herói, porque lá o visitante chega
   para filtrar. Aqui ele chega para olhar. Essa inversão é
   metade da diferença entre os dois. */
html[data-layout="lifestyle"] .lif-busca-wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding-left: var(--lif-pad);
    padding-right: var(--lif-pad);
}

html[data-layout="lifestyle"] .lif-busca-caixa {
    border: 1px solid var(--dv2-line);
    background: var(--dv2-bg);
}

html[data-layout="lifestyle"] .lif-abas {
    display: flex;
    border-bottom: 1px solid var(--dv2-line);
}

html[data-layout="lifestyle"] .lif-abas label { flex: 1; }

html[data-layout="lifestyle"] .lif-abas input { position: absolute; opacity: 0; pointer-events: none; }

html[data-layout="lifestyle"] .lif-abas span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    background: var(--dv2-bg);
    color: var(--dv2-text-muted);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

html[data-layout="lifestyle"] .lif-abas input:checked + span {
    background: var(--dv2-text);
    color: var(--dv2-bg);
}

/* Foco visível pelo teclado — o input real está escondido. */
html[data-layout="lifestyle"] .lif-abas input:focus-visible + span {
    outline: 2px solid var(--tenant-accent);
    outline-offset: -2px;
}

html[data-layout="lifestyle"] .lif-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 14px;
    align-items: end;
    padding: 18px;
}

html[data-layout="lifestyle"] .lif-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 10px;
    letter-spacing: var(--lif-rot);
    text-transform: uppercase;
    color: var(--dv2-text-muted);
}

html[data-layout="lifestyle"] .lif-campo select {
    min-height: 46px;
    background: var(--dv2-bg);
    color: var(--dv2-text);
    border: 1px solid var(--dv2-line);
    border-radius: 0;
    padding: 0 12px;
    font-family: var(--dv2-font-body);
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
}

html[data-layout="lifestyle"] .lif-busca-acao { display: flex; align-items: flex-end; }

html[data-layout="lifestyle"] .lif-busca-acao .lif-pilula {
    width: 100%;
    min-height: 46px;
}

/* ============================================================
   7. VENDER — cartão branco sobre foto
   ============================================================ */
html[data-layout="lifestyle"] .lif-vender {
    margin-top: var(--lif-gap);
    background: var(--dv2-surface);
}

html[data-layout="lifestyle"] .lif-vender-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    align-items: center;
}

html[data-layout="lifestyle"] .lif-vender-col {
    padding: clamp(32px, 5vw, 72px) var(--lif-pad);
}

/* A sombra existe só aqui no layout inteiro. É o que levanta o
   cartão da foto; em qualquer outro lugar seria ruído. */
html[data-layout="lifestyle"] .lif-vender-cartao {
    background: var(--dv2-bg);
    padding: clamp(28px, 4vw, 48px);
    max-width: 520px;
    margin-left: auto;
    box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .35);
}

html[data-layout="lifestyle"] .lif-vender-titulo {
    font-family: var(--dv2-font-display);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 28px);
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0 0 20px;
    text-wrap: balance;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-passos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

html[data-layout="lifestyle"] .lif-passos li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--dv2-text-muted);
}

html[data-layout="lifestyle"] .lif-passo-n {
    font-family: var(--dv2-font-display);
    color: var(--dv2-link);
}

html[data-layout="lifestyle"] .lif-passos strong {
    font-weight: 600;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-fees {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--dv2-line);
}

html[data-layout="lifestyle"] .lif-fees-rot {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dv2-text-muted);
}

html[data-layout="lifestyle"] .lif-fees ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    gap: 7px 18px;
    font-size: 13px;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-fees li::before {
    content: "·";
    margin-right: 7px;
    color: var(--dv2-link);
}

html[data-layout="lifestyle"] .lif-fees-nota {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--dv2-text-muted);
}

html[data-layout="lifestyle"] .lif-vender-acao { margin-top: 26px; }

html[data-layout="lifestyle"] .lif-vender-foto {
    position: relative;
    align-self: stretch;
    min-height: clamp(320px, 36vw, 560px);
    background: var(--dv2-surface);
}

/* ============================================================
   8. VENDIDAS RECENTEMENTE
   ============================================================
   Tabela sóbria com fio de célula. Os VALORES só aparecem se o
   cliente ligar sold_show_prices — o padrão mostra só o prazo.
   Publicar pedido x fechado prova transparência ao comprador,
   mas diz a quem vai vender que os clientes desta casa cedem. */
html[data-layout="lifestyle"] .lif-vendidos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    border-top: 1px solid var(--dv2-line);
}

html[data-layout="lifestyle"] .lif-vendido {
    padding: 24px;
    border-bottom: 1px solid var(--dv2-line);
    border-right: 1px solid var(--dv2-line);
}

html[data-layout="lifestyle"] .lif-vendido-titulo {
    font-family: var(--dv2-font-display);
    font-size: 14px;
    letter-spacing: .04em;
    line-height: 1.35;
    color: var(--dv2-text);
}

html[data-layout="lifestyle"] .lif-vendido-lugar {
    font-size: 12px;
    color: var(--dv2-text-muted);
    margin: 4px 0 14px;
}

html[data-layout="lifestyle"] .lif-vendido-tab {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 14px;
    font-size: 13px;
}

html[data-layout="lifestyle"] .lif-vendido-tab span:nth-child(odd) { color: var(--dv2-text-muted); }
html[data-layout="lifestyle"] .lif-vendido-tab span:nth-child(even) { white-space: nowrap; color: var(--dv2-text); }

/* ============================================================
   11. RESEÑAS — faixa escura, citação grande
   ============================================================ */
html[data-layout="lifestyle"] .lif-resenas {
    position: relative;
    margin-top: var(--lif-gap);
    background: var(--dv2-text);
    color: var(--dv2-bg);
}

html[data-layout="lifestyle"] .lif-resenas-corpo {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(64px, 8vw, 112px) var(--lif-pad);
    text-align: center;
}

html[data-layout="lifestyle"] .lif-cita {
    font-family: var(--dv2-font-display);
    font-weight: 400;
    font-size: clamp(22px, 2.9vw, 34px);
    letter-spacing: .015em;
    line-height: 1.4;
    margin: 18px 0 0;
    text-wrap: balance;
    color: var(--dv2-bg);
}

html[data-layout="lifestyle"] .lif-cita-autor {
    margin-top: 22px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .85;
}

html[data-layout="lifestyle"] .lif-cita-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
    font-size: 13px;
}

html[data-layout="lifestyle"] .lif-cita-nav .lif-seta {
    border-color: rgba(255, 255, 255, .55);
    color: var(--dv2-bg);
}

html[data-layout="lifestyle"] .lif-resenas .lif-rot { color: var(--dv2-bg); opacity: .85; }

/* ============================================================
   AJUSTES NO CHASSI COMPARTILHADO
   ============================================================
   O cabeçalho, o rodapé e a seção de contato são comuns aos seis
   layouts. Aqui só se ajusta o peso visual, sem redesenhar nada:
   quem mexe no chassi mexe nos outros cinco. */
html[data-layout="lifestyle"] .site-main > header {
    /* Era var(--dv2-bg) — o fundo da PAGINA, para o cabecalho se fundir nela.
       So que --dv2-bg segue page_bg_color e o cabecalho tem cor propria
       (header_bg_color) no Super Admin: num tema de fundo claro o cabecalho
       ficava claro com o texto claro por cima, ilegivel. Passa a honrar a cor
       configurada, como os outros cinco layouts ja faziam. */
    background: rgb(var(--tenant-header-bg-rgb, 7, 7, 8));
    border-bottom: 1px solid var(--dv2-line);
}

html[data-layout="lifestyle"] .site-main > header nav#mainNav ul li a {
    font-family: var(--dv2-font-body);
    font-size: 11px;
    letter-spacing: var(--lif-rot);
    text-transform: uppercase;
}

html[data-layout="lifestyle"] .contact-section {
    margin-top: var(--lif-gap);
    padding-top: var(--lif-gap);
    border-top: 1px solid var(--dv2-line);
}

/* O certificado energético no card: um pouco mais discreto que o
   padrão, porque aqui ele divide a linha com área e dormitórios.
   As CORES continuam as oficiais — isso é lei, não estilo. */
html[data-layout="lifestyle"] .lif-card-specs .cee-badge,
html[data-layout="lifestyle"] .lif-hero-linha .cee-badge {
    position: static;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
    border-radius: 0;
}

/* Reduz movimento para quem pediu. O autoplay do topo continua
   (é conteúdo, não decoração), mas o zoom das fotos para. */
@media (prefers-reduced-motion: reduce) {
    html[data-layout="lifestyle"] .lif-peca img,
    html[data-layout="lifestyle"] .lif-card-foto img {
        transition: none;
    }
    html[data-layout="lifestyle"] .lif-peca:hover img,
    html[data-layout="lifestyle"] .lif-card:hover .lif-card-foto img {
        transform: none;
    }
}