/* ==========================================================================
   Monte Negro Group — Base / componentes / interações
   Aqui ficam: reset leve, estados :hover/:focus (que no arquivo original
   eram atributos "style-hover"), barra de navegação, animações de entrada
   e ajustes responsivos.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mn-bg);
  color: var(--mn-text);
  overflow-x: hidden;
  font-family: var(--mn-font);
  font-weight: 400;
}

::selection { background: rgba(90, 31, 43, 0.9); color: var(--mn-branco-mineral); }

img { display: block; }

/* ── LAYOUT: container único da página ─────────────────────────────────────
   Todo bloco de conteúdo usa .mn-wrap. Abaixo de --mn-page-max ele é fluido
   de ponta a ponta, respeitando o respiro lateral; acima, trava na largura
   máxima e centraliza. O respiro é o mesmo da navbar, então tudo na página
   alinha na mesma linha vertical.
   As margens VERTICAIS de cada bloco continuam no style inline do HTML. */
.mn-wrap {
  width: 100%;
  max-width: var(--mn-page-max);
  margin-inline: auto;
  padding-inline: var(--mn-page-pad);
}

/* Palavra destacada dentro de um título: itálico no bordô da marca.
   A família Nexa não traz arquivo itálico, então o navegador inclina a
   Book — resultado limpo neste corpo grande. */
.mn-realce {
  font-style: italic;
  color: var(--mn-bordo);
}

/* Título grande à esquerda + texto de apoio à direita.
   O título leva mais espaço porque roda em corpo muito maior; sem isso ele
   quebra em linhas curtas e sobra vazio na coluna. Abaixo de 960px empilha. */
.mn-split {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 56px 80px;
  align-items: end;
}
.mn-split > :last-child {
  /* Encosta o bloco de apoio (traço + parágrafo, juntos) na borda direita do
     conteúdo, em vez de deixá-lo boiando no meio da coluna. */
  margin-left: auto;
}
@media (max-width: 960px) {
  .mn-split { grid-template-columns: 1fr; }
  .mn-split > :last-child { margin-left: 0; }
}

/* ── Carrossel infinito da faixa de processo ───────────────────────────────
   Sangra de ponta a ponta e desliza sozinho para a esquerda, em laço.
   O movimento é feito por transform no trilho (não por scrollLeft): assim o
   salto de volta ao início é invisível, coisa que o scroll nativo não faz.
   Quem anima e clona as fotos é initCarrossel() em js/main.js. */
.mn-carrossel {
  overflow: hidden;
  cursor: grab;
  /* Deixa a página rolar na vertical, mas entrega o gesto horizontal ao
     arraste do carrossel. */
  touch-action: pan-y;
}
.mn-carrossel.mn-arrastando { cursor: grabbing; }

.mn-carrossel-trilho {
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

/* Sem isto o navegador inicia o arraste nativo da imagem e o gesto morre. */
.mn-carrossel img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

input::placeholder, textarea::placeholder { color: rgba(47, 50, 52, 0.42); }

@keyframes mnHeroZoom {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12); }
}

/* ── NAVBAR ────────────────────────────────────────────────────────────── */
/* A barra sangra de ponta a ponta — o fundo com blur cobre a tela inteira —
   mas seu conteúdo vive num .mn-nav-inner.mn-wrap, e portanto alinha com o
   resto da página na mesma linha vertical. */
.mn-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 0;
  background: transparent;
  color: var(--mn-branco-mineral);
  border-bottom: 1px solid transparent;
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.mn-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* .mn-nav-solida: páginas sem hero escuro atrás da barra (catálogo, contato).
   Lá o fundo é claro desde o topo, então a barra precisa já nascer sólida —
   transparente com texto claro, ela sumiria. */
.mn-nav.scrolled,
.mn-nav.mn-nav-solida {
  background: rgba(248, 246, 242, 0.72);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(47, 50, 52, 0.08);
  color: var(--mn-chumbo);
}

/* Marca o item da navegação correspondente à página aberta. */
.mn-navlink[aria-current="page"] { opacity: 1 !important; font-weight: 800; }

/* Telefone/e-mail da página de contato: clicáveis, mas discretos. */
.mn-link-contato { transition: color .3s ease; }
.mn-link-contato:hover { color: var(--mn-bordo) !important; }

/* Primeiro bloco de uma página interna: abre espaço para a barra fixa,
   que flutua sobre o conteúdo. */
.mn-pagina-topo { padding-top: 190px; }
@media (max-width: 960px) { .mn-pagina-topo { padding-top: 140px; } }
.mn-navlink { transition: opacity .3s ease; }
.mn-navlink:hover { opacity: 0.55 !important; }

/* Botão hambúrguer (mobile) */
.mn-nav-toggle {
  display: none;
  background: none; border: 1px solid currentColor; color: inherit;
  border-radius: 999px; padding: 10px 18px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
}

/* Menu overlay mobile */
.mn-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(47, 50, 52, 0.97); color: var(--mn-branco-mineral);
  display: none; flex-direction: column; justify-content: center;
  /* Só aparece em ≤960px, onde a página nunca passa de --mn-page-max — logo
     o respiro é sempre o próprio padding, sem precisar do inset. */
  gap: 28px; padding: 0 var(--mn-page-pad);
}
.mn-menu.open { display: flex; }
.mn-menu a { text-decoration: none; color: inherit; font-size: 32px; letter-spacing: -0.03em; }

/* ── Botões / links de ação ────────────────────────────────────────────── */
.mn-btn-primary { transition: background .3s ease, transform .2s ease; }
.mn-btn-primary:hover { background: var(--mn-bordo-escuro) !important; }
.mn-btn-primary:active { transform: scale(0.98); }

.mn-btn-outline-light { transition: border-color .3s ease, transform .2s ease; }
.mn-btn-outline-light:hover { border-color: var(--mn-branco-mineral) !important; }
.mn-btn-outline-light:active { transform: scale(0.98); }

.mn-btn-outline-dark { transition: background .3s ease, color .3s ease, transform .2s ease; }
.mn-btn-outline-dark:hover { background: var(--mn-chumbo) !important; color: var(--mn-branco-mineral) !important; }
.mn-btn-outline-dark:active { transform: scale(0.98); }

.mn-link-soft { transition: opacity .3s ease; }
.mn-link-soft:hover { opacity: 0.6 !important; }

/* ── Galeria dos projetos de destaque ──────────────────────────────────────
   As fotos vêm todas em retrato, mas em duas proporções (4:5 e 3:4). O
   aspect-ratio fixo + object-fit:cover deixa a grade uniforme mesmo assim.
   A primeira foto de cada projeto ocupa duas colunas, para dar hierarquia. */
.mn-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px;
}
.mn-galeria figure {
  margin: 0;
  overflow: hidden;
  border-radius: 0 22px 0 22px;
  aspect-ratio: 3 / 4;
  background: rgba(168, 157, 145, 0.22);
}
.mn-galeria img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .mn-galeria { grid-template-columns: repeat(3, 1fr); }
  /* A primeira foto ocupa 2 colunas POR 2 linhas. O span duplo é o que fecha
     a grade sem buracos nos projetos de 3 e de 6 fotos; com span só na
     horizontal sobravam células vazias no fim. */
  .mn-galeria figure:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
  }
  /* Num projeto de 5 fotos sobraria uma célula vazia no canto: a última se
     alarga e fecha a linha. */
  .mn-galeria figure:last-child:nth-child(5) { grid-column: span 2; aspect-ratio: 3 / 2; }
}

/* ── Imagens com zoom no hover ─────────────────────────────────────────── */
.mn-img-zoom { transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mn-img-zoom:hover { transform: scale(1.04); }

.mn-card-cover { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.mn-card:hover .mn-card-cover { transform: scale(1.78); }

.mn-catalog-card { transition: transform .5s var(--mn-ease), box-shadow .5s ease; }
.mn-catalog-card:hover { transform: translateY(-4px); box-shadow: 0 24px 80px rgba(47, 50, 52, 0.10); }

.mn-exclusive-img { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.mn-exclusive-card:hover .mn-exclusive-img { transform: scale(1.05); }

/* ── Campos de formulário ──────────────────────────────────────────────── */
.mn-field { transition: border-color .3s ease; color: var(--mn-chumbo); }
.mn-field:focus { border-color: var(--mn-bordo); }

/* Enquanto nada foi escolhido, o <select> imita o cinza de placeholder dos
   demais campos; depois da escolha volta ao texto normal. Sem isso, "Perfil"
   e "Interesse" apareceriam em preto ao lado de placeholders cinza.
   Onde :has() não existir, cai no texto normal — só perde o cinza. */
select.mn-field:has(option[value=""]:checked) { color: rgba(47, 50, 52, 0.42); }
select.mn-field option { color: var(--mn-chumbo); }

/* ── Formulário de leads (contato.html) ────────────────────────────────────
   Chips = botões de escolha. Segmento aceita um; materiais, vários.
   Quem controla é js/formulario.js. */
.mn-form-rotulo {
  display: block;
  margin: 4px 0 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(47, 50, 52, 0.55);
}

.mn-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.mn-chip {
  border: 1px solid rgba(47, 50, 52, 0.22);
  background: rgba(248, 246, 242, 0.6);
  color: var(--mn-chumbo);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.mn-chip:hover { border-color: var(--mn-chumbo); }
.mn-chip[aria-pressed="true"] {
  background: var(--mn-chumbo);
  border-color: var(--mn-chumbo);
  color: var(--mn-branco-mineral);
}

/* O campo Empresa some para quem escolhe "Cliente final". */
.mn-campo[hidden] { display: none !important; }

.mn-invalido { border-color: #B3261E !important; }

.mn-erro {
  margin: 0;
  padding: 12px 16px;
  background: rgba(179, 38, 30, 0.08);
  border-left: 2px solid #B3261E;
  font-size: 14px;
  line-height: 1.5;
  color: #7A1A15;
}

.mn-consentimento {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(47, 50, 52, 0.72);
}
.mn-consentimento input { margin-top: 3px; flex: none; }
.mn-consentimento a { color: var(--mn-bordo); }

/* Campo-armadilha: invisível para gente, preenchido por robô. Fora da tela
   em vez de display:none, que alguns robôs detectam e ignoram. */
.mn-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Tela de agradecimento, no lugar do formulário depois do envio. */
.mn-obrigado {
  background: rgba(168, 157, 145, 0.14);
  padding: 52px 42px;
  border-radius: 0 28px 0 28px;
  align-self: start;
}

/* ── Reveal on scroll ──────────────────────────────────────────────────── */
[data-reveal].mn-reveal-init {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--mn-ease), transform 0.8s var(--mn-ease);
}
[data-reveal].mn-revealed { opacity: 1; transform: translateY(0); }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Reduz o respiro lateral em um lugar só: a navbar, o .mn-wrap, a faixa
     arrastável e o menu overlay acompanham por usarem o mesmo token. */
  :root { --mn-page-pad: var(--mn-page-pad-sm); }
  .mn-nav { padding-block: 16px; }
  .mn-nav-wide, .mn-nav-cta { display: none !important; }
  .mn-nav-toggle { display: inline-block; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}