/* =========================================================================
   ESSENZA v2 — folha própria da vitrine nova.

   NÃO importa, estende ou depende de `app.css`. As duas convivem porque cada
   uma serve um layout diferente: `app.css` é da home atual, esta é da v2. Se
   a v2 for aprovada e a antiga sair, esta folha sai inteira junto, sem deixar
   regra órfã no CSS do site.

   Todo seletor é prefixado com `e-`. Sem isso, uma classe genérica como
   `.card` daqui venceria a `.card` do admin no dia em que alguém carregasse
   as duas na mesma tela.
   ========================================================================= */

/* -------------------------------------------------------------------------
   TOKENS
   Paleta da marca: navy profundo dominante, off-white, dourado SÓ como
   detalhe (o briefing é explícito nisso). O dourado nunca carrega texto
   corrido sobre fundo claro: no claro ele é filete e borda, no escuro ele
   vira texto, onde o contraste sobra.
   ------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    --e-ink:          #0A1733;  /* navy da marca */
    --e-ink-deep:     #050D1E;  /* navy do rodapé e do fundo do hero */
    --e-ink-soft:     #16284C;  /* navy de superfície dentro do escuro */

    --e-paper:        #F7F6F3;  /* off-white dominante */
    --e-paper-pure:   #FFFFFF;
    --e-paper-edge:   #E6E3DC;  /* filete sobre o claro */

    --e-gold:         #B8893A;  /* dourado sobre CLARO: filete, borda, ícone */
    --e-gold-bright:  #E0B662;  /* dourado sobre ESCURO: texto e marca */

    /*
       ⚠️ DOURADO DE TEXTO — e por que são duas cores e não uma.

       `--e-gold` mede **2,91 de contraste sobre o papel**. Para filete,
       borda e ícone isso não importa: a WCAG não exige contraste de
       elemento decorativo. Para TEXTO importa, e 2,91 reprova até no
       critério frouxo de texto grande, que pede 3,0.

       O defeito não era só das telas novas: "IMÓVEIS SELECIONADOS", na capa,
       já saía assim desde o começo.

       `--e-gold-deep` mede 4,86 — passa inclusive para texto corrido. É o
       mesmo dourado, dois tons abaixo: de longe ninguém distingue, e de
       perto todo mundo lê.

       Ele serve a DOIS papéis, e por isso não se chama "de texto":
         - como COR, carrega texto dourado sobre o papel;
         - como FUNDO, segura texto branco por cima (5,25).

       O botão dourado usava `--e-gold` com letra branca: **3,14**, reprovado.
       Escurecer o botão foi preferido a trocar a letra para navy — mexe
       menos no que já estava aprovado e mantém o bloco dourado como o
       elemento mais forte da tela.
    */
    --e-gold-deep:    #8C6524;

    --e-text:         #14203A;  /* corpo sobre claro */
    --e-text-soft:    #58617A;  /* secundário sobre claro */
    --e-text-onink:   #E8EAF0;  /* corpo sobre escuro */
    --e-text-onink-soft: #9AA6C0;

    /* Tipografia. Serifa clássica justificada pela marca: o logotipo da
       ESSENZA é uma serifa de caixa alta com entreletra larga, e a
       referência pedida foi a Christie's. A sans geométrica carrega tudo
       que é interface. Duas famílias, não três. */
    --e-serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
    --e-sans:  'Jost', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Cantos: a página inteira é RETA. Só o que é redondo por natureza
       (botão de ícone, avatar, ponto do carrossel) é círculo. Regra única,
       sem exceção no meio do caminho. */
    --e-radius: 0;

    --e-shell: 1320px;              /* largura máxima do conteúdo */
    --e-gutter: clamp(20px, 5vw, 64px);

    --e-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.e-body {
    margin: 0;
    background: var(--e-paper);
    color: var(--e-text);
    font-family: var(--e-sans);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

/* `:where()` zera a especificidade do `.e-body`, então esta regra vale só
   (0,0,1) e perde para qualquer classe de componente. Escrita como
   `.e-body a` ela vencia `.e-topo__fav` e `.e-nav a` e pintava o menu do
   cabeçalho de azul-escuro em cima do navy: ilegível. */
:where(.e-body) a { color: inherit; }

/* `hidden` tem que ganhar de qualquer `display` de componente, senão o
   contador de favoritos aparece zerado para quem nunca guardou nada. */
.e-body [hidden] { display: none !important; }

/* O foco visível é a única pista de teclado que esta página tem. Nunca
   remover sem repor. */
.e-body :focus-visible {
    outline: 2px solid var(--e-gold);
    outline-offset: 3px;
}

.e-shell {
    width: 100%;
    max-width: var(--e-shell);
    margin-inline: auto;
    padding-inline: var(--e-gutter);
}

.e-pular {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--e-ink);
    color: var(--e-text-onink);
    padding: 12px 20px;
    z-index: 100;
}
.e-pular:focus { left: 12px; top: 12px; }

/* Rótulo que existe só para o leitor de tela. Declarado aqui e não herdado
   do `app.css`: a v2 não pode depender de uma classe da folha antiga para
   acessibilidade funcionar. */
.e-body .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------------------
   TIPOGRAFIA DE PÁGINA
   ------------------------------------------------------------------------- */
.e-display {
    font-family: var(--e-serif);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.012em;
    margin: 0;
}

.e-titulo {
    font-family: var(--e-serif);
    font-weight: 300;
    font-size: clamp(30px, 4.2vw, 50px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0;
}

.e-chapeu {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--e-gold-deep);
    margin: 0 0 18px;
}

.e-lead {
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.7;
    color: var(--e-text-soft);
    max-width: 62ch;
    margin: 18px 0 0;
}

/* -------------------------------------------------------------------------
   BOTÕES
   ------------------------------------------------------------------------- */
.e-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;          /* rótulo de CTA nunca quebra em duas linhas */
    padding: 15px 30px;
    border: 1px solid transparent;
    border-radius: var(--e-radius);
    font-family: var(--e-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .35s var(--e-ease), color .35s var(--e-ease),
                border-color .35s var(--e-ease), transform .12s var(--e-ease);
}
.e-btn:active { transform: translateY(1px); }

.e-btn--ouro  { background: var(--e-gold-deep); color: #FFFFFF; }
.e-btn--ouro:hover  { background: #7A5720; }

.e-btn--tinta { background: var(--e-ink); color: #FFFFFF; }
.e-btn--tinta:hover { background: var(--e-ink-deep); }

/* Fantasma sobre CLARO: tem borda própria, então nunca some no fundo. */
.e-btn--linha { background: transparent; color: var(--e-ink); border-color: var(--e-ink); }
.e-btn--linha:hover { background: var(--e-ink); color: #FFFFFF; }

/* Fantasma sobre ESCURO. */
.e-btn--linha-clara { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.e-btn--linha-clara:hover { background: #FFFFFF; color: var(--e-ink); border-color: #FFFFFF; }

/* A migalha e o estado vazio saíram de `v2-imoveis.css` e vieram
   para cá quando as telas institucionais entraram na v2.

   Eles nunca foram do catálogo: são cromo de QUALQUER página interna. Deixá-los
   lá obrigaria a tela "A ESSENZA" a baixar a folha inteira da listagem — grade
   de cartões, filtros, paginação — para desenhar uma linha de navegação. */
.e-migalha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 22px 0 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--e-text-soft);
}
.e-migalha a { text-decoration: none; color: var(--e-text-soft); }
.e-migalha a:hover { color: var(--e-gold-deep); }
.e-migalha span { opacity: .45; }
.e-migalha strong { font-weight: 400; color: var(--e-text); }

/* Nada encontrado: diz o que fazer, não só que não achou. */
.e-nada { padding: 56px 0; text-align: center; }
.e-nada h2 { font-family: var(--e-serif); font-size: 26px; font-weight: 400; margin: 0 0 10px; }
.e-nada p { color: var(--e-text-soft); max-width: 46ch; margin: 0 auto 24px; }

/* =========================================================================
   CABEÇALHO
   ========================================================================= */
.e-topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 23, 51, 0);
    transition: background-color .4s var(--e-ease), border-color .4s var(--e-ease);
    border-bottom: 1px solid transparent;
}

/* Enquanto o hero (navy) está sob o cabeçalho ele é transparente; ao sair do
   hero ele ganha fundo sólido. Sem isso o menu branco desaparece em cima do
   off-white na primeira rolagem. */
.e-topo.is-solido {
    background: var(--e-ink-deep);
    border-bottom-color: rgba(255,255,255,.10);
}

/* =========================================================================
   O CABEÇALHO DE PAPEL — as telas internas

   ## Por que existe

   As telas internas usavam o cabeçalho navy (`is-solido`) e uma faixa navy
   logo abaixo. Duas lajotas escuras empilhadas no topo de toda página — e
   lajota escura no topo é a gramática da versão ANTIGA. A v2 abriu mão dela
   de propósito: aqui o fundo é papel, o texto é navy e o dourado é filete.
   Mantendo o topo escuro, mudar de tela parecia voltar para o site velho.

   Agora o cabeçalho das internas é papel com um fio de borda, e o nome das
   seções é navy. A hierarquia não se perde: ela passa a vir da TIPOGRAFIA —
   serifa grande contra sans miúda — e não de um bloco de cor.

   A capa continua com o cabeçalho transparente sobre a foto; ela é a única
   tela que tem imagem atrás do topo.
   ========================================================================= */
/*
   ⚠️ `.no-js` ENTRA AQUI COMO REDE.

   Com JavaScript o cabeçalho das telas internas começa TRANSPARENTE e ganha
   fundo ao rolar — o efeito da capa, que o usuário pediu em todas. Sem
   JavaScript ninguém adiciona esse fundo, e o menu navy acabaria passando
   por cima de uma seção escura (a chamada do pé, por exemplo): texto
   invisível.

   Então, sem JavaScript, o cabeçalho já nasce de papel. Perde-se a
   transição; não se perde o menu.
*/
.e-topo.is-papel,
.no-js .e-topo--claro {
    background: rgba(250,249,246,.92);
    border-bottom-color: var(--e-paper-edge);
    /* O desfoque dá profundidade sem precisar de sombra, e deixa o conteúdo
       passar por baixo em vez de sumir atrás de um bloco opaco. */
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* Onde não há suporte a desfoque, papel sólido — nunca translúcido sobre
   texto, que é o que deixaria o menu ilegível ao rolar. */
@supports not (backdrop-filter: blur(1px)) {
    .e-topo.is-papel,
    .no-js .e-topo--claro { background: var(--e-paper); }
}

.e-topo.is-papel .e-nav a,
.e-topo.is-papel .e-topo__fav,
.no-js .e-topo--claro .e-nav a,
.no-js .e-topo--claro .e-topo__fav { color: rgba(10,23,51,.74); }
.e-topo.is-papel .e-nav a:hover,
.e-topo.is-papel .e-nav a[aria-current="page"],
.e-topo.is-papel .e-topo__fav:hover { color: var(--e-ink); }

.e-topo.is-papel .e-hamburguer { border-color: rgba(10,23,51,.28); }
.e-topo.is-papel .e-hamburguer span { background: var(--e-ink); }

/* A MARCA NÃO LEVA FILTRO AQUI.

   Houve uma versão que a escurecia sobre o papel, por precaução. Era
   incoerência: a capa já mostra a mesma marca dourada sobre o véu claro,
   sem tratamento nenhum, e é a tela que foi aprovada assim. Duas marcas
   com tons diferentes entre a home e as internas é pior do que uma só. */

.e-topo__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    height: 76px;                  /* teto de 80px, conforme a régua */
}

.e-topo__marca img { height: 34px; width: auto; }

.e-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: nowrap;             /* menu em UMA linha no desktop */
}

.e-nav a {
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255,.80);
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--e-ease), border-color .3s var(--e-ease);
}
.e-nav a:hover,
.e-nav a[aria-current="page"] { color: #FFFFFF; border-bottom-color: var(--e-gold-bright); }

.e-topo__acoes { display: flex; align-items: center; gap: 14px; }

.e-topo__fav {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255,255,255,.80);
}
.e-topo__fav:hover { color: #FFFFFF; }
.e-topo__fav .fav-contador {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    background: var(--e-gold);
    color: #FFFFFF;
    font-size: 10px;
    letter-spacing: 0;
    border-radius: 999px;
    padding: 0 5px;
}

.e-topo__zap {
    padding: 11px 20px;
    font-size: 11.5px;
}

.e-hamburguer {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--e-radius);
    cursor: pointer;
    padding: 0;
    place-items: center;
}
.e-hamburguer span {
    display: block;
    width: 18px;
    height: 1px;
    background: #FFFFFF;
    margin: 3px auto;
}

/* Menu de celular */
.e-gaveta {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--e-ink-deep);
    padding: 24px var(--e-gutter) 40px;
    transform: translateX(100%);
    transition: transform .45s var(--e-ease);
    overflow-y: auto;
}
.e-gaveta[data-aberta="1"] { transform: translateX(0); }

.e-gaveta__topo { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.e-gaveta__topo img { height: 30px; }
.e-gaveta__fechar {
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.e-gaveta nav { display: grid; gap: 4px; margin-top: 34px; }
.e-gaveta nav a {
    font-family: var(--e-serif);
    font-size: 30px;
    font-weight: 300;
    color: #FFFFFF;
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.e-gaveta__pe { margin-top: 32px; display: grid; gap: 12px; }

/* =========================================================================
   SEÇÃO 1 — HERO
   Split assimétrico: a fala à esquerda, a Alessandra à direita. Nada de
   headline centralizada sobre foto escurecida.
   ========================================================================= */
.e-hero {
    position: relative;
    background: var(--e-ink-deep);
    color: var(--e-text-onink);
    margin-top: -76px;             /* o cabeçalho transparente fica por cima */
    padding-top: 76px;
    overflow: hidden;
}

/* Rastro dourado da identidade (o mesmo gesto do material de marca), em
   gradiente, não em imagem: escala em qualquer tela e não pesa. */
.e-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 78% 42%, rgba(224,182,98,.17), transparent 62%),
        radial-gradient(70% 60% at 8% 95%, rgba(22,40,76,.85), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* ---- HERO COM FOTO ----------------------------------------------------
   A foto ocupa a tela; o véu navy por cima faz TRÊS trabalhos de uma vez:

   1. dá contraste para o texto branco sobre qualquer parte da imagem;
   2. apaga a marca d'água dourada que vem queimada no arquivo (é o único
      formato que a casa tem hoje);
   3. disfarça que a origem só tem 1280px de largura numa tela de 1920.

   É mais pesado do que seria necessário com uma foto limpa e larga. Com um
   arquivo melhor, baixar a opacidade do véu é uma linha.
   --------------------------------------------------------------------- */
.e-hero--foto { background: var(--e-ink-deep); }

.e-hero__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
       Enquadramento escolhido por DOIS motivos, não por gosto.

       Vertical em 30%: é onde está o horizonte, que é o que a foto tem de
       melhor.

       Horizontal em 72%: a marca d'água da casa está queimada no MEIO do
       arquivo. Puxando o enquadramento para a direita, o arco dourado sai de
       baixo da Alessandra e cai na faixa escura da esquerda, onde o véu
       navy o apaga. Com uma foto sem marca, isto volta a ser `center`.
    */
    object-position: 72% 30%;
    z-index: 0;
}

.e-hero--foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* Da esquerda: quase sólido onde mora o texto, aberto à direita
           para a foto respirar. */
        linear-gradient(100deg, rgba(5,13,30,.95) 0%, rgba(5,13,30,.86) 32%, rgba(5,13,30,.52) 62%, rgba(5,13,30,.40) 100%),
        /* De baixo: encosta a seção seguinte sem linha de corte. */
        linear-gradient(to top, rgba(5,13,30,.92) 0%, transparent 42%),
        /* Do topo: o cabeçalho transparente precisa de chão para o menu. */
        linear-gradient(to bottom, rgba(5,13,30,.80) 0%, transparent 22%);
}

/* O conteúdo e o retrato ficam ACIMA dos dois véus. */
.e-hero__grade { position: relative; z-index: 2; }

.e-hero__grade {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    min-height: calc(100dvh - 76px);
    padding-block: clamp(40px, 6vh, 72px);
}

.e-hero__marca {
    height: clamp(42px, 5vw, 58px);
    width: auto;
    margin-bottom: clamp(22px, 3vw, 34px);
}

/* Escala pensada junto com a largura da coluna (cerca de 600px no desktop):
   a 72px a assinatura cabe em DUAS linhas. A 82px ela ia para quatro e
   empurrava a busca para fora da primeira tela. */
.e-hero__fala {
    font-family: var(--e-serif);
    font-weight: 300;
    font-size: clamp(40px, 4.9vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin: 0;
    max-width: 14ch;
}
.e-hero__fala em {
    font-style: italic;
    color: var(--e-gold-bright);
    line-height: 1.12;             /* folga para a perna do "g" de "geram" */
    padding-bottom: 2px;
}

.e-hero__sub {
    margin: 22px 0 0;
    max-width: 46ch;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.65;
    color: var(--e-text-onink-soft);
}

/* A busca única e central do briefing. */
.e-busca {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: clamp(26px, 3.5vw, 40px);
    max-width: 620px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.22);
    transition: border-color .3s var(--e-ease), background-color .3s var(--e-ease);
}
.e-busca:focus-within { border-color: var(--e-gold-bright); background: rgba(255,255,255,.11); }

.e-busca__campo {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 19px 22px;
    color: #FFFFFF;
    font-family: var(--e-sans);
    font-size: 16px;
    font-weight: 300;
}
.e-busca__campo:focus { outline: none; }
/* Placeholder com contraste suficiente sobre o navy (não é cinza-claro
   fantasma em cima de fundo claro, que é o erro comum). */
.e-busca__campo::placeholder { color: rgba(255,255,255,.62); }

.e-busca__ir {
    flex: 0 0 auto;
    border: 0;
    background: var(--e-gold);
    color: #FFFFFF;
    padding: 0 28px;
    font-family: var(--e-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s var(--e-ease);
}
.e-busca__ir:hover { background: #A1762D; }

.e-busca__dica {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--e-text-onink-soft);
}

/* Retrato da Alessandra.

   `clip-path: circle(50%)` não é enfeite: o PNG da marca foi exportado com o
   XADREZ DE TRANSPARÊNCIA GRAVADO NOS PIXELS (alfa 0 em toda a imagem, cantos
   cinza-claro). Sobre o navy do hero aparecia um quadrado xadrez em volta
   dela. O recorte circular bate exatamente com o medalhão da arte, que toca
   as quatro bordas do quadrado, então nada da foto se perde. Quando chegar um
   PNG com alfa de verdade, esta linha pode sair sem mudar mais nada. */
/* O retrato sobre a FOTO, e não mais sobre o navy chapado.

   Menor do que era (440 contra 520): quem manda no hero agora é a foto, e a
   Alessandra entra como assinatura, não como assunto.

   O anel dourado fino em volta existe porque o medalhão dela é navy sobre
   uma foto que também tem navy no véu: sem a borda, ele lê como adesivo
   colado. O anel transforma a mesma imagem num medalhão deliberado. */
.e-hero__retrato {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1;
}
.e-hero__retrato::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(224,182,98,.38);
}
.e-hero__retrato img {
    width: 100%;
    height: auto;
    /* 49.2% e não 50%: a última fileira de pixels do medalhão ainda é o
       xadrez claro, e a 50% ela sobrava como um anel acinzentado em volta
       dela. Meio por cento a menos corta a franja e não encosta na foto. */
    clip-path: circle(49.2% at 50% 50%);
    filter: drop-shadow(0 30px 70px rgba(0,0,0,.55));
}

/* =========================================================================
   SEÇÕES CLARAS
   ========================================================================= */
.e-secao { padding-block: clamp(72px, 10vw, 136px); }
.e-secao--justa { padding-block: clamp(56px, 7vw, 96px); }

.e-cabeca { max-width: 56ch; margin-bottom: clamp(36px, 4.5vw, 60px); }
.e-cabeca--entre {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    max-width: none;
}

.e-ver-tudo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--e-ink);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--e-gold);
    transition: gap .3s var(--e-ease);
}
.e-ver-tudo:hover { gap: 16px; }

/* =========================================================================
   SEÇÃO 2 — SELEÇÃO ESSENZA (trilho horizontal de cartões)
   ========================================================================= */
/* No DESKTOP a seleção é uma grade de três colunas (seis imóveis = duas
   linhas cheias, sem célula vazia).

   Virou grade por um defeito de uso, não por gosto: no Chrome, um container
   que só rola na horizontal CONSOME a roda vertical do mouse. Com a seleção
   em trilho, passar o mouse por cima dela travava a rolagem da página e
   empurrava os cartões para o lado. Em tela de mouse, grade; em tela de
   dedo, trilho, que é onde arrastar é natural. */
.e-trilho {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.4vw, 34px) clamp(20px, 2vw, 28px);
}

/* ---- O CARTÃO ----------------------------------------------------------
   A foto passa para o lado SEM abrir o anúncio (pedido explícito), e o
   resumo fica embaixo da foto. O link cobre só o bloco de texto: se
   cobrisse a foto, arrastar a foto viraria clique e abriria o imóvel.
   ------------------------------------------------------------------------ */
.e-cartao { display: flex; flex-direction: column; background: transparent; }

.e-cartao__midia {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #DDD9D1;
    overflow: hidden;
}

/* DUAS MECÂNICAS, uma para cada tipo de aparelho.

   No MOUSE a faixa de fotos não rola: ela ANDA por `transform`, e quem
   recorta é o `.e-cartao__midia`. O motivo é concreto e foi medido: um
   container que rola na horizontal rouba a roda vertical do mouse, e passar
   o cursor por cima do cartão travava a página inteira. Sem rolagem, não há
   o que roubar.

   A primeira tentativa foi `overflow-x: hidden` mantendo `scrollLeft` por
   JavaScript. NÃO FUNCIONA: o Chrome prende o `scrollLeft` em 0 quando o
   eixo está escondido, e as setas ficavam mudas (o conteúdo transbordava,
   1893px contra 379px visíveis, e mesmo assim não andava).

   No TOQUE volta a ser rolagem de verdade com `scroll-snap`, que é o que dá
   o arrasto nativo do dedo, com inércia e sem JavaScript no caminho. */
.e-cartao__fotos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    height: 100%;
    transition: transform .55s var(--e-ease);
}

@media (pointer: coarse) {
    .e-cartao__fotos {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        /* O dedo arrasta a foto na horizontal e a página na vertical. Sem
           isto o navegador escolhe um eixo só e a rolagem fica presa. */
        touch-action: pan-x pan-y;
        transform: none !important;
        transition: none;
    }
    .e-cartao__fotos::-webkit-scrollbar { display: none; }
}
.e-cartao__fotos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Só valem no modo de toque, onde a faixa realmente rola. */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.e-cartao__seta {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;          /* botão de ícone é o único redondo */
    background: rgba(255,255,255,.92);
    color: var(--e-ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s var(--e-ease), background-color .25s var(--e-ease);
}
.e-cartao__seta[hidden] { display: none; }
.e-cartao__seta--antes  { left: 12px; }
.e-cartao__seta--depois { right: 12px; }
.e-cartao:hover .e-cartao__seta,
.e-cartao__seta:focus-visible { opacity: 1; }
.e-cartao__seta:hover { background: #FFFFFF; }

/* No toque não existe hover: as setas somem e vale o arrasto. */
@media (hover: none) {
    .e-cartao__seta { display: none; }
}

.e-cartao__pontos {
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}
.e-cartao__pontos i {
    width: 5px; height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    transition: background-color .25s var(--e-ease), width .25s var(--e-ease);
}
.e-cartao__pontos i.is-atual { background: #FFFFFF; width: 16px; }

.e-cartao__selo {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--e-ink-deep);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 7px 12px;
}

.e-cartao__guardar {
    position: absolute;
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--e-ink);
    cursor: pointer;
    transition: background-color .25s var(--e-ease), color .25s var(--e-ease);
}
.e-cartao__guardar:hover { background: #FFFFFF; }
.e-cartao__guardar.favoritado { background: var(--e-gold); color: #FFFFFF; }
.e-cartao__guardar.favoritado svg { fill: currentColor; }

.e-cartao__texto { position: relative; padding-top: 18px; }

.e-cartao__nome {
    font-family: var(--e-serif);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.22;
    margin: 0;
}
.e-cartao__abre { text-decoration: none; color: inherit; }
/* O link se estica pelo bloco de texto inteiro, e só por ele. */
.e-cartao__abre::after { content: ""; position: absolute; inset: 0; }
.e-cartao:hover .e-cartao__nome { color: var(--e-gold-deep); }

.e-cartao__onde {
    margin: 7px 0 0;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e-text-soft);
}

.e-cartao__valor {
    margin: 12px 0 0;
    font-family: var(--e-serif);
    font-size: 25px;
    font-weight: 500;
    color: var(--e-ink);
}

.e-cartao__ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 14px;
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--e-paper-edge);
    font-size: 13.5px;
    color: var(--e-text-soft);
}

.e-cartao__resumo {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--e-text-soft);
}

.e-vazio {
    padding: 56px 0;
    text-align: center;
    color: var(--e-text-soft);
}

/* =========================================================================
   SEÇÃO 3 — BAIRROS (bento, 1 grande + 4 menores)
   O número de células é exatamente o número de bairros com estoque: a grade
   nunca fica com buraco no meio.
   ========================================================================= */
.e-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.e-bento > *:first-child { grid-column: span 2; grid-row: span 2; }

.e-lugar {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    overflow: hidden;
    text-decoration: none;
    color: #FFFFFF;
    background: var(--e-ink);
}
.e-bento > .e-lugar:first-child { min-height: 456px; }

.e-lugar img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: scale .9s var(--e-ease);
}
.e-lugar:hover img { scale: 1.05; }

/* Véu que garante o contraste do texto sobre QUALQUER foto. */
.e-lugar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,13,30,.88) 0%, rgba(5,13,30,.30) 48%, rgba(5,13,30,.10) 100%);
}

.e-lugar__texto { display: block; position: relative; z-index: 1; padding: 22px; margin-top: auto; }

.e-lugar__nome {
    display: block;
    font-family: var(--e-serif);
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 400;
    line-height: 1.15;
}
.e-lugar__conta {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--e-gold-bright);
}

/* =========================================================================
   SEÇÃO 4 — VIVER VILA VELHA (editorial, texto + imagem alta)
   ========================================================================= */
.e-editorial {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 78px);
    align-items: center;
}
.e-editorial__arte { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.e-editorial__arte img { width: 100%; height: 100%; object-fit: cover; }

.e-atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.e-atalhos a {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--e-paper-edge);
    background: var(--e-paper-pure);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--e-text);
    transition: border-color .3s var(--e-ease), color .3s var(--e-ease);
}
.e-atalhos a:hover { border-color: var(--e-gold); color: var(--e-gold-deep); }

/* =========================================================================
   SEÇÃO 5 — COMO A ESSENZA TRABALHA (lista editorial numerada)
   Três itens, mas NÃO três cartões iguais lado a lado: linhas com filete,
   número em serifa, que é outra família de layout.
   ========================================================================= */
.e-passos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--e-paper-edge); }

.e-passo {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: clamp(16px, 3vw, 44px);
    padding: clamp(24px, 3vw, 38px) 0;
    border-bottom: 1px solid var(--e-paper-edge);
}

.e-passo__n {
    font-family: var(--e-serif);
    font-size: 34px;
    font-weight: 300;
    color: var(--e-gold);
    line-height: 1;
}
.e-passo__titulo { font-family: var(--e-serif); font-size: clamp(22px, 2.3vw, 30px); font-weight: 400; margin: 0 0 8px; }
.e-passo__texto  { margin: 0; color: var(--e-text-soft); max-width: 58ch; }
.e-passo__ir     { flex: 0 0 auto; }

/* =========================================================================
   SEÇÃO 6 — A ESSENZA (painel navy encaixado + fotos reais do espaço)
   O painel é um bloco DENTRO da seção clara, não uma inversão de tema da
   página inteira.
   ========================================================================= */
.e-casa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: stretch;
}

.e-casa__painel {
    background: var(--e-ink);
    color: var(--e-text-onink);
    padding: clamp(32px, 4.5vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.e-casa__painel .e-titulo { color: #FFFFFF; }
.e-casa__painel p { color: var(--e-text-onink-soft); }

.e-pilares { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 26px 0 0; padding: 0; list-style: none; }
.e-pilares li {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--e-gold-bright);
}

.e-casa__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.e-casa__fotos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }

/* =========================================================================
   SEÇÃO 7 — DEPOIMENTOS
   ========================================================================= */
.e-vozes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }

.e-voz { border-top: 1px solid var(--e-gold); padding-top: 22px; }
.e-voz blockquote {
    margin: 0;
    font-family: var(--e-serif);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 300;
    line-height: 1.45;
    color: var(--e-ink);
}
.e-voz figcaption { margin-top: 16px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--e-text-soft); }

/* =========================================================================
   SEÇÃO 8 — CHAMADA FINAL (navy)
   ========================================================================= */
.e-chamada {
    background: var(--e-ink);
    color: var(--e-text-onink);
    text-align: center;
}
.e-chamada .e-titulo { color: #FFFFFF; margin-inline: auto; max-width: 20ch; }
.e-chamada p { color: var(--e-text-onink-soft); max-width: 56ch; margin: 18px auto 0; }
.e-chamada__botoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* =========================================================================
   RODAPÉ
   ========================================================================= */
.e-pe { background: var(--e-ink-deep); color: var(--e-text-onink-soft); padding-block: clamp(56px, 7vw, 88px) 0; }

.e-pe__grade {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: clamp(28px, 4vw, 56px);
}
.e-pe__marca img { height: 40px; margin-bottom: 20px; }
.e-pe__sobre { max-width: 40ch; font-size: 14.5px; line-height: 1.7; }

.e-pe h3 {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--e-gold-bright);
    margin: 0 0 18px;
}
.e-pe__lista { display: grid; gap: 10px; }
.e-pe__lista a { font-size: 14.5px; text-decoration: none; color: var(--e-text-onink-soft); transition: color .25s var(--e-ease); }
.e-pe__lista a:hover { color: #FFFFFF; }

.e-pe__social { display: flex; gap: 12px; margin-top: 22px; }
.e-pe__social a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    color: var(--e-text-onink-soft);
    transition: border-color .25s var(--e-ease), color .25s var(--e-ease);
}
.e-pe__social a:hover { border-color: var(--e-gold-bright); color: var(--e-gold-bright); }

.e-pe__fim {
    margin-top: clamp(40px, 5vw, 64px);
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    justify-content: space-between;
    font-size: 13px;
}
.e-pe__fim a { color: var(--e-text-onink-soft); text-decoration: none; }
.e-pe__fim a:hover { color: #FFFFFF; }

/* =========================================================================
   MOVIMENTO
   Entrada por IntersectionObserver (nunca por listener de scroll). Serve a
   um propósito: escalonar a leitura da seção, não decorar.
   ========================================================================= */
.e-entra { opacity: 0; transform: translateY(22px); }

@media (prefers-reduced-motion: no-preference) {
    .e-entra { transition: opacity .8s var(--e-ease), transform .8s var(--e-ease); }
    .e-entra.is-dentro { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento vê a página pronta, nunca invisível. */
@media (prefers-reduced-motion: reduce) {
    .e-entra { opacity: 1; transform: none; }
    .e-body * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .e-lugar:hover img { scale: 1; }
}

/* Sem JavaScript o conteúdo não pode ficar invisível para sempre. */
.no-js .e-entra { opacity: 1; transform: none; }

/* =========================================================================
   TELAS MENORES
   Toda grade assimétrica acima declara aqui como desmonta.
   ========================================================================= */
@media (max-width: 1180px) {
    /* Seis cartões em duas colunas dá três linhas cheias. Continua sem
       célula vazia. */
    .e-trilho { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .e-pe__grade { grid-template-columns: 1fr 1fr; }
    .e-vozes { grid-template-columns: 1fr; gap: 28px; }
    .e-bento { grid-template-columns: repeat(2, 1fr); }
    .e-bento > *:first-child { grid-column: span 2; grid-row: span 1; }
    .e-bento > .e-lugar:first-child { min-height: 280px; }
}

@media (max-width: 900px) {
    .e-nav, .e-topo__zap, .e-topo__fav { display: none; }
    .e-hamburguer { display: grid; }

    /* Aqui a seleção volta a ser trilho: é tela de dedo, onde arrastar de
       lado é o gesto natural e não existe roda de mouse para roubar. */
    .e-trilho {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(260px, 80vw);
        gap: 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--e-gutter);
        padding-inline: var(--e-gutter);
        padding-bottom: 8px;
        margin-inline: calc(var(--e-gutter) * -1);
        scrollbar-width: none;
    }
    .e-trilho::-webkit-scrollbar { display: none; }
    .e-trilho > * { scroll-snap-align: start; }

    .e-hero__grade {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 34px;
        padding-block: 40px 56px;
    }
    .e-hero__retrato { max-width: 340px; order: -1; }

    .e-editorial { grid-template-columns: 1fr; }
    .e-editorial__arte { aspect-ratio: 16 / 10; }

    .e-casa { grid-template-columns: 1fr; }

    .e-passo { grid-template-columns: 48px minmax(0, 1fr); }
    .e-passo__ir { grid-column: 2; justify-self: start; margin-top: 14px; }

    .e-cabeca--entre { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    body.e-body { font-size: 16px; }
    .e-trilho { grid-auto-columns: minmax(250px, 84vw); }
    .e-bento { grid-template-columns: 1fr; }
    .e-bento > *:first-child { grid-column: span 1; }
    .e-casa__fotos { grid-template-columns: 1fr 1fr; }
    .e-pe__grade { grid-template-columns: 1fr; }
    .e-busca { flex-direction: column; }
    .e-busca__ir { padding: 16px; }
    .e-chamada__botoes .e-btn { width: 100%; }
}

/* A fundadora dentro do painel institucional.

   Mesma foto do hero, em outro papel: lá ela é imagem, aqui ela é
   informação — com nome, função e CRECI ao lado. Redonda e pequena, com o
   mesmo filete dourado do medalhão do hero, para as duas aparições serem
   reconhecidas como a mesma pessoa e não como dois elementos soltos. */
.e-fundadora {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0 6px;
}
.e-fundadora img {
    width: 68px; height: 68px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 30%;
    box-shadow: 0 0 0 1px rgba(224,182,98,.45);
}
.e-fundadora strong {
    display: block;
    font-family: var(--e-serif);
    font-size: 19px;
    font-weight: 400;
    color: #FFFFFF;
}
.e-fundadora span {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--e-gold-bright);
}

/* =========================================================================
   CAPA — a primeira tela, no formato do mockup aprovado

   Texto NAVY sobre foto clara, e não branco sobre escuro. É a inversão que
   separa este desenho do anterior: a foto fica luminosa, e a leitura vem do
   contraste do navy contra ela.
   ========================================================================= */
.e-capa {
    position: relative;
    background: var(--e-paper);
    margin-top: -76px;              /* o cabeçalho transparente fica por cima */
    padding-top: 76px;
    overflow: hidden;
    isolation: isolate;
}

.e-capa__fundo {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /*
       Enquadramento por DOIS motivos, não por gosto.

       Centrado, e isso MUDOU com a cena nova.

       A foto anterior tinha o assunto (Convento da Penha, Terceira Ponte)
       encostado na direita, e o foco ia a 66% para não perdê-lo no corte do
       celular. Esta é construída ao contrário: o sol e o caminho de luz na
       água ficam no meio, a varanda e a pessoa à direita, e o terço esquerdo
       é mar e céu — calmo, que é onde o texto se apoia.

       Com o assunto no meio, 50% é o que preserva o sol numa tela estreita.
       Manter 66% aqui mostraria o sofá e cortaria fora justamente o que faz
       a foto.

       O arquivo já vem cortado e gradado por `tools/capa-horas.php`.
       Enquadrar por CSS o que dá para enquadrar no arquivo é obrigar todo
       visitante a baixar pixel que ninguém vai ver.
    */
    object-position: 50% 50%;
    z-index: -2;
}

/*
   A CAMADA DE CIMA — a fase do dia que está entrando.

   As duas fotos ocupam exatamente o mesmo lugar, com o mesmo recorte, e o
   que muda entre elas é só a LUZ. Por isso a travessia pode ser opacidade
   pura: não há nada se movendo por baixo, nenhum objeto fora do lugar.

   A transição longa não é para a pessoa ver acontecer — às 15h a mudança de
   um minuto é invisível. Ela existe para o momento em que o relógio do
   JavaScript reajusta a mistura: sem ela, a correção seria um degrau.
*/
.e-capa__fundo--topo {
    z-index: -2;                 /* mesma camada: a ordem no HTML decide */
    transition: opacity 1.6s linear;
}

/* Quem pediu menos movimento não ganha travessia nenhuma — a foto certa
   simplesmente está lá. */
@media (prefers-reduced-motion: reduce) {
    .e-capa__fundo--topo { transition: none; }
}

/* O véu. Claro, e não escuro: é ele que permite o texto navy e, de quebra,
   apaga a marca d'água e disfarça os 1280px de origem numa tela de 1920. */
.e-capa::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(104deg,
            rgba(250,249,246,.96) 0%,
            rgba(250,249,246,.88) 26%,
            rgba(250,249,246,.58) 50%,
            rgba(250,249,246,.20) 74%,
            rgba(250,249,246,.06) 100%),
        /* Nenhum clarão artificial sobre a marca d'água.

           Já houve aqui um `radial-gradient` perseguindo o arco dourado — e
           ele era frágil por construção: a posição da marca dentro da CAIXA
           depende do recorte que o `object-fit: cover` faz, que por sua vez
           depende do tamanho da janela. O remendo acertava num monitor e
           errava no outro, deixando um borrão de papel no meio do céu.

           A marca agora é tratada no ARQUIVO, pelo recorte horizontal de
           `scratchpad/capa2.php`, que a empurra para a metade esquerda do
           quadro — debaixo da parte grossa deste mesmo véu. Resolvido onde
           não depende de viewport. */
        /* Clareia o topo para o menu do cabeçalho ter chão. */
        linear-gradient(to bottom, rgba(250,249,246,.72) 0%, transparent 18%),
        /* E o pé, por TRÊS motivos que caem no mesmo gradiente:
           a seção seguinte encosta sem linha de corte; a fileira de atalhos
           ganha chão claro para o texto miúdo se ler; e o resto do arco da
           marca d'água, que termina no canto inferior esquerdo, acaba de
           sumir. Subiu de 26% para 38% quando a foto mudou. */
        linear-gradient(to top, var(--e-paper) 0%, rgba(247,246,243,.72) 16%, transparent 38%);
}

.e-capa__dentro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(24px, 3.5vh, 44px);
    min-height: calc(100dvh - 76px);
    padding-block: clamp(28px, 4vh, 52px);
}

/* ---- O que a capa diz ----

   Largura em PIXELS, e não em `ch`. A primeira versão usava `42ch` e o
   título quebrava em três linhas onde o mockup tem duas: `ch` é relativo à
   fonte do próprio elemento, e no bloco da serifa 42ch deu 414px — um
   título de 86px não cabe nisso. As linhas de apoio, essas sim, medem em
   `ch`, onde a unidade faz o que se espera. */
.e-capa__dizer { max-width: 680px; }

/* Chapéu com o filete dourado à direita, como no mockup. O filete acompanha
   a palavra sem atravessar a tela inteira. */
.e-capa__chapeu {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 26rem;
    margin: 0 0 18px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    /* Texto, não filete: vai de dourado-de-traço (2,91 sobre o papel) para
       dourado-de-texto (4,86). O filete logo abaixo continua com o claro —
       nele a cor é desenho e não informação. */
    color: var(--e-gold-deep);
}
.e-capa__chapeu::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--e-gold);
    opacity: .6;
}

.e-capa__fala {
    font-family: var(--e-serif);
    font-weight: 500;
    font-size: clamp(42px, 6.4vw, 86px);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--e-ink);
    margin: 0;
}
.e-capa__fala em {
    font-style: italic;
    font-weight: 400;
    /* Mesmo com 62px, o dourado de traço reprova: 2,91 contra os 3,0 que a
       WCAG pede até para texto grande. Um dourado de texto só — e não um
       terceiro tom "para título" — porque mais um token seria mais uma
       decisão a tomar em cada uso, e a palavra em itálico fica mais
       encorpada assim. */
    color: var(--e-gold-deep);
    /* Folga para a perna do "lh" de "melhor" não encostar na linha. */
    line-height: 1.12;
    padding-bottom: 2px;
}

.e-capa__sub {
    max-width: 34ch;
    margin: 18px 0 0;
    font-size: clamp(17px, 1.7vw, 21px);
    color: var(--e-ink);
    opacity: .88;
}

.e-capa__nota {
    max-width: 42ch;
    margin: 16px 0 0;
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.65;
    color: var(--e-text-soft);
}

/* ---- A barra de busca branca ----
   Quatro campos e um botão, divididos por filete. Flutua sobre a foto, que
   é o gesto que o mockup usa para dizer "comece por aqui". */
.e-buscalarga {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr auto;
    align-items: stretch;
    background: #FFFFFF;
    box-shadow: 0 22px 60px rgba(5,13,30,.16), 0 2px 8px rgba(5,13,30,.06);
    max-width: 1180px;
}

.e-buscalarga__campo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 20px;
    border-right: 1px solid var(--e-paper-edge);
}
.e-buscalarga__campo svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--e-gold); }
.e-buscalarga__campo > span { display: block; min-width: 0; flex: 1 1 auto; }

.e-buscalarga__campo label {
    display: block;
    font-size: 13.5px;
    color: var(--e-text);
    cursor: pointer;
}

/* Os controles entram sem moldura: quem desenha a caixa é a barra. */
.e-buscalarga__campo input,
.e-buscalarga__campo select {
    width: 100%;
    margin-top: 1px;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: var(--e-sans);
    font-size: 13px;
    font-weight: 300;
    color: var(--e-text-soft);
    appearance: none;
    cursor: pointer;
}
.e-buscalarga__campo input { cursor: text; }
.e-buscalarga__campo input::placeholder { color: #8A90A0; }
.e-buscalarga__campo input:focus,
.e-buscalarga__campo select:focus { outline: none; color: var(--e-text); }

/* Realce de foco na CÉLULA, não no controle: o campo não tem borda própria,
   então sem isto quem navega por teclado não enxerga onde está. */
.e-buscalarga__campo:focus-within { box-shadow: inset 0 -2px 0 var(--e-gold); }

.e-buscalarga__campo select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8' fill='none' stroke='%2358617A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 18px;
}

.e-buscalarga__ir {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 30px;
    border: 0;
    background: var(--e-gold);
    color: #FFFFFF;
    font-family: var(--e-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .3s var(--e-ease);
}
.e-buscalarga__ir svg { width: 17px; height: 17px; }
.e-buscalarga__ir:hover { background: #A1762D; }

/* ---- Os quatro atalhos ---- */
.e-atalhos-capa {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 1020px;
}
.e-atalhos-capa li { border-right: 1px solid rgba(10,23,51,.14); }
.e-atalhos-capa li:last-child { border-right: 0; }

.e-atalhos-capa a {
    display: block;
    padding: 4px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--e-ink);
}
.e-atalhos-capa__icone { display: block; color: var(--e-gold); margin-bottom: 8px; }
.e-atalhos-capa__icone svg { margin-inline: auto; width: 28px; height: 28px; }

.e-atalhos-capa strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.e-atalhos-capa small {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: var(--e-text-soft);
}
.e-atalhos-capa a:hover strong { color: var(--e-gold-deep); }

/* O cabeçalho sobre a capa clara: o menu branco ficaria invisível. Sobre
   esta capa ele nasce escuro, e o `is-solido` do JavaScript segue valendo
   para quando a pessoa rola. */
.e-topo--claro .e-nav a,
.e-topo--claro .e-topo__fav { color: rgba(10,23,51,.78); }
.e-topo--claro .e-nav a:hover,
.e-topo--claro .e-nav a[aria-current="page"],
.e-topo--claro .e-topo__fav:hover { color: var(--e-ink); }
.e-topo--claro .e-hamburguer { border-color: rgba(10,23,51,.30); }
.e-topo--claro .e-hamburguer span { background: var(--e-ink); }

/* Ao rolar, o cabeçalho vira navy e o menu volta a ser claro. */
.e-topo--claro.is-solido .e-nav a,
.e-topo--claro.is-solido .e-topo__fav { color: rgba(255,255,255,.80); }
.e-topo--claro.is-solido .e-nav a:hover,
.e-topo--claro.is-solido .e-topo__fav:hover { color: #FFFFFF; }
.e-topo--claro.is-solido .e-hamburguer { border-color: rgba(255,255,255,.35); }
.e-topo--claro.is-solido .e-hamburguer span { background: #FFFFFF; }

/* ---- Telas menores ---- */
@media (max-width: 1080px) {
    .e-buscalarga { grid-template-columns: 1fr 1fr; }
    .e-buscalarga__campo--largo { grid-column: span 2; }
    .e-buscalarga__ir { grid-column: span 2; padding: 16px; }
    .e-atalhos-capa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
    .e-atalhos-capa li:nth-child(2n) { border-right: 0; }
}

@media (max-width: 640px) {
    .e-capa__dentro { min-height: 0; padding-block: 30px 44px; gap: 26px; }
    .e-buscalarga { grid-template-columns: 1fr; }
    .e-buscalarga__campo,
    .e-buscalarga__campo--largo { grid-column: span 1; border-right: 0; border-bottom: 1px solid var(--e-paper-edge); }
    .e-buscalarga__ir { grid-column: span 1; }
    .e-atalhos-capa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* O véu precisa ser mais forte no celular: a coluna de texto ocupa a
       largura toda e passa por cima da parte clara E da escura da foto. */
    .e-capa::before {
        background:
            linear-gradient(180deg, rgba(250,249,246,.95) 0%, rgba(250,249,246,.80) 55%, rgba(250,249,246,.92) 100%);
    }
}

/* =========================================================================
   SELETOR PRÓPRIO

   Substitui a lista que o sistema operacional desenha para o `<select>`
   nativo — aquela de fundo azul, fonte do sistema e cantos do sistema, que
   nenhum CSS alcança e que era a única coisa com cara de formulário numa
   página feita de serifa e filete.

   O `<select>` de verdade continua no formulário, invisível: quem envia é
   ele. Sem JavaScript, nada disto existe e o campo volta a ser um select
   comum — por isso o nativo só ganha `.e-seletor__nativo` DEPOIS de o
   componente estar montado.
   ========================================================================= */
.e-seletor { position: relative; }

/* Fora da tela, mas ainda focável e enviável. `display: none` tiraria o
   campo do formulário em alguns navegadores. */
.e-seletor__nativo {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.e-seletor__gatilho {
    display: block;
    width: 100%;
    padding: 0 18px 0 0;
    background: transparent;
    border: 0;
    font-family: var(--e-sans);
    font-size: 13px;
    font-weight: 300;
    color: var(--e-text-soft);
    text-align: left;
    cursor: pointer;
    /* Mesma seta dos campos: o componente tem que parecer o mesmo controle. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8' fill='none' stroke='%2358617A' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    transition: color .2s var(--e-ease);
}
.e-seletor__gatilho:hover { color: var(--e-text); }
.e-seletor.is-aberta .e-seletor__gatilho { color: var(--e-ink); }

.e-seletor__lista {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    left: -14px;
    right: -14px;
    min-width: 190px;
    max-height: 288px;
    overflow-y: auto;
    padding: 6px 0;
    background: #FFFFFF;
    border: 1px solid var(--e-paper-edge);
    box-shadow: 0 18px 44px rgba(5,13,30,.18);

    /* Barra de rolagem discreta. A lista rola dentro de si mesma — é assim
       que ela deixa de empurrar a página —, mas a barra cinza do sistema
       dentro de um painel branco de filete fino é a mesma quebra de desenho
       que o `<select>` nativo era. Fio da cor do papel, sem setas. */
    scrollbar-width: thin;
    scrollbar-color: var(--e-paper-edge) transparent;
}
.e-seletor__lista::-webkit-scrollbar { width: 6px; }
.e-seletor__lista::-webkit-scrollbar-track { background: transparent; }
.e-seletor__lista::-webkit-scrollbar-thumb {
    background: var(--e-paper-edge);
    border-radius: 3px;
}
.e-seletor__lista::-webkit-scrollbar-thumb:hover { background: #CFCABF; }

.e-seletor__item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    font-family: var(--e-sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--e-text);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s var(--e-ease), color .15s var(--e-ease);
}
.e-seletor__item:hover,
.e-seletor__item:focus-visible {
    background: #F3F1EB;
    color: var(--e-ink);
    outline: none;
}

/* O que está escolhido: filete dourado à esquerda, igual às linhas do
   filtro. Sem fundo colorido, que viraria um bloco dentro da lista. */
.e-seletor__item.is-marcado {
    color: var(--e-ink);
    font-weight: 500;
    box-shadow: inset 2px 0 0 var(--e-gold);
}

/*
   Lista aberta PARA CIMA.

   Na barra da capa o campo fica perto do pé da janela: abrindo para baixo,
   a lista nascia fora da tela e obrigava a rolar a página para escolher. O
   JavaScript mede a folga dos dois lados e põe esta classe quando o de cima
   é maior; aqui só se troca a âncora.

   A altura máxima vem por `style` do JavaScript, porque só ele sabe quanto
   sobrou na janela deste visitante. O valor abaixo é o teto geral.
*/
.e-seletor.is-paraCima .e-seletor__lista {
    top: auto;
    bottom: calc(100% + 10px);
    box-shadow: 0 -18px 44px rgba(5,13,30,.18);
}

/* Na barra da capa a lista pode nascer colada na borda direita da tela.
   Alinhar pela direita no último campo evita que ela saia para fora. */
.e-buscalarga__campo:last-of-type .e-seletor__lista { left: auto; right: -14px; }

/* Na coluna de filtro os campos são mais estreitos: a lista acompanha. */
.e-filtros .e-seletor__lista { left: 0; right: 0; min-width: 0; }

/* =========================================================================
   O ESSENZA BOT, NA LINGUAGEM DA v2

   ## Por que uma pele e não um bot novo

   O balão do chatbot é UM partial (`partials/chatbot.blade.php`), com a
   lógica inteira dentro: fila de mensagens, formulários embutidos, respostas
   rápidas, contexto da tela. Duplicá-lo para a v2 criaria dois bots com a
   mesma regra — e o dia em que um ganhasse correção, o outro ficaria para
   trás em silêncio. É a mesma decisão tomada em `Vitrine::view()`.

   Então o partial continua único e aqui só se troca a roupa.

   ## Por que os seletores começam com `.e-body`

   O estilo do bot é um bloco `<style>` DENTRO do partial, ou seja, no corpo
   da página — ele chega depois desta folha e venceria no desempate por
   ordem. `.e-body .chatbot-widget` vale (0,2,0) contra (0,1,0) do original:
   ganha por especificidade, não por ordem. Sem esse prefixo, nada aqui teria
   efeito, e nada avisaria.

   E como `.e-body` só existe no layout da v2, a v1 não é tocada em nada.

   ## O que muda

   Canto reto no lugar do arredondado, navy chapado no lugar do degradê,
   dourado como filete e não como preenchimento, e a tipografia da casa. É a
   mesma gramática do resto da v2.
   ========================================================================= */

/* ---- O botão redondo ---- */
.e-body .chatbot-toggle {
    width: 58px; height: 58px;
    background: var(--e-ink);
    border-radius: 50%;              /* o botão é redondo por natureza */
    box-shadow: 0 10px 30px rgba(5,13,30,.28);
    transition: background-color .3s var(--e-ease), transform .2s var(--e-ease);
}
.e-body .chatbot-toggle:hover {
    background: var(--e-ink-deep);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 14px 36px rgba(5,13,30,.34);
}
.e-body .chatbot-toggle.active { background: var(--e-gold); }
.e-body .chatbot-toggle.active .chatbot-toggle-icon { fill: #FFFFFF; }
.e-body .chatbot-toggle-icon { fill: var(--e-gold-bright); }

/* O anel que pulsa em volta do botão. Some para quem pediu menos movimento
   (regra no fim desta seção). */
.e-body .chatbot-toggle::before { background: rgba(224,182,98,.28); }

.e-body .chatbot-badge {
    background: var(--e-gold);
    color: #FFFFFF;
    font-family: var(--e-sans);
    font-weight: 500;
    border: 2px solid var(--e-paper);
}

/* ---- A janela ---- */
.e-body .chatbot-container {
    border-radius: 0;
    border: 1px solid var(--e-paper-edge);
    box-shadow: 0 28px 70px rgba(5,13,30,.22);
    font-family: var(--e-sans);
}

.e-body .chatbot-header {
    background: var(--e-ink-deep);
    border-bottom: 1px solid rgba(224,182,98,.22);
}
/* O quadriculado de fundo do cabeçalho é da estética anterior. */
.e-body .chatbot-header::before { display: none; }

/*
   ⚠️ O AVATAR PERDEU O FUNDO E O ÍCONE SUMIU.

   O ícone do assistente é um `<svg>` com `fill="var(--navy)"` — ou seja,
   NAVY. Funcionava porque o avatar tinha fundo branco. Minha pele tirou o
   fundo para o círculo não destoar do cabeçalho, e com isso ficou navy sobre
   navy: um borrão escuro no canto.

   O fundo não volta — um disco branco no meio do navy é justamente o que a
   v2 não faz. Quem muda é o ÍCONE, que passa a ser dourado. CSS vence
   atributo de apresentação, então basta uma regra, sem tocar no partial.
*/
.e-body .chatbot-avatar { border-radius: 0; background: transparent; }
.e-body .chatbot-avatar svg { fill: var(--e-gold-bright); }

.e-body .chatbot-name {
    font-family: var(--e-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .01em;
}

/*
   ⚠️ E O "ONLINE AGORA" FICOU PIOR DO QUE ERA.

   Eu o deixei 11px, em versalete, com entreletra larga e na cor secundária
   — e o original ainda aplica `opacity: .9` por cima. Quatro coisas
   somadas, cada uma tirando um pouco de leitura: o resultado foi um texto
   miúdo e apagado dentro de uma faixa escura.

   Volta a ter tamanho de leitura e cor quase branca. A `opacity` é zerada
   aqui de propósito: ela se multiplica com a cor e é por isso que ajustar
   só a cor não resolveria.
*/
.e-body .chatbot-status {
    color: rgba(255,255,255,.88);
    opacity: 1;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.e-body .status-dot { background: var(--e-gold-bright); }

.e-body .chatbot-close { border-radius: 0; background: rgba(255,255,255,.1); }
.e-body .chatbot-close:hover { background: var(--e-gold); transform: none; }

.e-body .chatbot-messages { background: var(--e-paper); }
.e-body .chatbot-messages::-webkit-scrollbar-thumb { background: var(--e-paper-edge); }

/* ---- A boas-vindas ---- */
.e-body .chatbot-welcome {
    background: transparent;
    border: 1px solid var(--e-paper-edge);
    border-top: 2px solid var(--e-gold);
    border-radius: 0;
}
.e-body .chatbot-welcome h3 { font-family: var(--e-serif); font-weight: 400; color: var(--e-ink); }
.e-body .chatbot-welcome p { color: var(--e-text-soft); }

/* ---- As falas ---- */
.e-body .message-avatar { border-radius: 0; background: var(--e-ink); }

.e-body .message-bubble {
    border-radius: 0;
    font-family: var(--e-sans);
    font-size: 14.5px;
    line-height: 1.6;
}
/* Fala do bot: papel branco com filete, como os cartões da v2. */
.e-body .message.bot .message-bubble {
    background: var(--e-paper-pure);
    border: 1px solid var(--e-paper-edge);
    color: var(--e-text);
}
/* Fala de quem está do outro lado: navy chapado. O dourado continua sendo
   detalhe em toda a v2, nunca preenchimento de bloco de texto. */
.e-body .message.user .message-bubble {
    background: var(--e-ink);
    color: #FFFFFF;
    border: 0;
}
.e-body .message-time { color: var(--e-text-soft); letter-spacing: .06em; }

/* ---- Respostas rápidas ---- */
.e-body .chatbot-quick-replies { background: var(--e-paper); border-top: 1px solid var(--e-paper-edge); }
.e-body .quick-reply-btn {
    background: var(--e-paper-pure);
    border: 1px solid var(--e-paper-edge);
    border-radius: 0;
    font-family: var(--e-sans);
    font-weight: 400;
    color: var(--e-text-soft);
    transition: border-color .2s var(--e-ease), color .2s var(--e-ease);
}
.e-body .quick-reply-btn:hover {
    background: var(--e-paper-pure);
    border-color: var(--e-gold);
    color: var(--e-ink);
    transform: none;
}

/* ---- Formulário dentro da conversa ---- */
.e-body .chatbot-inline-form {
    background: var(--e-paper-pure);
    border: 1px solid var(--e-paper-edge);
    border-radius: 0;
}
.e-body .inline-form-title { font-family: var(--e-serif); font-weight: 400; color: var(--e-ink); }
.e-body .inline-form-row input,
.e-body .inline-form-row select,
.e-body .inline-form-row textarea {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--e-paper-edge);
    background: transparent;
    font-family: var(--e-sans);
}
.e-body .inline-form-row input:focus,
.e-body .inline-form-row select:focus,
.e-body .inline-form-row textarea:focus { outline: none; border-bottom-color: var(--e-gold); }

.e-body .inline-form-submit {
    background: var(--e-gold-deep);
    border-radius: 0;
    font-family: var(--e-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.e-body .inline-form-submit:hover { background: #A1762D; }

/* ---- A barra de digitar ---- */
.e-body .chatbot-input-container { background: var(--e-paper-pure); border-top: 1px solid var(--e-paper-edge); }

.e-body .chatbot-input {
    border: 0;
    border-bottom: 1px solid var(--e-paper-edge);
    border-radius: 0;
    background: transparent;
    font-family: var(--e-sans);
    font-size: 16px;      /* 16px evita o zoom automático do iOS ao focar */
}
.e-body .chatbot-input:focus { border-bottom-color: var(--e-gold); box-shadow: none; }

.e-body .chatbot-send {
    background: var(--e-ink);
    border-radius: 50%;              /* redondo por natureza, como o gatilho */
}
.e-body .chatbot-send:hover { background: var(--e-gold); transform: none; box-shadow: none; }

.e-body .typing-dot { background: var(--e-gold); }

/* Quem pediu menos movimento não recebe o anel pulsando nem o salto do
   botão — e continua com o bot inteiro funcionando. */
@media (prefers-reduced-motion: reduce) {
    .e-body .chatbot-toggle::before { animation: none; display: none; }
    .e-body .chatbot-toggle:hover { transform: none; }
}

/* No celular a janela ocupa a tela toda menos a margem: 380px fixos saem
   para fora em aparelho estreito, e metade do bot fica inalcançável. */
@media (max-width: 460px) {
    .e-body .chatbot-container {
        width: calc(100vw - 24px);
        height: min(72vh, 560px);
    }
}

/* =========================================================================
   A CAPA À NOITE

   ## O erro que isto corrige

   O véu da capa é papel claro e o texto é navy. Funciona enquanto a foto é
   clara. Sobre a foto escura do anoitecer, véu claro **não dá noite — dá
   leite**: um cinza-azulado sem presença nenhuma, com a cidade apagada por
   trás de uma bruma branca. Foi o que foi ao ar.

   Ajustar a grade da foto não resolveria: o problema não está nela, está na
   camada por cima. A correção é inverter a capa inteira — véu de tinta,
   texto claro —, que é o que qualquer capa noturna faz.

   `data-luz="escuro"` é posto pelo servidor na primeira pintura e mantido
   pelo relógio do JavaScript. A troca só acontece quando a fase DOMINANTE é
   escura, nunca no meio de uma mistura.
   ========================================================================= */

/* A transição existe para o momento em que o relógio vira a chave: sem ela,
   o texto pisca de navy para branco de um quadro para o outro. */
.e-capa__dizer,
.e-capa__fala,
.e-capa__sub,
.e-capa__nota,
.e-capa__chapeu,
.e-atalhos-capa strong,
.e-atalhos-capa small { transition: color 1.6s linear; }

@media (prefers-reduced-motion: reduce) {
    .e-capa__dizer, .e-capa__fala, .e-capa__sub, .e-capa__nota,
    .e-capa__chapeu, .e-atalhos-capa strong, .e-atalhos-capa small { transition: none; }
}

/* ---- O véu vira tinta ----

   Mesma geometria do claro: grosso à esquerda, onde mora o texto, e fino à
   direita, onde a cidade aparece. O que muda é a cor — e com ela a direção
   do contraste. */
.e-capa[data-luz="escuro"]::before {
    background:
        linear-gradient(104deg,
            rgba(5,13,30,.93) 0%,
            rgba(5,13,30,.86) 26%,
            rgba(5,13,30,.62) 50%,
            rgba(5,13,30,.38) 74%,
            rgba(5,13,30,.26) 100%),
        /* Chão para o menu do cabeçalho. */
        linear-gradient(to bottom, rgba(5,13,30,.72) 0%, transparent 18%),
        /*
           ⚠️ O PÉ NÃO VOLTA A SER PAPEL AQUI.

           Havia um degradê de papel no pé, herdado da versão clara, para a
           seção seguinte encostar sem linha de corte. Eu supus que os
           atalhos — FRENTE-MAR, COBERTURAS... — cairiam sobre ele e por isso
           os deixei navy.

           Supus errado: eles ficam ACIMA dessa faixa, em cima do escuro.
           Navy sobre navy, no desktop e no celular. O usuário viu os dois.

           À noite a capa é um bloco escuro inteiro, e todo texto dela é
           claro. A borda com a seção de baixo vira um corte limpo — que é o
           que capa escura faz em qualquer site, e fica melhor do que o
           esmaecido.
        */
        linear-gradient(to top, rgba(5,13,30,.34) 0%, transparent 22%);
}

/* ---- O texto vira claro ---- */
.e-capa[data-luz="escuro"] .e-capa__chapeu { color: var(--e-gold-bright); }
.e-capa[data-luz="escuro"] .e-capa__chapeu::after { background: var(--e-gold-bright); opacity: .5; }

.e-capa[data-luz="escuro"] .e-capa__fala { color: #FFFFFF; }
.e-capa[data-luz="escuro"] .e-capa__fala em { color: var(--e-gold-bright); }

.e-capa[data-luz="escuro"] .e-capa__sub  { color: rgba(255,255,255,.92); }
.e-capa[data-luz="escuro"] .e-capa__nota { color: var(--e-text-onink-soft); }

/* ---- O menu do topo, sobre a capa escura ----

   `.e-topo--claro` pinta o menu de navy porque a capa é clara. À noite a
   capa é escura e o menu tem de clarear junto — senão navy sobre navy, que
   é texto invisível. */
.e-capa[data-luz="escuro"] ~ * .e-topo--claro .e-nav a,
body:has(.e-capa[data-luz="escuro"]) .e-topo--claro .e-nav a,
body:has(.e-capa[data-luz="escuro"]) .e-topo--claro .e-topo__fav { color: rgba(255,255,255,.82); }
body:has(.e-capa[data-luz="escuro"]) .e-topo--claro .e-nav a:hover,
body:has(.e-capa[data-luz="escuro"]) .e-topo--claro .e-nav a[aria-current="page"],
body:has(.e-capa[data-luz="escuro"]) .e-topo--claro .e-topo__fav:hover { color: #FFFFFF; }
body:has(.e-capa[data-luz="escuro"]) .e-topo--claro .e-hamburguer { border-color: rgba(255,255,255,.34); }
body:has(.e-capa[data-luz="escuro"]) .e-topo--claro .e-hamburguer span { background: #FFFFFF; }

/* Quando o cabeçalho já ganhou fundo próprio ao rolar, ele manda — e ali o
   texto já é branco por regra anterior. */

/* ---- Os atalhos abaixo da busca ---- */
.e-capa[data-luz="escuro"] .e-atalhos-capa strong { color: #FFFFFF; }
.e-capa[data-luz="escuro"] .e-atalhos-capa small  { color: var(--e-text-onink-soft); }
.e-capa[data-luz="escuro"] .e-atalhos-capa__icone { color: var(--e-gold-bright); }
.e-capa[data-luz="escuro"] .e-atalhos-capa a:hover strong { color: var(--e-gold-bright); }

/* O filete que separa um atalho do outro também inverte: no escuro, uma
   linha navy é uma linha invisível. */
.e-capa[data-luz="escuro"] .e-atalhos-capa a { border-color: rgba(255,255,255,.16); }

/* A nota de três linhas estava apagada demais no escuro: subiu de
   `--e-text-onink-soft` para um cinza mais claro. */
.e-capa[data-luz="escuro"] .e-capa__nota { color: rgba(255,255,255,.76); }

/* -------------------------------------------------------------------------
   A CAPA NOTURNA NO CELULAR

   ⚠️ A regra de cima usa um degradê DIAGONAL (104°): grosso à esquerda, onde
   fica o texto, fino à direita, onde a cidade aparece. Isso só faz sentido
   numa tela larga. Numa tela alta e estreita, o mesmo ângulo deixa o canto
   inferior com só 26% de tinta — e é justamente ali que ficam os atalhos,
   que são navy. Resultado no aparelho do usuário: rótulos apagados sobre um
   fundo de meio-tom.

   No celular o eixo é VERTICAL, como já era na versão clara: tinta em cima,
   onde está a manchete em branco, e papel embaixo, onde estão os atalhos em
   navy. Cada texto sobre o fundo que o lê.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .e-capa[data-luz="escuro"]::before {
        /* Vertical, como na versão clara — e escuro até o fim, pelo mesmo
           motivo da regra do desktop: os atalhos ficam aqui embaixo e o
           texto deles agora é claro. */
        background: linear-gradient(180deg,
            rgba(5,13,30,.92) 0%,
            rgba(5,13,30,.82) 38%,
            rgba(5,13,30,.70) 62%,
            rgba(5,13,30,.62) 86%,
            rgba(5,13,30,.52) 100%);
    }
}

/* -------------------------------------------------------------------------
   O ANEL DE FOCO NO CAMPO DO BOT

   `.e-body :focus-visible` desenha um anel dourado de 2px com 3px de folga —
   certo para a página inteira, e pesado demais aqui: ao abrir, o balão foca
   o campo SOZINHO, e um campo de texto casa `:focus-visible` mesmo quando o
   foco não veio do teclado. O visitante via uma caixa dourada em volta de
   "Digite sua mensagem" sem ter tocado em nada.

   O anel sai, mas o foco NÃO fica sem sinal: o filete de baixo já acende em
   dourado, e é o mesmo gesto dos outros campos da v2.
   ------------------------------------------------------------------------- */
.e-body .chatbot-input:focus-visible,
.e-body .chatbot-input:focus { outline: none; }

/* -------------------------------------------------------------------------
   A SAUDAÇÃO DUPLICADA

   O balão abria com um cartão de boas-vindas — emoji de casinha, "Bem-vindo
   à ESSENZA!", "Sou a assistente virtual..." — e, logo abaixo, a primeira
   mensagem dizendo quase a mesma coisa: "Olá! Sou a assistente virtual da
   ESSENZA Imóveis." Duas apresentações empilhadas, uma delas com emoji, numa
   interface que não usa emoji em lugar nenhum.

   Na v2 fica a MENSAGEM, que é a que conversa. O cartão sai — e com ele o
   emoji, sem precisar mexer no partial, que é compartilhado com a v1.
   ------------------------------------------------------------------------- */
.e-body .chatbot-welcome { display: none; }

/* =========================================================================
   O HOVER NÃO EXISTE EM TELA DE DEDO

   ## O que o usuário viu

   Na captura do celular, o título do primeiro imóvel estava DOURADO e os
   outros navy. Não era escolha de desenho: é o `:hover` grudando. Em tela de
   toque o navegador aplica o estado ao tocar e **só o tira quando a pessoa
   toca em outro lugar** — o cartão em que ela encostou fica com o título
   numa cor de 2,91 de contraste até o próximo toque.

   `@media (hover: hover)` pergunta ao APARELHO se ele tem apontador capaz de
   pairar, e não ao tamanho da tela. É a pergunta certa: há tablet grande sem
   mouse e laptop pequeno com trackpad.

   Só entram aqui os hovers em que a COR DO TEXTO é o efeito. Borda e
   transformação podem grudar sem prejuízo — ninguém deixa de ler nada por
   causa de uma borda dourada parada.
   ========================================================================= */
@media (hover: none) {
    .e-cartao:hover .e-cartao__nome,
    .e-migalha a:hover,
    .e-atalhos a:hover,
    .e-atalhos-capa a:hover strong { color: inherit; }
}

/* =========================================================================
   O ESPAÇO EM MOVIMENTO — o laço de vídeo no bloco da casa

   Substitui a grade de quatro fotos paradas. O vídeo é VERTICAL (1080x1920,
   gravado para reels) e a coluna é quase quadrada: `object-fit: cover` corta
   as laterais, que é o certo aqui — o assunto do vídeo são detalhes no
   centro do quadro, não as bordas.
   ========================================================================= */
.e-casa__video {
    position: relative;
    display: block;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    background: var(--e-ink-deep);
    text-decoration: none;
}

.e-casa__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* O vídeo é decoração com link por cima: o clique tem de chegar ao <a>. */
    pointer-events: none;
}

/* A fita de chamada. Fundo em degradê e não em bloco: o vídeo continua
   visível por baixo, e o texto não perde contraste porque o degradê é
   opaco justo onde ele está. */
.e-casa__video-fita {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 46px 22px 18px;
    background: linear-gradient(to top, rgba(5,13,30,.88), transparent);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
.e-casa__video-fita em {
    font-style: normal;
    color: var(--e-gold-bright);
    transition: transform .3s var(--e-ease);
}
.e-casa__video:hover .e-casa__video-fita em { transform: translateX(5px); }

/* Quem pediu menos movimento fica com o pôster parado — o `v2.js` nem chega
   a dar play, e esta regra garante que nada se mexa nem por acaso. */
@media (prefers-reduced-motion: reduce) {
    .e-casa__video video { display: none; }
    .e-casa__video { background: var(--e-ink-deep) center / cover no-repeat; }
}

/* No celular a coluna vira largura cheia: um vídeo vertical ocupando a tela
   inteira empurraria o resto da página para longe. Altura limitada. */
@media (max-width: 900px) {
    .e-casa__video { min-height: 0; aspect-ratio: 16 / 11; }
}