/* ==========================================================================
   CORREÇÕES DA FASE 1
   ==========================================================================

   Folha própria, carregada DEPOIS das do site publicado. Existe para separar
   claramente o que é reprodução do publicado (nos arquivos originais, que não
   se toca) do que é correção deliberada nossa (aqui).

   Regra: cada correção entra com data, motivo e o que ela desfaz. Sem isso,
   daqui a três meses ninguém sabe se a regra é herdada ou nossa.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Menu de desktop nas páginas de empreendimento (07/08/2026, pedido do Allan)

   O QUE O SITE PUBLICADO FAZ: em `media-queries.css`, dentro do breakpoint de
   1280px, existe a regra

       body:not(.pagina-empreendimento-detalhes) header .menu .mobile { display: none; }

   ou seja, o menu de desktop aparece em toda página EXCETO nas de empreendimento.
   Nelas o botão de hambúrguer fica no lugar, mesmo em tela grande.

   POR QUE MUDAR: hambúrguer em desktop esconde a navegação atrás de um clique
   sem necessidade, e as páginas de empreendimento são justamente onde o
   visitante mais navega entre produtos.

   O QUE ESTA REGRA FAZ: iguala as páginas de empreendimento às demais a partir
   de 1280px. É desvio consciente do publicado, não correção de defeito.

   ⚠️ SÃO QUATRO REGRAS, NÃO DUAS. Na primeira tentativa copiei só as duas
   primeiras e o menu apareceu empilhado na vertical, por cima da foto. Faltavam
   a do `nav` e a do `a`: no estado base (mobile) o menu é uma gaveta em tela
   cheia, onde cada link tem `width: 100%` de propósito para empilhar. Sem
   desfazer isso, o menu vira coluna. As quatro andam juntas.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1280px) {
  .pagina-empreendimento-detalhes header .menu .mobile { display: none; }

  .pagina-empreendimento-detalhes header .menu .desktop {
    position: relative;
    justify-content: flex-start;
    gap: 0px;
    padding: 0px;
    height: auto;
    background-color: transparent;
    transform: none;
    overflow: visible;
  }

  /*
    O nav vira linha.

    ⚠️ AQUI NÃO SE COPIA O ORIGINAL. O site publicado usa
    `justify-content: space-between` com `gap: 0`, e isso só separa os itens
    quando sobra largura no container. Nas páginas de empreendimento o topo é
    mais estreito, então os itens encostam e sai
    "EMPREENDIMENTOSA NEOPRIMEBLOGCONTATO".

    Espaçamento explícito resolve independente da largura disponível.
  */
  .pagina-empreendimento-detalhes header .menu .desktop nav {
    flex: 0 1 auto;
    justify-content: flex-end;
    gap: 32px;
    padding-right: 0px;
    text-align: left;
  }

  /* Sem esta, cada link ocupa 100% da largura e o menu empilha. */
  .pagina-empreendimento-detalhes header .menu .desktop nav a { width: auto; }

  /* O menu inteiro encosta à direita, e o logo fica sozinho à esquerda. */
  .pagina-empreendimento-detalhes header .menu .desktop {
    justify-content: flex-end;
    gap: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Selo de pré-lançamento (Spec 002)

   Exigência do jurídico: empreendimento sem registro de incorporação precisa
   constar como pré-lançamento na própria página. Sóbrio de propósito, como
   manda o arquétipo Governante: é informação legal, não etiqueta de campanha.
   --------------------------------------------------------------------------- */
#empreendimento-detalhes .selo-pre-lancamento {
  margin: 18px auto 0;
  text-align: center;
  font-family: 'Barlow', Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.85;
}

/* A régua vermelha de 4px é elemento recorrente da marca (constitution, Artigo 1.4). */
#empreendimento-detalhes .selo-pre-lancamento::after {
  content: '';
  display: block;
  width: 42px;
  height: 4px;
  margin: 10px auto 0;
  background: #e4104f;
}

/* ---------------------------------------------------------------------------
   Página 404 (Spec 002). Sóbria: o visitante já errou o caminho, o que ele
   precisa é do caminho de volta, não de um pedido de desculpas grande.
   --------------------------------------------------------------------------- */
.pagina-404 { padding: 120px 0 140px; background: #1d2749; color: #ffffff; text-align: center; }
.pagina-404 h1 { font-family: 'Charis SIL', Georgia, serif; font-style: italic; font-size: 40px; margin: 0 0 14px; }
.pagina-404 p { font-family: 'Barlow', Arial, sans-serif; font-size: 17px; opacity: 0.9; margin: 0 0 26px; }
.pagina-404 .caminhos { list-style: none; padding: 0; margin: 0; font-family: 'Barlow', Arial, sans-serif; font-size: 15px; }
.pagina-404 .caminhos li { margin: 8px 0; opacity: 0.85; }
.pagina-404 .caminhos a { color: #ffffff; text-decoration: underline; }
.pagina-404 .caminhos a:hover { color: #e4104f; }

/* ---------------------------------------------------------------------------
   Campos de e-mail e telefone nos formulários (Spec 002)

   Defeito preexistente, achado ao medir: o site publicado usa `type="text"` em
   todos os campos, e o CSS mira exatamente `input[type="text"]`. O site novo
   passou a usar `type="email"`, que é melhor (valida sozinho e abre o teclado
   certo no celular), mas ficou de fora do seletor: o campo aparecia como uma
   caixinha branca de 210x24 no meio do formulário, em vez dos 585x50 dos
   outros.

   Repete os mesmos valores da regra original em vez de alterá-la, porque a
   Fase 1 não mexe no CSS publicado.
   --------------------------------------------------------------------------- */
.formulario form .campo input[type="email"],
.formulario form .campo input[type="tel"] {
  padding-bottom: 20px;
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 1;
  border-bottom: 1px solid var(--cor-branco);
  background-color: transparent;
  overflow: hidden;
}

.formulario form .campo input[type="email"]:focus,
.formulario form .campo input[type="tel"]:focus {
  border-color: var(--cor-terciaria);
}

/* ---------------------------------------------------------------------------
   Espaço do Turnstile dentro do formulário (Spec 002).
   --------------------------------------------------------------------------- */
.formulario form .campo.turnstile { margin: 8px 0 4px; }