/* ==========================================================================
   nicolassavimundo.com.br | DESIGN SYSTEM
   Nícolas Savi Mundo · CRECI 76415-F · SaviThie Capital

   Este arquivo é a BASE do site. Tudo (Home, Contato e as páginas futuras)
   é construído em cima dele. Se você quiser mudar uma cor ou um tamanho de
   texto no site inteiro, mude AQUI, no bloco :root logo abaixo, não caça
   cor solta no meio do arquivo.

   Ordem do arquivo:
   01. Tokens (cores, fontes, espaços)
   02. Reset e base
   03. Tipografia
   04. Layout (container, seções)
   05. Componentes (botão, card, divisória, chip)
   06. Header e navegação
   07. Hero
   08. Seções da Home
   09. Página Contato
   10. Rodapé
   11. WhatsApp flutuante
   12. Desktop (media queries)
   13. Acessibilidade e movimento reduzido
   ========================================================================== */


/* ==========================================================================
   01. TOKENS, a paleta travada da marca
   Proporção 60-30-10: 60% base neutra / 30% secundária / 10% ação.
   O terracota é cor de AÇÃO, não de decoração. Se passar de ~10% da tela,
   está errado. Vermelho puro é proibido.
   ========================================================================== */
:root {
  /* --- Cores da marca (não alterar) --- */
  --grafite:            #0F1A24;  /* base escura: hero, header, rodapé */
  --areia:              #F2E9DC;  /* base clara: seções alternadas, cards */
  --acao:               #B5654A;  /* terracota fosco: ícones, detalhes, hover */
  --texto-escuro:       #1C2229;  /* corpo de texto sobre fundo claro */
  --texto-claro:        #F5F3EE;  /* texto sobre fundo grafite */
  /* O champagne veio da sua identidade visual (manual da sub-marca), para o
     site e a assinatura falarem a mesma cor. O tom anterior era #BBA06A, um
     pouco mais escuro. Contraste sobre grafite: 9,5:1, bem acima do exigido. */
  --champagne:          #D4BC86;  /* assinatura, credencial do hero, detalhes da marca */
  --champagne-fosco:    #96794A;  /* versão para fundo claro, uso gráfico */

  /* --- Variações derivadas (mesma família, ajustadas por acessibilidade) ---
     ATENÇÃO NÍCOLAS: o terracota puro (#B5654A) com texto claro em cima dá
     3,9:1 de contraste, abaixo do mínimo legível (WCAG AA pede 4,5:1).
     Por isso o FUNDO DE BOTÃO e os LINKS usam --acao-forte, que é o mesmo
     terracota um tom mais escuro e passa no teste. O #B5654A original
     continua vivo nos ícones, bordas e estados de hover. Visualmente é a
     mesma cor; tecnicamente, é a versão que o Google e os leitores de tela
     aceitam. */
  --acao-forte:         #9E5138;
  --acao-hover:         #8A452F;

  /* --- Neutros de apoio --- */
  --branco:             #FFFFFF;
  --areia-escura:       #E3D7C6;  /* bordas finas sobre areia */
  --grafite-claro:      #1B2A38;  /* cards sobre grafite */
  --linha-clara:        rgba(245, 243, 238, 0.16); /* divisória sobre grafite */
  --linha-escura:       rgba(28, 34, 41, 0.14);    /* divisória sobre areia */
  --texto-claro-suave:  #C9CFD6;  /* texto secundário sobre grafite (8,9:1) */
  --texto-escuro-suave: #4A545E;  /* texto secundário sobre areia (7,1:1) */

  /* --- Tipografia --- */
  --fonte-manifesto: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --fonte-secao:     'Fraunces', Georgia, 'Times New Roman', serif;
  --fonte-corpo:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala fluida: cresce sozinha entre celular e desktop, sem media query */
  --t-hero:    clamp(2.5rem, 9vw, 4.75rem);   /* headline do hero */
  --t-secao:   clamp(1.75rem, 5vw, 2.75rem);  /* subtítulo de seção */
  --t-bloco:   clamp(1.15rem, 3.2vw, 1.4rem); /* título dentro de card/bloco */
  --t-corpo:   clamp(1rem, 2.6vw, 1.125rem);  /* corpo de texto */
  --t-pequeno: 0.875rem;                       /* fichas, disclaimers */
  --t-mini:    0.75rem;                        /* fonte dos dados, legal */

  /* --- Espaçamento --- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4.5rem;
  --e-7: 6rem;

  /* --- Formas --- */
  --raio-btn:  6px;   /* cantos levemente arredondados, conforme o sistema */
  --raio-card: 4px;
  --borda-fina: 1px;

  /* Sombra quase imperceptível, luxo silencioso, nada de sombra dramática */
  --sombra-card: 0 1px 2px rgba(15, 26, 36, 0.04), 0 6px 20px rgba(15, 26, 36, 0.05);

  --largura-max: 1180px;
  --largura-texto: 62ch; /* leitura confortável: nunca linha larga demais */

  --transicao: 180ms ease;

  /* =========================================================================
     ENQUADRAMENTO DO HERO  (NÍCOLAS, É AQUI QUE VOCÊ AJUSTA A SUA CABEÇA)

     O seu vídeo é quadrado e o hero é horizontal. Em vez de cortar o arquivo,
     o navegador mostra uma "janela" por cima do vídeo inteiro. Esta variável
     decide qual pedaço aparece nessa janela.

     São dois números. O primeiro é o horizontal, o segundo é o vertical:

       50% 50%  → mostra o meio do vídeo (padrão dos navegadores)
       50% 25%  → sobe o enquadramento, mostra mais da parte de cima
       50% 15%  → sobe mais ainda, para cabeça alta no quadro
       40% 25%  → além de subir, desloca um pouco para a esquerda

     Regra prática: se a sua cabeça estiver cortada em cima, DIMINUA o segundo
     número. Se sobrar céu demais e você aparecer pequeno embaixo, AUMENTE.
     Mude de 5 em 5, salve, atualize a página. Leva dois minutos para acertar.

     Vale para o vídeo e para a foto, então funciona nos dois casos.
     ========================================================================= */
  --hero-foco: 50% 50%;

  /* No celular o hero é alto e estreito, então o corte acontece nas laterais
     em vez de em cima. Por isso o celular tem o enquadramento dele. */
  --hero-foco-mobile: 50% 40%;
}


/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--grafite);   /* evita faixa clara no topo ao rolar */
}

/* CORREÇÃO IMPORTANTE: o atributo hidden do HTML precisa vencer qualquer
   display definido depois (era o motivo do botão "Assistir com som" aparecer
   sem existir vídeo). Sem esta linha, um .btn-play{display:inline-flex}
   sobrescreve o hidden e o elemento vaza na tela. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--areia);
  color: var(--texto-escuro);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Imagens e vídeos: SEMPRE com dimensão travada no HTML (width/height ou
   aspect-ratio). É isso que impede o layout de "pular" enquanto carrega,
   o CLS do Google, que é critério de ranqueamento. */
img, video, picture, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: var(--acao-forte); text-decoration: none; }
a:hover { color: var(--acao-hover); text-decoration: underline; text-underline-offset: 3px; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; }

/* Foco visível para quem navega por teclado (acessibilidade) */
:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Texto só para leitor de tela */
.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;
}

/* Link "pular para o conteúdo", aparece só ao navegar por Tab */
.pular-conteudo {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--acao-forte); color: var(--texto-claro);
  padding: var(--e-2) var(--e-3); border-radius: 0 0 var(--raio-btn) 0;
}
.pular-conteudo:focus { left: 0; }


/* ==========================================================================
   03. TIPOGRAFIA
   Cormorant Garamond → headline do hero e manifesto longo (fonte da marca)
   Fraunces          → subtítulos de seção
   Inter             → corpo de texto, SEMPRE
   ========================================================================== */
h1, h2, h3, h4 { margin: 0 0 var(--e-2); font-weight: 600; line-height: 1.15; }
p { margin: 0 0 var(--e-3); }
p:last-child { margin-bottom: 0; }

.manifesto {
  font-family: var(--fonte-manifesto);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

.titulo-secao {
  font-family: var(--fonte-secao);
  font-size: var(--t-secao);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.18;
}

.titulo-bloco {
  font-family: var(--fonte-secao);
  font-size: var(--t-bloco);
  font-weight: 600;
}

.texto { max-width: var(--largura-texto); }

.texto-guia {
  font-family: var(--fonte-corpo);
  font-size: var(--t-pequeno);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 var(--e-3);
}

.nota, .fonte-dado {
  font-size: var(--t-mini);
  line-height: 1.5;
  color: var(--texto-escuro-suave);
}

/* Sobre fundo grafite, os tons de texto se invertem */
.fundo-grafite { background: var(--grafite); color: var(--texto-claro); }
.fundo-grafite .nota,
.fundo-grafite .fonte-dado { color: var(--texto-claro-suave); }
.fundo-grafite .texto-guia { color: var(--champagne); }
.fundo-grafite a { color: var(--areia); }

.fundo-areia { background: var(--areia); color: var(--texto-escuro); }
.fundo-areia .texto-guia { color: var(--acao-forte); }

.champagne { color: var(--champagne); }


/* ==========================================================================
   04. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding-inline: var(--e-3);
}

.secao { padding-block: var(--e-6); }
.secao-compacta { padding-block: var(--e-5); }

/* --- Seção com foto de fundo ---
   A imagem entra como fundo da seção inteira, não como uma figura pequena ao
   lado do texto. Ganha presença e some o problema de proporção.

   O gradiente por cima não é enfeite: é o que garante que o texto continue
   legível em cima de uma foto clara. Sem ele, off-white sobre céu azul fica
   ilegível e reprova em acessibilidade.

   Para trocar a foto: mude o nome do arquivo aqui embaixo. Use algo em torno
   de 1600 x 1000 pixels, com o assunto no meio, porque as bordas somem no
   corte em telas estreitas. */
.secao-foto {
  position: relative;
  background-image:
    linear-gradient(180deg,
      rgba(15,26,36,0.93) 0%,
      rgba(15,26,36,0.84) 45%,
      rgba(15,26,36,0.95) 100%),
    url("../img/regiao-litoral-norte.jpg");
  background-size: cover, cover;
  background-position: center, center 45%;
  background-repeat: no-repeat, no-repeat;
}

/* Card de dados quando está sobre foto: borda clara e um leve fundo para
   descolar da imagem sem virar caixa opaca. */
.fundo-grafite .card-dados {
  border-color: var(--linha-clara);
  background: rgba(15, 26, 36, 0.42);
}
.fundo-grafite .card-dados .dado + .dado { border-top-color: var(--linha-clara); }
.fundo-grafite .card-dados .dado-rotulo { color: var(--texto-claro-suave); }

.creditos-foto {
  font-size: var(--t-mini);
  color: var(--texto-claro-suave);
  letter-spacing: 0.02em;
  margin: var(--e-4) 0 0;
}

/* Divisória fina, o elemento gráfico da marca */
.divisor {
  width: 100%; height: var(--borda-fina);
  background: var(--linha-escura);
  border: 0; margin: var(--e-4) 0;
}
.fundo-grafite .divisor { background: var(--linha-clara); }

/* Traço curto que abre as seções */
.traco {
  display: block; width: 48px; height: var(--borda-fina);
  background: var(--acao); margin-bottom: var(--e-3);
}


/* ==========================================================================
   05. COMPONENTES
   ========================================================================== */

/* --- Botão primário (CTA) ---
   Lei de Hick: UM CTA principal por tela. Não crie botões competindo. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  min-height: 48px;              /* alvo de toque confortável no celular */
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-btn);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primario {
  background: var(--acao-forte);
  color: var(--texto-claro);
  border-color: var(--acao-forte);
}
.btn-primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); color: var(--texto-claro); }

/* Secundário: só onde o primário já existe na mesma tela (ex.: dentro de card) */
.btn-secundario {
  background: transparent;
  color: var(--acao-forte);
  border-color: var(--acao);
}
.btn-secundario:hover { background: var(--acao-forte); color: var(--texto-claro); border-color: var(--acao-forte); }

.fundo-grafite .btn-secundario { color: var(--areia); border-color: rgba(245,243,238,0.4); }
.fundo-grafite .btn-secundario:hover { background: var(--texto-claro); color: var(--grafite); border-color: var(--texto-claro); }

.btn-bloco { display: flex; width: 100%; }

.btn .icone { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }

/* --- Card ---
   Borda fina, sombra quase imperceptível. Luxo silencioso. */
.card {
  background: var(--branco);
  border: var(--borda-fina) solid var(--areia-escura);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}
.card-corpo { padding: var(--e-3); }

.fundo-grafite .card {
  background: var(--grafite-claro);
  border-color: var(--linha-clara);
  box-shadow: none;
}

/* Card de dados (a tese da região), discreto, sem virar banner */
.card-dados {
  background: transparent;
  border: var(--borda-fina) solid var(--linha-escura);
  border-radius: var(--raio-card);
  padding: var(--e-3);
  box-shadow: none;
  max-width: 34rem;
}
.card-dados .dado {
  display: flex; flex-direction: column; gap: 2px;
  padding-block: var(--e-2);
}
.card-dados .dado + .dado { border-top: var(--borda-fina) solid var(--linha-escura); }
.card-dados .dado-numero {
  font-family: var(--fonte-secao);
  font-size: clamp(1.35rem, 4.5vw, 1.75rem);
  font-weight: 600; line-height: 1.1;
}
.card-dados .dado-rotulo {
  font-size: var(--t-pequeno);
  color: var(--texto-escuro-suave);
}

/* --- Imagem com disclaimer obrigatório (imagem ilustrativa / IA) --- */
.figura { position: relative; margin: 0; }
/* color:transparent esconde o texto alternativo se o arquivo de imagem ainda
   não existir. O leitor de tela continua lendo o alt normalmente; quem some
   é só o texto quebrado na tela. */
.figura img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--areia-escura);
  color: transparent;
}
.figura-16-9 img { aspect-ratio: 16 / 9; }
.disclaimer-img {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0.45rem 0.7rem;
  background: rgba(15, 26, 36, 0.78);
  color: var(--texto-claro);
  font-size: var(--t-mini);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* --- Painel de espera, para quando a imagem ainda não existe ---
   Enquanto o arquivo de imagem não estiver na pasta, o card mostra um painel
   grafite com o nome do empreendimento em vez de um retângulo quebrado. No
   instante em que você subir a imagem com o nome certo, ela cobre o painel e
   este código para de aparecer sozinho. Não precisa apagar nada depois.

   Para ativar num card: coloque data-rotulo="NOME" na tag <figure>.
   Para desativar: apague o data-rotulo. Só isso. */
.figura[data-rotulo]::before {
  content: attr(data-rotulo);
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-3);
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      var(--grafite) 0px, var(--grafite) 14px,
      var(--grafite-claro) 14px, var(--grafite-claro) 15px
    );
  color: var(--texto-claro-suave);
  font-family: var(--fonte-secao);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
/* A imagem fica por cima do painel. Se ela não carregar, o fundo transparente
   deixa o painel aparecer no lugar. */
.figura[data-rotulo] picture,
.figura[data-rotulo] img { position: relative; z-index: 1; }
.figura[data-rotulo] img { background: transparent; }

/* --- Capa clicável que abre a galeria ---
   A capa vira um botão de verdade, não uma imagem com clique colado por cima.
   Isso importa: botão é focável pelo teclado, o leitor de tela anuncia como
   botão, e quem navega por Tab consegue abrir a galeria sem mouse. */
.figura-botao {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: left;
  position: relative;
}
.figura-botao img { transition: transform 400ms ease, filter var(--transicao); }
.figura-botao:hover img { transform: scale(1.03); }
.figura-botao:hover .lupa { opacity: 1; transform: none; }

/* Ícone de lupa: o aviso silencioso de que dá para clicar. Só aparece no
   hover no desktop; no celular fica sempre visível, porque lá não há hover. */
.lupa {
  position: absolute; top: var(--e-2); right: var(--e-2); z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(15, 26, 36, 0.72);
  color: var(--texto-claro);
  opacity: 0.9;
  transition: opacity var(--transicao), transform var(--transicao);
}
.lupa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) {
  .lupa { opacity: 0; transform: translateY(-4px); }
}

/* --- Galeria em camada (lightbox) ---
   Abre por cima de tudo, com fundo escuro. Fecha no X, no Esc, no clique fora
   e no arrastar para baixo. Navega nas setas do teclado e no arrastar lateral.
   Fica escondida por padrão; o JavaScript é quem abre. */
.galeria {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  background: rgba(8, 14, 20, 0.97);
  color: var(--texto-claro);
}
.galeria[hidden] { display: none !important; }

.galeria-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border-bottom: var(--borda-fina) solid var(--linha-clara);
  flex: 0 0 auto;
}
.galeria-titulo {
  font-family: var(--fonte-secao);
  font-size: 1rem; font-weight: 600;
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.galeria-contador {
  font-size: var(--t-pequeno);
  color: var(--texto-claro-suave);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.galeria-palco {
  position: relative;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: var(--e-2);
  min-height: 0;              /* deixa a imagem encolher dentro do flex */
  touch-action: pan-y;
}
.galeria-palco img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;             /* sem isto, foto vertical estoura para fora do palco */
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--raio-card);
}

.galeria-rodape {
  flex: 0 0 auto;
  padding: var(--e-2) var(--e-3) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  border-top: var(--borda-fina) solid var(--linha-clara);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-2);
}
.galeria-legenda {
  font-size: var(--t-mini);
  color: var(--texto-claro-suave);
  margin: 0;
}
/* Bloco central do rodapé: legenda da foto mais o aviso fixo de imagem
   ilustrativa. O aviso vale para toda foto de empreendimento na planta. */
.galeria-legenda-bloco {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; text-align: center; min-width: 0;
}
.galeria-ilustrativa {
  font-size: var(--t-mini);
  color: var(--texto-claro-suave);
  opacity: 0.72;
}

/* Botões da galeria: alvo grande, porque metade vai usar no celular */
.galeria-btn {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  border: var(--borda-fina) solid var(--linha-clara);
  border-radius: 50%;
  background: rgba(15, 26, 36, 0.6);
  color: var(--texto-claro);
  transition: background var(--transicao), border-color var(--transicao);
}
.galeria-btn:hover { background: var(--acao-forte); border-color: var(--acao-forte); }
.galeria-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.galeria-btn[disabled] { opacity: 0.35; cursor: default; }
.galeria-btn[disabled]:hover { background: rgba(15,26,36,0.6); border-color: var(--linha-clara); }

/* No desktop as setas ficam sobre a imagem, nas laterais */
@media (min-width: 48em) {
  .galeria-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  }
  .galeria-nav-anterior { left: var(--e-3); }
  .galeria-nav-proxima  { right: var(--e-3); }
  .galeria-rodape .galeria-nav { display: none; }
  .galeria-topo, .galeria-rodape { padding-inline: var(--e-4); }
}

/* Trava a rolagem da página enquanto a galeria está aberta */
body.galeria-aberta { overflow: hidden; }

/* --- Chip / ficha rápida --- */
.ficha { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: 0 0 var(--e-3); }
.ficha li {
  border: var(--borda-fina) solid var(--areia-escura);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: var(--t-pequeno);
  color: var(--texto-escuro-suave);
}

/* --- Ícone circular dos blocos "Como eu trabalho" --- */
.icone-bloco {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: var(--borda-fina) solid var(--acao);
  border-radius: 50%;
  margin-bottom: var(--e-2);
  flex: 0 0 auto;
}
.icone-bloco svg { width: 20px; height: 20px; stroke: var(--acao); fill: none; stroke-width: 1.5; }
/* Sobre grafite o terracota escurece demais: clareia só o traço do ícone */
.fundo-grafite .icone-bloco { border-color: rgba(181,101,74,0.85); }
.fundo-grafite .icone-bloco svg { stroke: #D08A6E; }


/* ==========================================================================
   06. HEADER E NAVEGAÇÃO
   ========================================================================== */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--grafite);
  color: var(--texto-claro);
  border-bottom: var(--borda-fina) solid var(--linha-clara);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-2);
  min-height: 64px;
}
/* --- Assinatura da marca no header ---
   Uma assinatura só, a versão de uma linha, que cresce junto com a tela:
   268px no celular, 384px do tablet para cima. O manual pede 140px no mínimo
   para esta versão, então em qualquer tela ela fica acima do limite. */
.logo {
  display: flex; align-items: center;
  text-decoration: none;
  padding-block: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
}
.logo:hover { text-decoration: none; opacity: 0.88; }
.logo svg { display: block; height: auto; }

.marca-linha {
  width: 100%;
  max-width: 300px;   /* celular */
  min-width: 180px;   /* o manual pede 140px no mínimo, então sobra folga */
}

.nav ul { display: flex; align-items: center; gap: var(--e-3); }
.nav a {
  color: var(--texto-claro-suave);
  font-size: 0.9rem; font-weight: 500;
  text-decoration: none;
  padding-block: 0.5rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--texto-claro); text-decoration: none; }

/* No celular, o menu vira apenas 1 link (Contato), menos escolha, menos atrito */
.nav-desktop { display: none; }


/* ==========================================================================
   07. HERO
   Regra dos 5 segundos: quem / o quê / por quê antes de qualquer scroll.
   ========================================================================== */
.hero {
  position: relative;
  background: var(--grafite);
  color: var(--texto-claro);
  overflow: hidden;
  isolation: isolate;
}

/* A mídia (vídeo ou poster) fica no fundo, com altura travada.
   min-height em svh evita o "pulo" da barra do navegador no celular. */
.hero-midia {
  position: absolute; inset: 0; z-index: -2;
  /* O poster também entra como fundo aqui. Assim, se o vídeo estiver escondido
     (quem usa movimento reduzido) ou se o autoplay for bloqueado, ainda aparece
     a imagem, nunca um retângulo escuro. O vídeo, quando toca, cobre este fundo.
     O grafite fica só como última reserva, caso o poster falhe. */
  background-color: var(--grafite);
  background-image: url(../assets/hero-poster.jpg?v=1);
  background-size: cover;
  background-position: var(--hero-foco-mobile);
  background-repeat: no-repeat;
}

/* CORREÇÃO IMPORTANTE: o <picture> é um elemento comum e, sem altura própria,
   a imagem dentro dele não conseguia calcular height:100% e escorregava para
   fora do hero (era o texto alternativo aparecendo lá em cima na tela).
   O picture precisa ocupar a caixa inteira para a imagem ter do que herdar. */
.hero-midia picture {
  display: block;
  width: 100%; height: 100%;
}
/* object-fit: cover é o que resolve o vídeo vertical num hero horizontal.
   Ele amplia a mídia até cobrir a caixa inteira, sem deformar nada, e corta o
   que sobra. object-position escolhe qual pedaço fica visível: é a variável
   --hero-foco lá no topo do arquivo. Nenhum arquivo é editado, o corte é só
   visual, e você pode mudar de ideia quantas vezes quiser. */
.hero-midia img,
.hero-midia video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-foco-mobile);
  color: transparent;           /* se a imagem quebrar, não exibe o texto alt */
}

/* Véu escuro por cima da mídia.
   São duas camadas empilhadas, e cada uma resolve um problema:

   1. O FOCO: uma mancha escura ancorada no canto de baixo à esquerda, que é
      exatamente onde a headline e o CTA ficam. Ela desce até 94% de opacidade
      ali e some antes da metade da tela. É o que impede o título de apagar
      quando o vídeo passa por um quadro claro, tipo céu ou parede branca.

   2. O GERAL: o gradiente de cima para baixo, que dá unidade e escurece o pé
      da seção para emendar com a seção seguinte.

   Se um dia quiser o vídeo mais visível, diminua os números da primeira
   camada. Se o texto estiver sumindo, aumente. Só não passe de 0.96, senão
   o vídeo vira um fundo preto e some o motivo de ele estar ali. */
/* NO CELULAR o texto ocupa a largura toda, então o escurecimento vem de baixo
   para cima: leve no topo, forte embaixo, onde ficam a headline e o botão. */
.hero-veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(15,26,36,0.55) 0%,
      rgba(15,26,36,0.48) 26%,
      rgba(15,26,36,0.82) 56%,
      rgba(15,26,36,0.95) 100%);
}

/* Rede de segurança de última instância: mesmo que o véu falhe num quadro
   muito claro, a sombra mantém a letra legível. É discreta, não vira relevo. */
.hero h1,
.hero .credencial { text-shadow: 0 1px 24px rgba(15, 26, 36, 0.55); }

.hero-conteudo {
  position: relative;
  min-height: 88svh;
  min-height: 88vh; /* fallback para navegadores antigos */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--e-6) var(--e-5);
}

/* F-pattern: a frase abre no topo-esquerda, o CTA fecha na diagonal */
.hero h1 {
  font-family: var(--fonte-manifesto);
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--texto-claro);
  max-width: 16ch;
  margin: 0 0 var(--e-3);
  text-wrap: balance;
}
.hero .credencial {
  font-family: var(--fonte-corpo);
  font-size: var(--t-pequeno);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--champagne);
  margin: 0 0 var(--e-4);
}

/* O texto champanhe fica sobre o vídeo do hero e sobre a foto da seção da
   região. Um fundo bem discreto, quase transparente, atrás só dessas letras
   deixa a leitura mais fácil sem pesar no visual. Vale só onde há imagem
   atrás, não nos títulos sobre fundo chapado. */
.hero .credencial,
.secao-foto .texto-guia {
  display: inline-block;
  align-self: flex-start;   /* no hero é item flex: sem isto o fundo ocupa a largura toda */
  padding: 0.24em 0.72em;
  border-radius: 5px;
  background: rgba(2, 9, 32, 0.10);   /* azul marinho #020920, quase transparente (90%) */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.hero-acoes { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; }

/* Botão de play do vídeo (aparece só quando houver vídeo de verdade) */
.btn-play {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: transparent; border: 0; padding: 0.5rem 0;
  color: var(--texto-claro-suave);
  font-size: var(--t-pequeno); font-weight: 500;
}
.btn-play:hover { color: var(--texto-claro); }
.btn-play svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.2; }

/* Indicador de scroll, sutil */
.hero-scroll {
  margin-top: var(--e-4);
  font-size: var(--t-mini);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--texto-claro-suave);
  display: flex; align-items: center; gap: 0.6em;
}
.hero-scroll::before {
  content: ""; width: 28px; height: var(--borda-fina); background: var(--linha-clara);
}


/* ==========================================================================
   08. SEÇÕES DA HOME
   ========================================================================== */

/* --- Grade genérica: 1 coluna no celular, vira grade no desktop --- */
.grade { display: grid; gap: var(--e-3); }

/* --- Blocos "Como eu trabalho" --- */
.bloco-trabalho {
  padding: var(--e-3) 0;
  border-top: var(--borda-fina) solid var(--linha-clara);
}
.bloco-trabalho p { color: var(--texto-claro-suave); margin: 0; }
.bloco-trabalho .titulo-bloco { color: var(--texto-claro); }

/* --- Empreendimentos: rolagem horizontal no celular, grade no desktop --- */
.carrossel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 84%);
  gap: var(--e-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--e-3);
  padding-bottom: var(--e-2);
  margin-inline: calc(var(--e-3) * -1);
  padding-inline: var(--e-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.carrossel > * { scroll-snap-align: start; }

.card-imovel { display: flex; flex-direction: column; }
.card-imovel .card-corpo { display: flex; flex-direction: column; flex: 1; }
.card-imovel .perfil {
  font-size: var(--t-mini);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acao-forte);
  margin: 0 0 var(--e-1);
}
.card-imovel .titulo-bloco { margin-bottom: var(--e-2); }
.card-imovel .btn { margin-top: auto; }
.card-imovel .condicao {
  font-size: var(--t-pequeno);
  color: var(--texto-escuro-suave);
  border-left: 2px solid var(--areia-escura);
  padding-left: var(--e-2);
  margin: 0 0 var(--e-3);
}

/* Dica de rolagem, some no desktop */
.dica-rolagem {
  font-size: var(--t-mini); color: var(--texto-escuro-suave);
  margin-top: var(--e-2);
}

/* --- Blocos numerados (seção "O que ainda não está no mapa") --- */
.bloco-numerado { padding: var(--e-3) 0; border-top: var(--borda-fina) solid var(--linha-clara); }
.bloco-numerado .numero {
  display: block;
  font-family: var(--fonte-secao);
  font-size: var(--t-pequeno); font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--acao);
  margin-bottom: var(--e-1);
}
.bloco-numerado p { color: var(--texto-claro-suave); margin: 0; }
.bloco-numerado .titulo-bloco { color: var(--texto-claro); }
.fundo-areia .bloco-numerado { border-top-color: var(--linha-escura); }
.fundo-areia .bloco-numerado p { color: var(--texto-escuro-suave); }
.fundo-areia .bloco-numerado .titulo-bloco,
.fundo-areia .bloco-numerado .numero { color: var(--texto-escuro); }
.fundo-areia .bloco-numerado .numero { color: var(--acao-forte); }

/* --- Registro de incorporação: selo de credibilidade, obrigatório por lei --- */
.registro {
  font-size: var(--t-mini);
  color: var(--texto-escuro-suave);
  letter-spacing: 0.02em;
  margin: 0 0 var(--e-2);
}

/* --- Preço "a partir de" ---
   Regra da marca: valor entra como informação, nunca como chamariz.
   Por isso ele vive discreto, do tamanho do corpo de texto, e sempre
   acompanhado da data de referência. Nada de preço gigante em vermelho. */
.preco {
  font-family: var(--fonte-secao);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}
.preco .a-partir {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-escuro-suave);
  margin-bottom: 0.15rem;
}
.preco-nota { font-size: var(--t-mini); color: var(--texto-escuro-suave); margin: 0 0 var(--e-3); }
.preco-consulta { font-size: var(--t-pequeno); color: var(--texto-escuro-suave); margin: 0 0 var(--e-3); }

/* --- Filtros da página Empreendimentos --- */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e-1);
  margin-bottom: var(--e-4);
}
.filtros .rotulo-filtro {
  width: 100%;
  font-size: var(--t-mini);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--texto-escuro-suave);
  margin-bottom: var(--e-1);
}
.chip-filtro {
  background: transparent;
  border: var(--borda-fina) solid var(--areia-escura);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  min-height: 40px;
  font-size: var(--t-pequeno); font-weight: 500;
  color: var(--texto-escuro);
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
.chip-filtro:hover { border-color: var(--acao); }
.chip-filtro[aria-pressed="true"] {
  background: var(--acao-forte);
  border-color: var(--acao-forte);
  color: var(--texto-claro);
}

/* Grade de imóveis: 1 coluna no celular, cresce no desktop */
.grade-imoveis { display: grid; gap: var(--e-3); }
.grade-imoveis .card-imovel[hidden] { display: none !important; }

.contador-imoveis { font-size: var(--t-pequeno); color: var(--texto-escuro-suave); margin-top: var(--e-3); }

/* --- Link para vídeo do empreendimento --- */
.link-video {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--t-pequeno); font-weight: 500;
  color: var(--acao-forte);
  margin-bottom: var(--e-3);
}
.link-video svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* --- Prova social (desativada até haver depoimento real) --- */
.depoimento {
  border-left: 2px solid var(--acao);
  padding-left: var(--e-3);
  max-width: var(--largura-texto);
}
.depoimento blockquote {
  margin: 0 0 var(--e-2);
  font-family: var(--fonte-manifesto);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.35;
}
.depoimento figcaption { font-size: var(--t-pequeno); color: var(--texto-escuro-suave); }


/* ==========================================================================
   09. PÁGINA CONTATO
   ========================================================================== */
.formulario { display: grid; gap: var(--e-3); max-width: 34rem; }

.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: var(--t-pequeno); font-weight: 600; }
.campo .ajuda { font-size: var(--t-mini); color: var(--texto-escuro-suave); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--texto-escuro);
  background: var(--branco);
  border: var(--borda-fina) solid var(--areia-escura);
  border-radius: var(--raio-btn);
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  transition: border-color var(--transicao);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acao); }
.campo select { appearance: none; background-image: none; }

.form-nota {
  font-size: var(--t-pequeno);
  color: var(--texto-escuro-suave);
  max-width: 34rem;
}

/* Mensagem de retorno do formulário.
   Sem verde de "sucesso" nem vermelho de "erro": vermelho puro é proibido na
   marca e verde não existe na paleta. O aviso bom usa o grafite da casa, o
   aviso de problema usa o terracota, que já é a cor de ação. */
.form-status {
  border: var(--borda-fina) solid var(--areia-escura);
  border-left: 3px solid var(--grafite);
  border-radius: var(--raio-card);
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-pequeno);
  line-height: 1.5;
  background: var(--branco);
}
.form-status.sucesso { border-left-color: var(--grafite); }
.form-status.erro    { border-left-color: var(--acao-forte); }
.form-status[hidden] { display: none; }

/* Painel "Onde eu atuo": duas fichas empilhadas, com a mesma estrutura.
   O truque de leitura é a repetição: cidade, o que é, para quem serve.
   O olho aprende o padrão na primeira e lê a segunda em metade do tempo. */
.painel-atuacao {
  border-radius: var(--raio-card);
  padding: var(--e-4) var(--e-3);
}

.lista-atuacao {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.lista-atuacao li {
  padding: var(--e-3);
  border: var(--borda-fina) solid var(--linha-clara);
  border-radius: var(--raio-card);
  background: rgba(245, 243, 238, 0.03);
}
.lista-atuacao .titulo-bloco {
  margin-bottom: 0.35rem;
  color: var(--texto-claro);
}
.lista-atuacao p { color: var(--texto-claro-suave); margin: 0; font-size: var(--t-pequeno); }

/* A linha do perfil é a que responde "isso é para mim?". Ganha destaque
   próprio, separada por um fio, e o rótulo em champagne. */
.atuacao-perfil {
  margin-top: var(--e-2) !important;
  padding-top: var(--e-2);
  border-top: var(--borda-fina) solid var(--linha-clara);
  color: var(--texto-claro) !important;
}
.atuacao-perfil span {
  display: block;
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 0.15rem;
}

.atuacao-nota {
  margin: var(--e-4) 0 0;
  padding-top: var(--e-3);
  border-top: var(--borda-fina) solid var(--linha-clara);
}


/* ==========================================================================
   10. RODAPÉ
   ========================================================================== */
.rodape { background: var(--grafite); color: var(--texto-claro); padding-block: var(--e-5); }
.rodape-topo { display: grid; gap: var(--e-4); }

.assinatura {
  font-family: var(--fonte-manifesto);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 var(--e-2);
}
/* Assinatura no rodapé. O respiro em volta segue o manual: meio monograma
   livre de cada lado, medido a partir dos cantos da moldura. */
.marca-rodape {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: var(--e-3) 0 0;
  padding: 0 0.6rem;
}

/* A marca institucional fica na área legal, longe da assinatura pessoal.
   O manual pede que as duas não se encostem. */
.marca-institucional {
  font-family: var(--fonte-corpo);
  font-size: var(--t-mini);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0;
}

.rodape-links { display: grid; gap: var(--e-1); }
.rodape-links a { color: var(--texto-claro-suave); font-size: var(--t-pequeno); }
.rodape-links a:hover { color: var(--texto-claro); }

.sociais { display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.sociais a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: var(--borda-fina) solid var(--linha-clara);
  border-radius: 50%;
  color: var(--texto-claro-suave);
}
.sociais a:hover { border-color: var(--acao); color: var(--texto-claro); text-decoration: none; }
.sociais svg { width: 18px; height: 18px; fill: currentColor; }

.rodape-legal {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: var(--borda-fina) solid var(--linha-clara);
  font-size: var(--t-mini);
  color: var(--texto-claro-suave);
  display: grid; gap: var(--e-1);
}
.creci { font-weight: 600; letter-spacing: 0.06em; color: var(--texto-claro); }


/* ==========================================================================
   11. WHATSAPP FLUTUANTE
   Fixo em qualquer ponto do scroll, celular e desktop.
   ========================================================================== */
.wpp-flutuante {
  position: fixed;
  right: var(--e-2);
  bottom: calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--acao-forte);
  color: var(--texto-claro);
  border: var(--borda-fina) solid var(--acao-hover);
  border-radius: 999px;
  padding: 0.85rem 1.1rem;
  min-height: 52px;
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(15, 26, 36, 0.28);
  transition: background var(--transicao), transform var(--transicao);
}
.wpp-flutuante:hover { background: var(--acao-hover); color: var(--texto-claro); text-decoration: none; }
.wpp-flutuante:active { transform: translateY(1px); }
.wpp-flutuante svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
/* No celular fica só o ícone, para não cobrir conteúdo */
.wpp-flutuante .rotulo { display: none; }


/* ==========================================================================
   12. DESKTOP
   Mobile-first: tudo acima é o celular. Daqui pra baixo, o que muda em telas
   maiores. A maior parte do tráfego vem do Instagram, no celular.
   ========================================================================== */

@media (min-width: 40em) {          /* 640px, celular grande / tablet pequeno */
  .container { padding-inline: var(--e-4); }
  .hero-acoes { flex-direction: row; align-items: center; gap: var(--e-3); }
  .wpp-flutuante .rotulo { display: inline; }
  .carrossel { margin-inline: calc(var(--e-4) * -1); padding-inline: var(--e-4); }
}

@media (min-width: 48em) {          /* 768px, tablet */
  .secao { padding-block: var(--e-7); }

  /* Da largura de tablet para cima o hero fica horizontal de verdade, e aí
     entra o enquadramento que sobe a imagem para pegar bem a cabeça. */
  .hero-midia img,
  .hero-midia video { object-position: var(--hero-foco); }
  .hero-midia { background-position: var(--hero-foco); }

  /* NO DESKTOP o texto vive na coluna da esquerda e o vídeo respira na
     direita. Por isso o escurecimento vira uma faixa lateral: quase opaca
     onde o texto está, transparente onde o assunto do vídeo aparece.

     Foi o que faltava na primeira versão: o véu era forte só no rodapé, e a
     linha "Corretor em Itajaí e Porto Belo" caía justamente num quadro claro
     e sumia. Agora ela tem fundo escuro garantido em qualquer quadro.

     Se quiser o vídeo mais visível, diminua os dois primeiros números da
     faixa lateral. Se o texto voltar a sumir, aumente. */
  .hero-veu {
    background:
      linear-gradient(97deg,
        rgba(15,26,36,0.90) 0%,
        rgba(15,26,36,0.88) 26%,
        rgba(15,26,36,0.60) 46%,
        rgba(15,26,36,0.18) 68%,
        rgba(15,26,36,0.05) 100%),
      linear-gradient(180deg,
        rgba(15,26,36,0.40) 0%,
        rgba(15,26,36,0.34) 45%,
        rgba(15,26,36,0.80) 100%);
  }

  /* Do tablet para cima a assinatura cresce, mas continua sendo uma só */
  .marca-linha  { max-width: 470px; }
  .header-inner { min-height: 88px; }
  .marca-rodape { max-width: 400px; }
  .nav-desktop { display: block; }
  .grade-2 { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
  .grade-imoveis { grid-template-columns: repeat(2, 1fr); gap: var(--e-4); }
  .grade-3 { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }
  .bloco-trabalho { border-top: 0; border-left: var(--borda-fina) solid var(--linha-clara); padding: 0 0 0 var(--e-3); }
  .bloco-numerado { border-top: 0; border-left: var(--borda-fina) solid var(--linha-clara); padding: 0 0 0 var(--e-3); }
  .fundo-areia .bloco-numerado { border-left-color: var(--linha-escura); }
  .rodape-topo { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .rodape-legal { grid-template-columns: auto auto; justify-content: space-between; }
  .painel-atuacao { padding: var(--e-5) var(--e-4); }
}

@media (min-width: 64em) {          /* 1024px, desktop */
  .hero-conteudo { min-height: 78svh; min-height: 78vh; padding-block: var(--e-7) var(--e-6); }
  .hero h1 { max-width: 14ch; }

  /* No desktop os empreendimentos viram grade, sem rolagem lateral */
  .carrossel {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0; padding-inline: 0;
    gap: var(--e-4);
  }
  .dica-rolagem { display: none; }

  /* Seção com texto + imagem lado a lado */
  .duas-colunas { grid-template-columns: 1.1fr 0.9fr; gap: var(--e-6); align-items: center; }
  .contato-colunas { grid-template-columns: 1fr 1fr; gap: var(--e-6); align-items: start; }
  .grade-imoveis { grid-template-columns: repeat(3, 1fr); gap: var(--e-4); }

  .wpp-flutuante { right: var(--e-4); bottom: var(--e-4); }
}


/* ==========================================================================
   13. ACESSIBILIDADE E MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* O vídeo do hero continua rodando mesmo com movimento reduzido: é prioridade
     do Nícolas manter o vídeo sempre que o navegador permitir. Ele é mudo e sem
     cortes bruscos, então o impacto é baixo. */
}

/* Impressão: some com o que não faz sentido no papel */
@media print {
  .wpp-flutuante, .header, .hero-midia, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}