/* ═══════════════════════════════════════════════════════════════════════════
   home-new.css — folha de estilo da home nova (Opção B da proposta)

   POR QUE ESTE ARQUIVO EXISTE
     O index.php de produção carrega ~22 KB de CSS minificado dentro de um
     <style> no próprio PHP. Isso não é cacheável: o navegador rebaixa o mesmo
     CSS a cada visita, junto do HTML. Aqui o CSS é um arquivo estático, servido
     com o Expires de 1 mês que o .htaccess já configura, e versionado por
     asset() (?v=mtime) para o cache não segurar versão velha.

   ESCOPO
     Carregada por duas telas apenas: index.php e guia.php. Todas as classes
     têm prefixo `hn-` para poder coexistir com o CSS antigo das demais páginas
     sem colidir.

   SISTEMA DE COR — três cores, cada uma com significado
     navy  = estrutura, marca, fundo de bloco
     azul  = ação de quem PROCURA imóvel
     verde = tudo que pertence ao PROFISSIONAL (corretor/imobiliária)
     A home de produção usa oito cores de destaque sem hierarquia (navy, azul,
     azul claro, dourado, laranja, verde, índigo, roxo). Cor virou informação.

   DEPENDÊNCIA DE VARIÁVEIS LEGADAS
     O global-footer.css (que continua sendo carregado, pelo modal de termos)
     usa --navy, --navy-mid, --blue-lt, --text e --transition. Essas ficam
     declaradas abaixo, apontando para a paleta nova.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── paleta nova ── */
    --hn-navy:     #16243c;
    --hn-navy-esc: #0f1c30;
    --hn-azul:     #1c6bd0;
    --hn-azul-esc: #14539f;
    --hn-azul-cl:  #eaf1fc;
    --hn-verde:    #1e8a5b;
    --hn-verde-cl: #e7f4ed;
    --hn-tinta:    #16202f;
    --hn-tinta-2:  #55637a;
    --hn-tinta-3:  #8593a8;
    --hn-linha:    #e3e8ef;
    --hn-fundo:    #f6f8fb;
    --hn-branco:   #ffffff;

    --hn-display: 'Archivo', 'Inter', system-ui, Arial, sans-serif;
    --hn-corpo:   'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    --hn-raio:    12px;
    --hn-transic: .22s cubic-bezier(.4, 0, .2, 1);
    --hn-sombra:  0 4px 18px rgba(16, 32, 56, .07);

    /* ── compatibilidade: global-footer.css espera estes nomes ── */
    --navy:       #16243c;
    --navy-mid:   #55637a;
    --blue-lt:    #1c6bd0;
    --text:       #16202f;
    --transition: .22s cubic-bezier(.4, 0, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--hn-corpo);
    font-size: 16px;
    line-height: 1.6;
    color: var(--hn-tinta);
    background: var(--hn-branco);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--hn-display);
    letter-spacing: -.02em;
    line-height: 1.15;
    text-wrap: balance;
}

a { color: var(--hn-azul); text-decoration: none; }

img { max-width: 100%; height: auto; }

svg { display: block; flex: none; }

/* Foco visível: o teclado tem que conseguir navegar a página. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--hn-azul);
    outline-offset: 2px;
    border-radius: 4px;
}

.hn-in { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* Atalho para leitor de tela / teclado pular direto ao conteúdo. */
.hn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--hn-navy);
    color: #fff;
    padding: 12px 18px;
    z-index: 200;
    font-size: .9rem;
    font-weight: 600;
}
.hn-skip:focus { left: 8px; top: 8px; }

.hn-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* A faixa marrom .hn-preview-bar ("home nova em validação") foi removida em
   31/08/2026, junto com $HN_PREVIEW: esta é a home oficial desde então. */

/* ═══════════════════════════════════════════════════════════════════════════
   CABEÇALHO
   Diferença central em relação à produção: aqui existe menu no celular. O CSS
   atual tem `.header-nav a:not(.btn-header-login){display:none}` abaixo de
   768px e nenhum hambúrguer — o visitante de celular perde a navegação inteira.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Branco opaco, sem backdrop-filter, por dois motivos:
   1) `mix-blend-mode: multiply` da marca precisa de um fundo previsível — sobre
      um branco translúcido com blur, o resultado muda conforme o que passa
      atrás durante a rolagem;
   2) backdrop-filter num elemento fixo é repintado a cada quadro da rolagem,
      e é um dos custos mais comuns de travamento em celular. */
.hn-hd {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid var(--hn-linha);
}
.hn-hd-in {
    max-width: 1160px;
    margin: 0 auto;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
/* ═══════════════════════════════════════════════════════════════════════════
   A MARCA — janela de recorte

   O arquivo imagens/logo4.webp NÃO é um logo limpo: é uma renderização da
   marca sobre um cartão creme, com sombra, e traz a URL do site numa segunda
   linha. Medindo o conteúdo dentro dos 962x370 px:

       lockup (símbolo + nome) ....... x 64–902, y 60–316
       linha "www.imovelrede.com.br" . y 320–340
       fundo embutido ................ rgb(236,237,232)
       espaço morto vertical ......... 25%

   Exibir o arquivo inteiro a 38px de altura fazia o lockup aparecer com 26px
   e desenhava um retângulo creme sobre o header branco. É por isso que o logo
   parecia pequeno: um quarto da altura reservada ia para vazio e para a URL.

   A janela abaixo mostra só o lockup. Os números são as medidas acima, então
   dá para reler de onde vieram; `--mk-s` é a escala e é a única coisa que muda
   de um lugar para o outro. `multiply` faz o creme desaparecer sobre fundo
   branco — por isso o rodapé (navy) põe a marca numa placa branca.

   Isto é um contorno, não a solução: o certo é um PNG/SVG de fundo
   transparente, recortado justo e sem a URL. Ver a nota no fim deste arquivo.
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-marca {
    --mk-s: .175;
    position: relative;
    display: block;
    overflow: hidden;
    flex: none;
    width:  calc(838px * var(--mk-s));   /* 902 − 64 */
    height: calc(257px * var(--mk-s));   /* 316 − 60 */
}
.hn-marca img {
    position: absolute;
    left: calc(-64px * var(--mk-s));
    top:  calc(-60px * var(--mk-s));
    width: calc(962px * var(--mk-s));
    height: auto;
    max-width: none;
    mix-blend-mode: multiply;
}

.hn-logo { --mk-s: .178; }

/* gap 20 e não 24: são 3 vãos entre os 4 itens, então cada 4px devolve 12px de
   largura ao header — o suficiente para o rótulo "Corretor/Imobiliária" caber
   com folga em 1025px. */
.hn-nav { display: flex; align-items: center; gap: 20px; }
.hn-nav > a {
    font-size: .9rem;
    font-weight: 500;
    color: var(--hn-tinta-2);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--hn-transic), border-color var(--hn-transic);
}
.hn-nav > a:hover { color: var(--hn-tinta); border-bottom-color: var(--hn-azul); }
/* "Sou corretor" é PÍLULA, não link de texto.
   O header é sticky, então esta é a única entrada para o público profissional
   que fica visível em QUALQUER ponto da rolagem — vale mais do que um bloco
   grande visto uma vez só. Como link de texto ele se perdia no meio dos outros
   quatro; com borda e fundo verde ele lê como um caminho separado, que é o que
   ele é. Borda em vez de verde cheio: preenchido brigaria com o azul de
   "Cadastrar demanda", que é a conversão principal desta página. */
.hn-nav > a.hn-pro {
    color: var(--hn-verde);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid #b6ddc9;
    border-radius: 999px;
    background: var(--hn-verde-cl);
    transition: background var(--hn-transic), border-color var(--hn-transic);
}
.hn-nav > a.hn-pro:hover {
    background: var(--hn-verde);
    border-color: var(--hn-verde);
    color: #fff;
}

.hn-hd-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.hn-hd-cta .hn-entrar { font-size: .9rem; font-weight: 600; color: var(--hn-tinta-2); }
.hn-hd-cta .hn-entrar:hover { color: var(--hn-azul); }
.hn-ola {
    font-size: .85rem;
    font-weight: 600;
    color: var(--hn-tinta-2);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* botão do hambúrguer — escondido no desktop */
.hn-burger {
    display: none;
    width: 40px; height: 40px;
    border: 1px solid #d5dde9;
    border-radius: 9px;
    background: #fff;
    color: var(--hn-navy);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.hn-burger:hover { border-color: var(--hn-azul); color: var(--hn-azul); }

/* ── botão "Instalar app" (PWA) ──────────────────────────────────────────────
   Verde e não azul: azul cheio é de "Cadastrar demanda", que está ao lado e é a
   conversão da página. Instalar o app é uma oferta paralela, então ganha a cor
   institucional secundária — a mesma do "Corretor/Imobiliária": caminho
   separado, não ação principal.

   Redondo de 38px, do tamanho do hambúrguer ao lado, porque leva só o ícone: o
   rótulo escrito não caberia no header (ver o comentário no <button> de
   _hn_topo.php, com a medida). O texto vive no title, no aria-label, no item da
   gaveta e no link do rodapé.

   Só entra em cena via JS (o HTML nasce com [hidden]), e o [hidden] é respeitado
   por causa do `display:none` explícito: sem ele, o `display:inline-flex` desta
   regra venceria o padrão do atributo e o botão apareceria sempre. */
.hn-pwa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1.5px solid #b6ddc9;
    border-radius: 50%;
    background: var(--hn-verde-cl);
    color: var(--hn-verde);
    cursor: pointer;
    flex: none;
    transition: background var(--hn-transic), border-color var(--hn-transic),
                color var(--hn-transic);
}
.hn-pwa[hidden] { display: none; }
.hn-pwa:hover {
    background: var(--hn-verde);
    border-color: var(--hn-verde);
    color: #fff;
}

/* ── botões ── */
.hn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--hn-corpo);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 11px 20px;
    border-radius: 9px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background var(--hn-transic), border-color var(--hn-transic),
                transform var(--hn-transic), box-shadow var(--hn-transic);
}
.hn-btn-pri { background: var(--hn-azul); color: #fff; }
.hn-btn-pri:hover { background: var(--hn-azul-esc); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(28, 107, 208, .3); }
.hn-btn-vd { background: var(--hn-verde); color: #fff; }
.hn-btn-vd:hover { background: #176e48; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30, 138, 91, .3); }
.hn-btn-gh { background: #fff; color: var(--hn-navy); border-color: #cdd7e4; }
.hn-btn-gh:hover { border-color: var(--hn-azul); color: var(--hn-azul); }
.hn-btn-claro {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
}
.hn-btn-claro:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
.hn-btn-lg { padding: 14px 26px; font-size: .96rem; }
.hn-btn-bloco { width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   GAVETA DE MENU (celular)
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
}
.hn-drawer[data-aberto="1"] { display: block; }
.hn-drawer-fundo {
    position: absolute;
    inset: 0;
    background: rgba(11, 20, 32, .55);
    border: 0;
    width: 100%;
    cursor: pointer;
}
.hn-drawer-painel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 90vw);
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 40px rgba(11, 20, 32, .28);
    animation: hn-entra .22s ease;
    overflow-y: auto;
}
@keyframes hn-entra {
    from { transform: translateX(24px); opacity: .6; }
    to   { transform: translateX(0);    opacity: 1; }
}
.hn-drawer-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hn-linha);
}
.hn-drawer-x {
    width: 38px; height: 38px;
    border: 0; background: none;
    color: var(--hn-tinta-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 8px;
}
.hn-drawer-x:hover { background: var(--hn-fundo); color: var(--hn-tinta); }
.hn-drawer nav { padding: 4px 16px 8px; }
.hn-drawer-grupo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hn-tinta-3);
    padding: 18px 0 4px;
}
.hn-drawer-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 2px;
    border-bottom: 1px solid #f0f3f8;
    font-size: .95rem;
    font-weight: 500;
    color: var(--hn-navy);
}
.hn-drawer-item svg { color: var(--hn-azul); }
.hn-drawer-item:hover { color: var(--hn-azul); }
.hn-drawer-item.hn-pro,
.hn-drawer-item.hn-pro svg { color: var(--hn-verde); }

/* O item "Instalar o app" da gaveta é um <button>, não um <a> — precisa apagar
   o estilo que o navegador dá a botão para ficar idêntico aos vizinhos. */
.hn-drawer-item.hn-pwa-item {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f3f8;
    text-align: left;
    font-family: var(--hn-corpo);
    cursor: pointer;
    color: var(--hn-verde);
}
.hn-drawer-item.hn-pwa-item svg { color: var(--hn-verde); }
.hn-drawer-item.hn-pwa-item[hidden],
.hn-drawer-grupo.hn-pwa-grupo[hidden] { display: none; }
.hn-drawer-acoes {
    padding: 18px 16px 24px;
    display: grid;
    gap: 10px;
    margin-top: auto;
    border-top: 1px solid var(--hn-linha);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERÓI
   Sem carrossel. O carrossel de produção custa jQuery + Slick (dois arquivos
   de CDN) para exibir dois slides, e o segundo slide é visto por pouca gente.
   Aqui: uma promessa só, e o formulário — que é a conversão principal — visível
   de imediato, sem depender de JS para aparecer.
   ═══════════════════════════════════════════════════════════════════════════ */
/* A foto de estilo de vida que o site já tem (imagens/hero_bg_lifestyle_v2.webp:
   família na varanda, luz quente, muito verde).

   DUAS DECISÕES SOBRE O VÉU ESCURO
   1) Ele é NAVY, não preto. O véu da home atual é
      `rgba(0,0,0,.9)` na borda esquerda — preto puro a 90% apaga a foto e
      deixa um cinza sujo. Escurecer com o próprio navy da marca mantém a
      imagem viva e a página coesa.
   2) Ele é DIRECIONAL: denso onde está o texto branco (esquerda) e quase
      transparente à direita, onde entra o cartão branco do formulário. Assim
      a foto aparece justamente na faixa do meio, que é a única onde ela não
      briga com nada.

   `background-color` fica declarado junto: enquanto a foto não chega, o herói
   já nasce navy em vez de dar um flash branco. */
.hn-hero {
    background-color: var(--hn-navy);
    background-image:
        linear-gradient(100deg,
            rgba(11, 20, 35, .95)  0%,
            rgba(14, 26, 45, .86) 34%,
            rgba(18, 33, 56, .52) 62%,
            rgba(20, 38, 64, .34) 100%),
        url('../imagens/hero_bg_lifestyle_v2.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff;
    padding: 60px 0 64px;
    position: relative;
    overflow: hidden;
}
.hn-hero-in {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 40px;
    align-items: center;
}
/* Sombra suave no texto: sobre foto, mesmo com véu, o branco precisa de um
   apoio para não vibrar nas partes claras da imagem. */
.hn-hero h1 {
    font-size: clamp(1.85rem, 4.4vw, 2.85rem);
    font-weight: 800;
    color: #fff;
    max-width: 17ch;
    text-shadow: 0 2px 14px rgba(6, 12, 22, .55);
}
.hn-hero h1 em { font-style: normal; color: #8dbdf7; }
.hn-hero-sub {
    font-size: clamp(.98rem, 1.5vw, 1.08rem);
    color: #ccdaea;
    margin-top: 16px;
    max-width: 46ch;
    line-height: 1.65;
    text-shadow: 0 1px 10px rgba(6, 12, 22, .5);
}
.hn-selos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.hn-selos span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    font-weight: 600;
    color: #cfe0f4;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 6px 13px;
    border-radius: 999px;
}
.hn-selos svg { color: #7ddba9; }

/* ── botões de ação do herói ── */
.hn-hero-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}
.hn-btn-destaque-verde {
    background: #27a858;
    color: #fff;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 9px;
    border: 1.5px solid transparent;
}
.hn-btn-destaque-verde:hover {
    background: #21964d;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(39, 168, 88, .35);
}
.hn-btn-hero-outline {
    background: transparent;
    color: #fff;
    font-weight: 600;
    padding: 13px 22px;
    border-radius: 9px;
    border: 1.5px solid rgba(255, 255, 255, .75);
}
.hn-btn-hero-outline:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}

/* ── cartão do formulário ── */
.hn-form-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow: 0 22px 50px rgba(6, 14, 26, .3);
    color: var(--hn-tinta);
    max-width: 395px;
    width: 100%;
    margin-left: auto;
}
.hn-form-card h2 { font-size: 1.08rem; color: var(--hn-navy); margin-bottom: 4px; }
.hn-form-card .hn-form-sub { font-size: .78rem; color: var(--hn-tinta-3); margin-bottom: 16px; }
.hn-campo { margin-bottom: 11px; }
.hn-campo label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--hn-tinta-3);
    margin-bottom: 5px;
}
.hn-ctl {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid #dde4ee;
    border-radius: 9px;
    padding: 0 12px;
    background: #fdfeff;
    transition: border-color var(--hn-transic), box-shadow var(--hn-transic);
}
.hn-ctl:focus-within { border-color: var(--hn-azul); box-shadow: 0 0 0 3px var(--hn-azul-cl); }
.hn-ctl svg { color: var(--hn-azul); }
.hn-ctl select,
.hn-ctl input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font-family: var(--hn-corpo);
    font-size: .94rem;
    color: var(--hn-tinta);
    padding: 11px 0;
    appearance: none;
    -webkit-appearance: none;
}
.hn-ctl select:focus, .hn-ctl input:focus { outline: none; }
.hn-ctl-seta { color: var(--hn-tinta-3) !important; }
.hn-campo-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hn-form-card .hn-btn { margin-top: 8px; }
.hn-form-fine {
    font-size: .74rem;
    color: var(--hn-tinta-3);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEÇÕES GENÉRICAS
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-sec { padding: 62px 0; }
.hn-sec-alt { background: var(--hn-fundo); }
.hn-sh { margin-bottom: 32px; max-width: 62ch; }
.hn-sh-eb {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--hn-azul);
    margin-bottom: 9px;
}
.hn-sh-eb.hn-eb-vd { color: var(--hn-verde); }
.hn-sh h2 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); font-weight: 700; color: var(--hn-navy); }
.hn-sh p { font-size: .96rem; color: var(--hn-tinta-2); margin-top: 10px; }

/* ── as 4 portas ── */
.hn-portas {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.hn-porta {
    background: #fff;
    border: 1px solid var(--hn-linha);
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    transition: transform var(--hn-transic), box-shadow var(--hn-transic), border-color var(--hn-transic);
}
.hn-porta:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(16, 32, 56, .1);
    border-color: #c9d8ec;
}
.hn-porta-ico {
    width: 44px; height: 44px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: var(--hn-azul-cl);
    color: var(--hn-azul);
    margin-bottom: 15px;
}
.hn-porta h3 { font-size: 1.02rem; color: var(--hn-navy); margin-bottom: 7px; }
.hn-porta p { font-size: .875rem; color: var(--hn-tinta-2); line-height: 1.6; flex: 1; }
.hn-porta-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--hn-azul);
    margin-top: 16px;
}
.hn-porta-go svg { transition: transform var(--hn-transic); }
.hn-porta:hover .hn-porta-go svg { transform: translateX(4px); }
/* A 4ª porta é a única de outro público, e precisa PARECER outra coisa.
   Antes só o ícone mudava de cor — no meio de quatro cards idênticos, quem
   não conhece o site passava direto. Agora ela tem trilho verde no topo, fundo
   levemente tingido e um rótulo dizendo para quem é. */
.hn-porta.hn-porta-pro {
    border-color: #c6e4d5;
    background: linear-gradient(180deg, var(--hn-verde-cl) 0%, #fbfefc 42%);
    box-shadow: inset 0 3px 0 0 var(--hn-verde);
}
.hn-porta.hn-porta-pro:hover {
    border-color: var(--hn-verde);
    box-shadow: inset 0 3px 0 0 var(--hn-verde), 0 14px 34px rgba(30, 138, 91, .16);
}
.hn-porta.hn-porta-pro .hn-porta-ico { background: #d6ecdf; color: var(--hn-verde); }
.hn-porta.hn-porta-pro .hn-porta-go { color: var(--hn-verde); }

/* Rótulo de público: só a porta profissional tem, justamente para marcar que
   ela sai do trilho das outras três. */
.hn-porta-quem {
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--hn-verde);
    margin-bottom: 6px;
}

/* ── como funciona ── */
.hn-passos {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.hn-passo { padding-top: 18px; border-top: 2px solid var(--hn-azul); }
.hn-passo-k {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hn-azul);
}
.hn-passo h3 { font-size: 1.02rem; color: var(--hn-navy); margin: 8px 0 7px; }
.hn-passo p { font-size: .88rem; color: var(--hn-tinta-2); line-height: 1.62; }

/* ── prova social ── */
.hn-nums {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hn-num-v {
    font-family: var(--hn-display);
    font-size: clamp(1.7rem, 3.4vw, 2.25rem);
    font-weight: 800;
    color: var(--hn-navy);
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.hn-num-l { font-size: .85rem; color: var(--hn-tinta-2); margin-top: 7px; line-height: 1.45; }
.hn-nums-nota { font-size: .78rem; color: var(--hn-tinta-3); margin-top: 22px; }

.hn-depos {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-bottom: 34px;
}
.hn-depo {
    background: #fff;
    border: 1px solid var(--hn-linha);
    border-radius: 14px;
    padding: 22px;
}
.hn-depo p { font-size: .9rem; color: var(--hn-tinta); line-height: 1.62; }
.hn-depo-quem { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.hn-depo-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--hn-navy);
    color: #fff;
    font-family: var(--hn-display);
    font-weight: 700;
    font-size: .78rem;
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.hn-depo-quem b { display: block; font-size: .85rem; color: var(--hn-navy); }
.hn-depo-quem span { font-size: .76rem; color: var(--hn-tinta-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   FAIXA PROFISSIONAL
   Substitui dois blocos da home atual (os 6 cards de CRM e os 2 cards de
   escolha de perfil). Aqui o papel é só um: tirar o profissional da home do
   consumidor e levá-lo para a página dele.
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-pro-faixa { background: var(--hn-navy-esc); color: #fff; padding: 54px 0; }
.hn-pro-in { display: grid; gap: 32px; align-items: center; }
.hn-pro-faixa h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); color: #fff; max-width: 24ch; }
.hn-pro-faixa .hn-pro-sub {
    font-size: .96rem;
    color: #b3c4da;
    margin-top: 12px;
    max-width: 44ch;
    line-height: 1.65;
}
.hn-pro-acoes { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px; }
.hn-pro-lista { display: grid; gap: 10px; }
.hn-pro-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 11px;
    padding: 15px 17px;
}
.hn-pro-item svg { color: #7ddba9; margin-top: 3px; }
.hn-pro-item b { display: block; font-size: .9rem; color: #fff; font-weight: 600; }
.hn-pro-item span { font-size: .83rem; color: #a8bbd3; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEÚDO, CIDADES E FAQ
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-cont { display: grid; gap: 26px; }

/* Fachada do vídeo: o iframe do YouTube só entra depois do clique. Um iframe
   carregado de saída puxa ~700 KB de terceiros e entra na conta do LCP mesmo
   sem ninguém dar play. A fachada é CSS puro — sem imagem externa, que a CSP
   do site não libera (i.ytimg.com não está em img-src). */
.hn-vid-bloco { display: grid; gap: 11px; align-content: start; }

.hn-vid {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--hn-navy);
    border: 0;
    width: 100%;
    cursor: pointer;
    display: block;
    padding: 0;
}
/* A capa preenche o quadro sem distorcer. width/height no HTML reservam o
   espaço antes de a imagem chegar, então nada pula na tela. */
.hn-vid img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.hn-vid:hover img { transform: scale(1.03); }

/* A capa do vídeo é clara e cheia de detalhe no centro. Sem este escurecimento
   local o botão branco desaparece dentro dela. É um foco radial, não um véu
   sobre a imagem toda — a arte da capa continua legível. */
.hn-vid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(6, 14, 26, .48) 0%, rgba(6, 14, 26, .12) 42%, transparent 68%);
    transition: opacity var(--hn-transic);
}
.hn-vid:hover::after { opacity: .75; }

.hn-vid-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: var(--hn-navy);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 26px rgba(6, 14, 26, .4);
    transition: transform var(--hn-transic);
}
.hn-vid:hover .hn-vid-play { transform: translate(-50%, -50%) scale(1.09); }

/* Legenda FORA da imagem. A capa do vídeo já tem a própria manchete em letra
   grande; sobrepor mais texto ali criava texto sobre texto. */
.hn-vid-legenda {
    font-size: .84rem;
    color: var(--hn-tinta-2);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hn-vid-legenda svg { color: var(--hn-azul); }

/* Classe própria, e não `.hn-vid iframe`: no clique o iframe SUBSTITUI o botão
   .hn-vid, então ele não é descendente de nada — um seletor aninhado nunca
   casaria e o vídeo entraria sem altura. */
.hn-vid-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 14px;
    display: block;
    background: var(--hn-navy);
}

.hn-guias { display: grid; gap: 10px; align-content: start; }
.hn-guia {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    border: 1px solid var(--hn-linha);
    border-radius: 11px;
    padding: 14px 16px;
    background: #fff;
    font-size: .88rem;
    font-weight: 500;
    color: var(--hn-navy);
    transition: border-color var(--hn-transic), transform var(--hn-transic);
}
.hn-guia:hover { border-color: var(--hn-azul); transform: translateX(3px); }
.hn-guia-esq { display: flex; align-items: center; gap: 11px; }
.hn-guia-esq svg { color: var(--hn-azul); }
.hn-guia-mais { font-size: .86rem; font-weight: 700; color: var(--hn-azul); padding: 6px 2px; }

/* ── Painel de cobertura ──────────────────────────────────────────────────
   A cobertura nacional é argumento de venda e estava como um rodapé de links
   solto embaixo dos guias. Aqui ela é um painel com identidade própria — sem
   virar mais um bloco navy, que a página já tem dois. */
.hn-cobertura {
    margin-top: 36px;
    background: linear-gradient(180deg, var(--hn-azul-cl) 0%, #ffffff 78%);
    border: 1px solid #cfe0f6;
    border-radius: 16px;
    padding: 28px 26px 24px;
}
.hn-cobertura h3 {
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    color: var(--hn-navy);
    margin-bottom: 9px;
}
.hn-cobertura-txt {
    font-size: .93rem;
    color: var(--hn-tinta-2);
    line-height: 1.65;
    max-width: 62ch;
}
.hn-cobertura-txt strong { color: var(--hn-navy); font-weight: 600; }
.hn-cobertura-fim {
    font-size: .88rem;
    color: var(--hn-tinta-2);
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px dashed #c6d9f2;
}
.hn-cobertura-fim a {
    font-weight: 700;
    color: var(--hn-azul);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hn-cobertura-fim a svg { transition: transform var(--hn-transic); }
.hn-cobertura-fim a:hover svg { transform: translateX(3px); }

/* Dentro do painel a faixa não precisa da linha separadora que ela tinha
   quando vivia solta embaixo dos guias. */
.hn-cobertura .hn-cidades { margin-top: 10px; padding-top: 0; border-top: 0; }

.hn-cob-fila { margin-top: 20px; }
.hn-cob-rot {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--hn-tinta-3);
}

/* Pílula de estado: leva para os anúncios, não para conteúdo. O número é o
   sinal visual que separa esta fileira da de cidades — e é informação de
   verdade (quantos anúncios ativos existem lá), não enfeite. */
.hn-estados a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--hn-navy);
}
.hn-uf-n {
    font-size: .72rem;
    font-weight: 700;
    color: var(--hn-azul);
    background: var(--hn-azul-cl);
    border-radius: 999px;
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}
.hn-estados a:hover { border-color: var(--hn-azul); color: var(--hn-azul); }
.hn-estados a:hover .hn-uf-n { background: #fff; }

.hn-cidades { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--hn-linha); }
.hn-cidades a {
    font-size: .84rem;
    font-weight: 500;
    color: var(--hn-tinta-2);
    border: 1px solid var(--hn-linha);
    background: #fff;
    border-radius: 999px;
    padding: 7px 15px;
    transition: all var(--hn-transic);
}
.hn-cidades a:hover { border-color: var(--hn-azul); color: var(--hn-azul); }
.hn-cidades a.hn-cidade-todas {
    color: var(--hn-azul);
    border-color: #b9d2f2;
    background: var(--hn-azul-cl);
    font-weight: 600;
}

/* ── FAQ em <details>: abre e fecha sem uma linha de JS ── */
.hn-faq { max-width: 860px; display: grid; gap: 12px; }
.hn-faq details {
    background: #fff;
    border: 1px solid var(--hn-linha);
    border-radius: 12px;
    transition: border-color var(--hn-transic), box-shadow var(--hn-transic);
}
.hn-faq details[open] { border-color: var(--hn-azul); box-shadow: 0 8px 26px rgba(28, 107, 208, .09); }
.hn-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--hn-display);
    font-size: .98rem;
    font-weight: 600;
    color: var(--hn-navy);
}
.hn-faq summary::-webkit-details-marker { display: none; }
.hn-faq summary .hn-faq-sinal {
    color: var(--hn-azul);
    transition: transform var(--hn-transic);
}
.hn-faq details[open] summary .hn-faq-sinal { transform: rotate(45deg); }
.hn-faq-resp { padding: 0 22px 20px; font-size: .92rem; color: var(--hn-tinta-2); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════════
   GUIA COMPLETO (guia.php)
   ═══════════════════════════════════════════════════════════════════════════ */

/* O herói do guia não leva a foto de estilo de vida: ali a atenção é do vídeo,
   e foto atrás de capa de vídeo é imagem competindo com imagem. */
.hn-hero-guia {
    background-image: none;
    background-color: var(--hn-navy);
    position: relative;
}
.hn-hero-guia::after {
    content: '';
    position: absolute;
    right: -160px; top: -180px;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(28, 107, 208, .38), transparent 68%);
    pointer-events: none;
}
.hn-hero-guia .hn-in { position: relative; z-index: 1; }
.hn-hero-guia h1 { max-width: 20ch; }
.hn-vid-legenda-claro { color: #a8bbd3; }
.hn-vid-legenda-claro svg { color: #7db3f5; }

/* ── Índice do guia ── */
.hn-indice { padding: 34px 0 8px; }
.hn-indice-links {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: 12px;
}
.hn-indice-link {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--hn-linha);
    border-radius: 12px;
    padding: 15px 17px;
    background: #fff;
    color: var(--hn-azul);
    transition: border-color var(--hn-transic), transform var(--hn-transic);
}
.hn-indice-link:hover { border-color: var(--hn-azul); transform: translateY(-2px); }
.hn-indice-link b { display: block; font-size: .93rem; font-weight: 700; color: var(--hn-navy); }
.hn-indice-link em { font-style: normal; font-size: .78rem; color: var(--hn-tinta-3); }
.hn-il-vd { color: var(--hn-verde); }
.hn-il-vd:hover { border-color: var(--hn-verde); }

/* ── Lista de funções ──
   Lista e não card: são 18 itens no total. Em card, viraria a mesma parede que
   tiramos da home. Duas colunas no desktop, uma no celular. */
.hn-glista { display: grid; gap: 10px; }
@media (min-width: 780px) { .hn-glista { grid-template-columns: 1fr 1fr; } }

.hn-gitem {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--hn-linha);
    border-left: 3px solid var(--hn-azul);
    border-radius: 10px;
    padding: 16px 18px;
    transition: border-color var(--hn-transic), box-shadow var(--hn-transic), transform var(--hn-transic);
}
.hn-gitem:hover {
    border-color: #c9d8ec;
    border-left-color: var(--hn-azul-esc);
    box-shadow: 0 10px 26px rgba(16, 32, 56, .09);
    transform: translateX(2px);
}
.hn-gitem-txt b {
    display: block;
    font-family: var(--hn-display);
    font-size: .97rem;
    font-weight: 700;
    color: var(--hn-navy);
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.hn-gitem-txt > span { font-size: .86rem; color: var(--hn-tinta-2); line-height: 1.55; }
.hn-gitem-seta { color: var(--hn-azul); margin-top: 3px; transition: transform var(--hn-transic); }
.hn-gitem:hover .hn-gitem-seta { transform: translateX(3px); }

.hn-glista-vd .hn-gitem { border-left-color: var(--hn-verde); }
.hn-glista-vd .hn-gitem:hover { border-left-color: #176e48; }
.hn-glista-vd .hn-gitem-seta { color: var(--hn-verde); }

/* Os 6 guias de conteúdo em duas colunas nesta página (na home são 3, em uma). */
@media (min-width: 780px) { .hn-guias-2col { grid-template-columns: 1fr 1fr; } }

.hn-pro-acoes-guia { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   DÚVIDAS FREQUENTES (duvidas.php)

   A página reaproveita o FAQ em <details> desta mesma folha (.hn-faq), o
   cabeçalho de seção (.hn-sh) e os botões (.hn-btn). O que segue é só o que
   ela tem de próprio: a abertura sem herói, o convite ao assistente, o
   sumário de assuntos e o link dentro da resposta.

   Sem herói de propósito: quem cai aqui pelo Google tem uma dúvida
   específica, e uma foto de 400px de altura só empurra a resposta para baixo
   da dobra.
   ═══════════════════════════════════════════════════════════════════════════ */

.hn-dv-abre { padding-top: 44px; }
.hn-dv-abre h1 {
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    font-weight: 800;
    color: var(--hn-navy);
}

/* Convite ao assistente. Fundo azul-claro e não branco: é a única coisa
   INTERATIVA de uma página que é toda texto, e precisa se distinguir dela. */
.hn-dv-chamada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
    padding: 20px 22px;
    background: var(--hn-azul-cl);
    border: 1px solid #cfe0f8;
    border-radius: var(--hn-raio);
}
.hn-dv-chamada > div { flex: 1 1 320px; min-width: 0; }
.hn-dv-chamada b {
    display: block;
    font-size: .98rem;
    color: var(--hn-navy);
    margin-bottom: 4px;
}
.hn-dv-chamada > div > span {
    display: block;
    font-size: .87rem;
    color: var(--hn-tinta-2);
    line-height: 1.6;
    max-width: 62ch;
}

/* Sumário de assuntos: as mesmas pílulas da fileira de cidades, sem a linha
   divisória que ali separa duas fileiras. */
.hn-dv-sumario { display: flex; flex-wrap: wrap; gap: 9px; }
.hn-dv-sumario a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--hn-tinta-2);
    border: 1px solid var(--hn-linha);
    background: #fff;
    border-radius: 999px;
    padding: 7px 13px 7px 15px;
    transition: all var(--hn-transic);
}
.hn-dv-sumario a:hover { border-color: var(--hn-azul); color: var(--hn-azul); }
.hn-dv-sumario a:hover .hn-uf-n { background: var(--hn-azul-cl); }

/* O <h3> mora dentro do <summary> para dar hierarquia ao crawler; sem isto
   ele herdaria o tamanho de título e cada pergunta viraria uma manchete. */
.hn-faq summary h3 {
    display: inline;
    font-family: var(--hn-corpo);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--hn-navy);
}

/* Link da resposta: em bloco, com folga acima. No meio do parágrafo ele
   desaparece — e ele é justamente o próximo passo de quem leu a resposta. */
.hn-dv-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--hn-azul);
}
.hn-dv-link svg { transition: transform var(--hn-transic); }
.hn-dv-link:hover svg { transform: translateX(3px); }

.hn-dv-fim { background: var(--hn-fundo); }
.hn-dv-saidas { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 620px) {
    .hn-dv-chamada { padding: 17px 18px; }
    .hn-dv-saidas .hn-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RODAPÉ-MAPA
   As cinco colunas são a resposta ao "mostrar tudo o que o site faz sem
   poluir": a lista completa vive aqui, não no meio da página.
   O seletor de elemento vem depois do global-footer.css (que também estiliza
   `footer`), então estes valores é que valem.
   ═══════════════════════════════════════════════════════════════════════════ */
footer.hn-ft {
    background: var(--hn-navy);
    color: #b6c7dd;
    padding: 52px 0 0;
    width: 100%;
}
.hn-ft-cols {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    padding-bottom: 34px;
}
/* No navy do rodapé, o creme embutido no arquivo desenharia um retângulo claro
   flutuando. `multiply` só resolve sobre branco, então aqui a marca ganha uma
   placa branca de verdade — que lê como lockup proposital, e não como acidente
   de recorte. */
.hn-ft-logo {
    display: inline-block;
    background: #fff;
    border-radius: 10px;
    padding: 9px 13px;
    line-height: 0;
}
.hn-ft-logo .hn-marca { --mk-s: .172; }
.hn-ft-marca p { font-size: .84rem; color: #90a5c1; margin-top: 12px; max-width: 28ch; line-height: 1.6; }
.hn-ft-redes { display: flex; gap: 10px; margin-top: 16px; }
.hn-ft-redes a {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #c3d2e5;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--hn-transic), color var(--hn-transic);
}
.hn-ft-redes a:hover { background: var(--hn-azul); color: #fff; }
.hn-ft h4 {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #6e8cb2;
    margin-bottom: 13px;
}
.hn-ft ul { list-style: none; }
.hn-ft li { margin-bottom: 8px; }
.hn-ft li a, .hn-ft li button {
    font-size: .85rem;
    color: #c3d2e5;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--hn-corpo);
    text-align: left;
    cursor: pointer;
    transition: color var(--hn-transic);
}
.hn-ft li a:hover, .hn-ft li button:hover { color: #7db3f5; }
.hn-ft-bot {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 0 24px;
    font-size: .8rem;
    color: #7d93b1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    justify-content: space-between;
}
.hn-ft-bot a { color: #9db2cc; text-decoration: underline; cursor: pointer; }
.hn-ft-bot a:hover { color: #fff; }

/* "Instalar o app" no rodapé: é um <button> (não navega, dispara o prompt do
   navegador) vestido como os links vizinhos — mesma cor, mesmo tamanho, mesmo
   sublinhado. Verde no hover para lembrar o botão do cabeçalho. */
.hn-ft-pwa {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #9db2cc;
    text-decoration: underline;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
.hn-ft-pwa:hover { color: #7ddba9; }
.hn-ft-pwa[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   BARRA FIXA DE AÇÃO (celular)
   Some no desktop. No celular a conversão principal fica sempre a um toque,
   mesmo depois de rolar a página inteira.
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-barra-fixa {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--hn-linha);
    padding: 10px 16px;
    gap: 10px;
    box-shadow: 0 -6px 20px rgba(16, 32, 56, .09);
}
.hn-barra-fixa .hn-btn { flex: 1; padding: 12px 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMAÇÃO DE ENTRADA
   `.hn-reveal` nasce visível e só é escondido se o JS confirmar que sabe
   revelar (classe `hn-js` no <html>). Se o JS falhar, o conteúdo aparece — o
   contrário do que acontece quando o CSS já esconde tudo de saída.
   ═══════════════════════════════════════════════════════════════════════════ */
.hn-js .hn-reveal { opacity: 0; transform: translateY(22px); }
.hn-js .hn-reveal.hn-visivel {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease, transform .55s ease;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
    .hn-js .hn-reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 820px) {
    .hn-hero-in  { grid-template-columns: 1.32fr .88fr; }
    .hn-pro-in   { grid-template-columns: 1fr 1fr; }
    .hn-cont     { grid-template-columns: 1.12fr .88fr; }
}

/* 1024px e não 900px. Medi a largura mínima que o header precisa com o menu
   inteiro visível, já com a pílula "Corretor/Imobiliária":

       Sou corretor ............ 939px   <- o rótulo ANTIGO já não caberia
       Sou profissional ........ 965px
       Corretor/Imobiliária .... 976px   (com o gap do menu em 20px)
       Corretor ou imobiliária . 1008px

   Com o corte em 900px havia uma faixa entre 900 e 939px onde o menu aparecia
   sem caber, e o flex comprimia os itens. Em 1024px o menu completo tem ~48px
   de folga, e abaixo disso entra o hambúrguer — que tem o grupo "Profissional"
   com os mesmos destinos, então nada se perde. */
/* FAIXA MORTA DO BOTÃO DE INSTALAR — 1025px a 1090px.
   Medido: com o menu inteiro visível, o cabeçalho precisa de 1081px para caber
   o ícone de instalar em uma linha. Abaixo disso o flex quebrava "Buscar
   imóveis" e "Como funciona" em duas linhas (cabeçalho de 70px → 80px). Como o
   hambúrguer só entra em 1024px, sobrava exatamente esta faixa de ~65px de
   largura de tela — notebooks de 1080px de janela — sem solução.
   Aqui o ícone sai do cabeçalho; nessa largura a oferta de instalar continua
   disponível no link do rodapé, escrito por extenso. */
@media (min-width: 1025px) and (max-width: 1090px) {
    .hn-pwa { display: none; }
}

@media (max-width: 1024px) {
    .hn-nav { display: none; }
    .hn-hd-cta .hn-entrar { display: none; }
    .hn-burger { display: flex; }
}

@media (max-width: 600px) {
    .hn-in, .hn-hd-in { padding-left: 18px; padding-right: 18px; }
    .hn-hd-in { padding-top: 10px; padding-bottom: 10px; }
    /* Menor que no desktop, mas ainda ~1,5x o que era antes do recorte. */
    .hn-logo { --mk-s: .152; }
    .hn-hd-cta .hn-btn { display: none; }   /* vai para a barra fixa */

    /* No celular o texto ocupa quase toda a largura, então o véu direcional
       não serve — vira vertical e mais denso. O ponto focal vai para 68% para
       a família continuar visível no recorte estreito. */
    .hn-hero {
        padding: 38px 0 42px;
        background-position: 68% center;
        background-image:
            linear-gradient(180deg,
                rgba(11, 20, 35, .93)  0%,
                rgba(13, 24, 42, .88) 45%,
                rgba(15, 28, 48, .90) 100%),
            url('../imagens/hero_bg_lifestyle_v2.webp');
    }
    .hn-hero-acoes { gap: 10px; }
    .hn-sec { padding: 42px 0; }
    .hn-sh { margin-bottom: 24px; }
    .hn-form-card { padding: 20px; max-width: 100%; margin-left: 0; }
    .hn-portas { grid-template-columns: 1fr 1fr; gap: 11px; }
    .hn-porta { padding: 16px 14px; }
    .hn-porta h3 { font-size: .92rem; }
    .hn-porta p { font-size: .8rem; }
    .hn-porta-ico { width: 36px; height: 36px; margin-bottom: 11px; }
    .hn-barra-fixa { display: flex; }
    /* A barra fixa cobre o fim do rodapé se não houver folga. */
    footer.hn-ft { padding-bottom: 64px; }
}

@media (max-width: 480px) {
    .hn-hero-acoes { flex-direction: column; align-items: stretch; }
    .hn-hero-acoes .hn-btn { width: 100%; text-align: center; }
}

/* 330px e não 400px: num iPhone de 375px as quatro portas precisam caber em
   2x2. Elas só funcionam como conjunto se a pessoa vê as quatro de uma vez —
   empilhadas, viram quatro cards soltos e a ideia de "escolha uma porta" se
   perde. Abaixo de 330px (celular antigo) aí sim vale empilhar. */
@media (max-width: 330px) {
    .hn-portas { grid-template-columns: 1fr; }
}