/* =============================================================
   Fazenda Laçada · Nelore da Laçada
   Landing page institucional — V1
   Todas as cores e fontes vêm do Brand Kit v1.0.
   Escrito mobile first: o padrão é o celular, os @media ampliam.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paleta oficial */
  --verde-lacada:   #7C8A6E;
  --preto-editorial:#1F1F1C;
  --bege-papel:     #D9D1BB;
  --bege-claro:     #ECE5D6;
  --oliva-escuro:   #5C624E;
  --verde-profundo: #384034;
  --dourado:        #B49A63;
  --marrom-sela:    #6E4F38;

  /* Tipografia: fontes nativas, sem download */
  --serif: Georgia, Cambria, "Times New Roman", serif;
  --sans: "Century Gothic", "URW Gothic", Calibri, "Segoe UI", Arial, sans-serif;

  /* Estrutura */
  --largura-max: 1180px;
  --margem: 6vw;
  --respiro-secao: 4.5rem;

  /* Altura real do cabeçalho = altura do logo + padding vertical.
     O hero usa este valor para subir exatamente o que o cabeçalho ocupa.
     Se o logo ou o padding mudarem, atualize aqui junto. */
  --logo-altura: 64px;
  --cabecalho-padding: .6rem;
  --cabecalho-altura: calc(var(--logo-altura) + var(--cabecalho-padding) * 2);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--cabecalho-altura); }

body {
  margin: 0;
  background: var(--bege-papel);
  color: var(--preto-editorial);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* Padrão de link de texto: dourado e semibold, sem sublinhado.
   Vale para links dentro de blocos de texto. Botões, menu e faixa sazonal
   têm classe própria e ficam de fora. */
.contato__secundario a,
.rodape__dados a {
  color: var(--dourado);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease;
}
.contato__secundario a:hover,
.rodape__dados a:hover { opacity: .75; }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0; }

p { margin: 0 0 1rem; }

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

/* Link de acessibilidade, visível apenas no foco por teclado */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--verde-profundo); color: var(--bege-claro);
  padding: .75rem 1rem; font-size: .8rem;
}
.pular:focus { left: 0; }

/* ---------- 3. Blocos utilitários ---------- */
.conteudo {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--margem);
}

.secao { padding: var(--respiro-secao) 0; }
.secao--papel  { background: var(--bege-papel); }
.secao--claro  { background: var(--bege-claro); }
.secao--escuro { background: var(--verde-profundo); color: var(--bege-claro); }

.centro { text-align: center; }
.estreito { max-width: 620px; }

.kicker {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oliva-escuro);
  margin-bottom: .75rem;
}

.titulo {
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  color: var(--verde-profundo);
  margin-bottom: 1.5rem;
}
.titulo--claro { color: var(--bege-claro); }

.apoio { font-size: 1.05rem; color: var(--oliva-escuro); max-width: 46ch; }
.centro .apoio { margin-left: auto; margin-right: auto; }
.apoio--claro { color: var(--bege-claro); opacity: .9; }

/* Frase de abertura com mais peso, sem competir com o título da seção */
.apoio--forte {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  color: var(--verde-profundo);
  max-width: 32ch;
  margin-bottom: .85rem;
}

/* Filete dourado curto, divisor padrão da marca */
.titulo::after {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--dourado);
  margin-top: 1.25rem;
}
.centro .titulo::after { margin-left: auto; margin-right: auto; }

/* Marcação de conteúdo ainda não fornecido */
.etiqueta-placeholder {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marrom-sela);
}
.etiqueta-placeholder--bloco {
  display: block;
  border: 1px dashed var(--marrom-sela);
  padding: 2rem 1.25rem;
  line-height: 1.6;
}

/* ---------- 4. Botões ---------- */
.botao {
  display: inline-block;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Branco sobre Oliva Escuro: 6,3:1, combinação aprovada no Brand Kit.
   Branco sobre Verde Laçada reprovaria em contraste. */
.botao--primario {
  background: var(--oliva-escuro);
  color: #FFFFFF;
  border-color: var(--oliva-escuro);
}
.botao--primario:hover { background: var(--verde-profundo); border-color: var(--verde-profundo); }

/* Botão para uso sobre fundo Verde Profundo */
.botao--claro {
  background: var(--bege-claro);
  color: var(--verde-profundo);
  border-color: var(--bege-claro);
}
.botao--claro:hover { background: #FFFFFF; border-color: #FFFFFF; }

.botao--contorno {
  color: var(--bege-claro);
  border-color: var(--bege-claro);
}
.botao--contorno:hover { background: var(--bege-claro); color: var(--verde-profundo); }

.botao--escuro {
  background: var(--verde-profundo);
  color: var(--bege-claro);
  border-color: var(--verde-profundo);
}
.botao--escuro:hover { background: var(--oliva-escuro); border-color: var(--oliva-escuro); }

/* ---------- 5. Faixa sazonal ---------- */
.faixa {
  background: var(--verde-profundo);
  color: var(--bege-claro);
  border-bottom: 1px solid rgba(180, 154, 99, .5);
}
.faixa__conteudo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: .6rem var(--margem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .35rem 1rem;
  text-align: center;
}
.faixa__texto { margin: 0; font-size: .78rem; letter-spacing: .04em; }
.faixa__link {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dourado);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease;
}
.faixa__link:hover { opacity: .75; }

/* ---------- 6. Cabeçalho ---------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color .25s ease;
}
.cabecalho--solido { background: var(--verde-profundo); }

.cabecalho__interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--cabecalho-padding) var(--margem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* display:block evita o espaço extra que a linha de texto daria abaixo da img */
.cabecalho__logo img { height: var(--logo-altura); width: auto; display: block; }

.menu-botao {
  background: none;
  border: 0;
  padding: .5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.menu-botao span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--bege-claro);
}

.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--verde-profundo);
  padding: .5rem var(--margem) 1.25rem;
  border-top: 1px solid rgba(236, 229, 214, .15);
}
.menu.aberto { display: block; }
.menu a {
  display: block;
  padding: .7rem 0;
  color: #FFFFFF;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* O menu flutua sobre o vídeo: a sombra garante leitura em qualquer frame */
.menu a { text-shadow: 0 1px 3px rgba(31, 31, 28, .6); }

/* "Catálogo" se distingue por um filete dourado, não pela cor do texto,
   que sobre imagem perderia contraste */
.menu__catalogo { border-bottom: 2px solid var(--dourado); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  /* teto em px para o hero não esticar em telas muito altas */
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  /* sobe exatamente a altura do cabeçalho, que passa a flutuar sobre o vídeo.
     Um valor fixo aqui deixava sobrar uma faixa do fundo do body no celular. */
  margin-top: calc(-1 * var(--cabecalho-altura));
  padding-top: var(--cabecalho-altura);
}
.hero__imagem { position: absolute; inset: 0; }
.hero__imagem img { width: 100%; height: 100%; object-fit: cover; }

/* O vídeo cobre o hero em qualquer tela. A foto do <picture> fica atrás,
   aparecendo só enquanto ele carrega ou se não carregar. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay de leitura: escuro na base, mais presente no topo por causa do
   vídeo, que muda de luminosidade a cada frame */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(56, 64, 52, .94) 0%, rgba(56, 64, 52, .6) 42%, rgba(56, 64, 52, .12) 72%),
    linear-gradient(to bottom, rgba(56, 64, 52, .62) 0%, rgba(56, 64, 52, .1) 26%);
}

.hero__conteudo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--margem) 3.5rem;
  color: var(--bege-claro);
}
.hero__titulo {
  font-size: clamp(1.75rem, 6.4vw, 3.4rem);
  max-width: 18ch;
  margin-bottom: 1rem;
}
.hero__apoio {
  font-size: clamp(.95rem, 2.6vw, 1.1rem);
  max-width: 42ch;
  margin-bottom: 1.75rem;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- 8. Linha do tempo ---------- */
.linha-tempo {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}
.marco {
  padding-left: 1.25rem;
  border-left: 1px solid var(--dourado);
}
.marco__ano {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--verde-profundo);
  line-height: 1.1;
}
.marco__texto {
  display: block;
  font-size: .92rem;
  color: var(--oliva-escuro);
  margin-top: .35rem;
  max-width: 30ch;
}

/* ---------- 9. Quem somos ---------- */
.duas-colunas { display: grid; gap: 2.5rem; }

.figura { margin: 0; }
/* A foto é exportada em 3:2 e exibida em 4:5. O object-position desloca o
   enquadramento para a esquerda, centralizando as cabeças dos três touros. */
.figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 34% center;
}

/* ---------- 10. Pilares de seleção ---------- */
.pilares {
  display: grid;
  gap: 2.25rem;
  margin-top: 2.5rem;
}
.pilar h3 {
  font-size: 1.15rem;
  color: var(--verde-profundo);
  margin: .75rem 0 .5rem;
}
.pilar p { font-size: .95rem; color: var(--preto-editorial); margin: 0; }

.pilar__icone {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--oliva-escuro);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Selo do PMGZ: apoio à seção, nunca protagonista */
.avaliacao { margin: 2.75rem 0 2.75rem; }
.avaliacao .kicker { margin-bottom: .6rem; }
.avaliacao__selo { height: 46px; width: auto; opacity: .85; }
.fechamento {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.8vw, 1.3rem);
  color: var(--verde-profundo);
  max-width: 44ch;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--dourado);
}

/* ---------- 11. Galeria ---------- */
/* auto-fit mantém a grade correta com 3 ou com 6 fotos */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0;
}
.galeria img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- 12. Fazendas ---------- */
.fazendas { display: grid; gap: 2rem; margin-top: 2.5rem; }
.fazenda {
  background: var(--bege-claro);
  padding: 2rem 1.75rem;
  border-top: 2px solid var(--dourado);
}
.fazenda__ano {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2rem;
  color: var(--verde-profundo);
  margin: 0 0 .5rem;
  line-height: 1;
}
.fazenda h3 { font-size: 1.15rem; color: var(--verde-profundo); margin-bottom: .25rem; }
.fazenda__local {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oliva-escuro);
  margin-bottom: 1rem;
}
.fazenda__info p:last-child { margin-bottom: 0; font-size: .95rem; }

/* Mapa do estado. O PNG e transparente e usa o Bege Papel do Brand Kit: sobre
   o Bege Claro do card ele le como silhueta tonal, nao como imagem colada.
   Nenhuma moldura ou fundo extra e necessario.
   Os dois estados tem proporcoes bem diferentes (GO quase quadrado, TO alto e
   estreito), entao cada um entra na mesma caixa com object-fit: contain:
   mesma altura nos dois cards, largura livre, sem distorcao. */
.fazenda__mapa { margin-top: 1.5rem; text-align: center; }
.fazenda__mapa img {
  width: 100%;
  height: 190px;
  object-fit: contain;
}

/* Mapa e acao formam um unico link. O bloco todo e clicavel e o teclado
   recebe uma parada so, em vez de dois links para o mesmo destino. */
.fazenda__rota-link { display: block; text-decoration: none; color: inherit; }

/* Acao secundaria. Texto em Oliva Escuro com filete Dourado, nao texto dourado:
   o padrao dourado do site so aparece sobre fundo escuro e aqui, sobre o Bege
   Claro, ficaria em 2,2:1 de contraste. */
.fazenda__rota {
  display: inline-block;
  margin-top: .9rem;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oliva-escuro);
  text-decoration: none;
  border-bottom: 1px solid var(--dourado);
  padding-bottom: .2rem;
  transition: opacity .2s ease;
}
.fazenda__rota-link:hover .fazenda__rota,
.fazenda__rota-link:focus-visible .fazenda__rota { opacity: .7; }

/* ---------- 13. Video institucional ---------- */
/* aspect-ratio no lugar do truque do padding-bottom: menos codigo e o player
   acompanha a largura em qualquer tela, sem deformar. */
.video { max-width: 880px; margin: 2.5rem auto 0; }
.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* ---------- 14. Depoimento ---------- */
.depoimento { margin: 2.5rem 0 0; }
.depoimento blockquote { margin: 0; }
.depoimento p {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  line-height: 1.45;
  color: var(--verde-profundo);
  margin: 0;
}
.depoimento__autor {
  margin-top: 1.5rem;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oliva-escuro);
}

/* ---------- 14. Contato ---------- */
#contato .botao { margin-top: .5rem; }
.contato__secundario {
  margin-top: 2rem;
  font-size: .85rem;
  color: rgba(236, 229, 214, .85);
}
.contato__secundario span { color: var(--dourado); margin: 0 .45rem; }

/* ---------- 15. Rodapé ---------- */
.rodape {
  background: var(--verde-profundo);
  color: var(--bege-claro);
  border-top: 1px solid var(--dourado);
  padding: 2.5rem 0;
}
.rodape__interno { display: grid; gap: 1.5rem; align-items: center; }
.rodape__logo { height: 88px; width: auto; }
/* cor levemente suavizada no lugar de opacity, para não apagar o link dourado */
.rodape__dados p { margin: 0 0 .2rem; font-size: .8rem; color: rgba(236, 229, 214, .9); }

/* ---------- 16. WhatsApp flutuante ---------- */
.whatsapp-flutuante {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--verde-lacada);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(31, 31, 28, .28);
}
.whatsapp-flutuante svg { width: 28px; height: 28px; fill: #FFFFFF; }
.whatsapp-flutuante:hover { background: var(--oliva-escuro); }

/* =============================================================
   17. Telas maiores
   ============================================================= */
@media (min-width: 700px) {
  :root { --respiro-secao: 6.5rem; }

  .linha-tempo { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
  .duas-colunas { grid-template-columns: 5fr 6fr; gap: 3.5rem; align-items: center; }
  .pilares { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
  .fazendas { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .rodape__interno { grid-template-columns: auto 1fr; gap: 2.5rem; }
  .hero__acoes { gap: 1rem; }
}

@media (min-width: 960px) {
  :root {
    --margem: 4rem;
    --respiro-secao: 8rem;
    --logo-altura: 88px;
    --cabecalho-padding: 1.5rem;
  }

  .linha-tempo { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }

  .menu-botao { display: none; }
  .menu {
    display: flex;
    position: static;
    background: none;
    border: 0;
    padding: 0;
    gap: 2rem;
    align-items: center;
  }
  .menu a { padding: 0; font-size: .78rem; }
  .menu a:hover { color: var(--dourado); }

  .pilares { grid-template-columns: repeat(4, 1fr); gap: 2.75rem; }
  .hero__conteudo { padding-bottom: 5rem; }
  .galeria { gap: 1.75rem; }

  .whatsapp-flutuante { right: 1.75rem; bottom: 1.75rem; width: 58px; height: 58px; }

  .rodape__logo { height: 110px; }
}

/* Card da fazenda em duas colunas: informacoes a esquerda, mapa a direita.
   So a partir de 1100px. Os cards ja sao grid de duas colunas desde 700px, e
   dividir cada card cedo demais estrangula a coluna de texto: a 960px sobrariam
   ~180px para "Fazenda Lacada Lagoa Azul" em serifada, contra ~250px aqui.
   Abaixo deste ponto vale o empilhamento vertical, o mesmo do celular. */
@media (min-width: 1100px) {
  .fazenda {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 1.75rem;
    align-items: start;
  }
  /* a coluna do mapa se centraliza: como GO e TO tem larguras renderizadas
     diferentes, e o centro que deixa a acao no mesmo ponto nos dois cards */
  .fazenda__mapa { margin-top: 0; }
  .fazenda__mapa img { height: 165px; }
}