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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--gm-milho);
  color: var(--gm-tinta);
  font-family: var(--gm-fonte-corpo);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.55;
}

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

a {
  color: var(--gm-tinta);
  text-decoration-color: var(--gm-canto);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--gm-mata);
}

:focus-visible {
  outline: 2px solid var(--gm-canto);
  outline-offset: 3px;
}

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

.screen-reader-text:focus {
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--gm-mata);
  color: var(--gm-milho);
  border-radius: var(--gm-raio);
}

.gm-envoltorio {
  width: min(100% - 2rem, var(--gm-largura));
  margin-inline: auto;
}

h1,
h2,
.gm-display {
  font-family: var(--gm-fonte-display);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}

.gm-util {
  font-family: var(--gm-fonte-util);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.gm-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--gm-milho);
  border-bottom: 1px solid var(--gm-borda);
}

.gm-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--gm-header);
}

.gm-header__marca {
  margin: 0;
  font-family: var(--gm-fonte-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.gm-header__marca a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gm-tinta);
  text-decoration: none;
}

@media (min-width: 720px) {
  .gm-header__marca {
    font-size: 1.35rem;
  }
}

.gm-menu-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--gm-pena);
  border-radius: var(--gm-raio);
  background: var(--gm-milho);
  color: var(--gm-tinta);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
}

.gm-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
}

.gm-nav a {
  display: block;
  padding: 0.65rem 0;
  text-decoration: none;
  font-weight: 600;
}

.gm-nav a[aria-current="page"] {
  color: var(--gm-mata);
  box-shadow: inset 0 -2px 0 var(--gm-canto);
}

@media (max-width: 719px) {
  .gm-nav {
    display: none;
  }

  .gm-header.is-open .gm-nav {
    display: block;
  }
}

@media (min-width: 720px) {
  .gm-menu-botao {
    display: none;
  }

  .gm-nav ul {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 0;
  }

  .gm-nav a {
    padding: 0.35rem 0;
  }
}

.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--gm-raio);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.gm-btn--principal {
  background: var(--gm-canto);
  color: var(--gm-tinta);
}

.gm-btn--principal:hover {
  color: var(--gm-tinta);
  filter: brightness(0.96);
}

.gm-btn--secundario {
  border-color: var(--gm-borda);
  color: var(--gm-tinta);
  background: transparent;
}

.gm-btn--secundario:hover {
  border-color: var(--gm-mata);
}

/* O mesmo botão sobre fundo escuro. */
.gm-secao--mata .gm-btn--secundario {
  border-color: var(--gm-mata-texto);
  color: var(--gm-milho);
}

.gm-secao--mata .gm-btn--secundario:hover {
  color: var(--gm-canto);
  border-color: var(--gm-canto);
}

/* Sobre a foto do destaque: precisa de contorno visível em qualquer pixel. */
.gm-btn--claro {
  border-color: var(--gm-milho);
  color: var(--gm-milho);
  background: color-mix(in srgb, var(--gm-tinta) 35%, transparent);
  backdrop-filter: blur(2px);
}

.gm-btn--claro:hover {
  background: var(--gm-milho);
  color: var(--gm-tinta);
}

/*
 * Destaque.
 *
 * A ave é alta e a foto é 3:2. Se a caixa ficar mais larga que 3:2, o
 * object-fit corta em cima e embaixo, e some a cabeça e os pés. Por isso a
 * altura aqui nunca é fixa: ela acompanha a largura da tela, de modo que a
 * caixa da foto fique sempre mais estreita que 3:2. Corte só na horizontal,
 * que a foto suporta porque tem fundo escuro sobrando à esquerda.
 */

.gm-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(78vh, 40rem);
  padding: 6rem 0 2.5rem;
  background: var(--gm-mata);
  color: var(--gm-milho);
  overflow: hidden;
}

.gm-hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  margin: 0;
  /* Recorte da layer: o vídeo sobra 100px em cima e embaixo e some aqui. */
  overflow: hidden;
}

.gm-hero__foto img,
.gm-hero__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--gm-tinta);
}

/*
 * Recorte só na layer (o arquivo do vídeo não muda):
 * 100px do topo + 300px do rodapé (os 100 iniciais e mais 200).
 * translateY desce o quadro para a cabeça aparecer.
 */
.gm-hero__player {
  height: calc(100% + 400px);
  margin-top: -100px;
  object-position: 50% 32%;
  transform: translateY(15%);
}

/* Véu para o texto ter contraste sem escurecer a ave toda. */
.gm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--gm-tinta) 88%, transparent) 0%,
    color-mix(in srgb, var(--gm-tinta) 62%, transparent) 42%,
    color-mix(in srgb, var(--gm-tinta) 18%, transparent) 100%
  );
}

.gm-hero h1 {
  margin: 0 0 1rem;
  max-width: 18ch;
  text-shadow: 0 1px 24px color-mix(in srgb, var(--gm-tinta) 55%, transparent);
}

@media (min-width: 900px) {
  /* Texto à esquerda, ave à direita, cada um na sua metade. */
  .gm-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* 36vw mantém a metade da foto em 1,39:1, sempre abaixo de 1,5:1. */
    min-height: max(30rem, 36vw);
    /* O respiro vai no texto: a foto precisa encostar em cima e embaixo. */
    padding: 0;
  }

  .gm-hero__foto {
    position: relative;
    inset: auto;
    grid-area: 1 / 2;
    align-self: stretch;
    /* Sem recuo à direita: o vídeo ocupa e centra na metade do destaque. */
    margin-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gm-hero__foto img,
  .gm-hero__player {
    /*
     * Dissolve as duas bordas no fundo, para não virar retângulo colado.
     * Máscara mais simétrica, para o centro do vídeo ficar no meio da coluna.
     */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
  }

  .gm-hero__player {
    width: 100%;
    max-width: none;
    object-position: 50% 32%;
    transform: translateY(15%);
  }

  /* O véu é para o celular. Aqui o texto já está sobre o fundo escuro. */
  .gm-hero::after {
    display: none;
  }

  .gm-hero__texto {
    grid-area: 1 / 1;
    width: auto;
    max-width: none;
    margin-inline: 0;
    /* Alinha com o mesmo eixo do resto do site. */
    padding: 3rem 2rem 3rem max(1rem, calc((100vw - var(--gm-largura)) / 2));
  }

  .gm-hero__texto > * {
    max-width: 32rem;
  }
}

/*
 * A ave em movimento, logo depois do mapa.
 *
 * A cor vem de .gm-secao--mata, no escuro, que é onde o vídeo aparece melhor.
 * Quem segura o ritmo da home é a seção da raça, logo abaixo, no claro.
 */

.gm-ave__grade {
  display: grid;
  gap: 1.75rem;
}

.gm-ave__grade > * {
  min-width: 0;
}

/*
 * O vídeo à esquerda, o texto à direita.
 *
 * O vídeo encosta na borda do envoltório, alinhado com as outras seções da home.
 * O texto ocupa o resto: com a medida curta que havia antes, sobrava uma faixa
 * escura vazia de uns 300px à direita, em monitor largo.
 */
@media (min-width: 860px) {
  .gm-ave__grade {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    align-items: center;
    column-gap: 3.25rem;
  }
}

.gm-ave__video {
  margin: 0;
}

.gm-ave__player {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: var(--gm-raio);
  background: var(--gm-tinta);
}

.gm-ave__video figcaption {
  margin-top: 0.55rem;
  max-width: 24rem;
  font-family: var(--gm-fonte-util);
  font-size: 0.72rem;
  color: var(--gm-mata-texto);
}

/* Duas linhas no título, em vez de três estreitas. */
.gm-ave__texto h2 {
  margin: 0 0 0.85rem;
  max-width: 30ch;
}

/* Medida larga, mas dentro do limite de leitura, para fechar o vão da direita. */
.gm-ave__texto p {
  max-width: 66ch;
  color: var(--gm-mata-texto);
}

.gm-ave__texto p:last-child {
  margin-bottom: 0;
}

.gm-secao--mapa {
  padding-bottom: 2rem;
}

.gm-mapa-home {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.gm-mapa-home > * {
  min-width: 0;
}

/* Mapa e lista lado a lado: enquadra o Brasil sem sobra de oceano. */
@media (min-width: 900px) {
  .gm-mapa-home {
    grid-template-columns: minmax(0, 1.25fr) 21rem;
    gap: 2rem;
  }
}

.gm-mapa-home .gm-mapa {
  height: min(60vh, 32rem);
  border: 1px solid var(--gm-borda);
  border-radius: var(--gm-raio);
}

.gm-destaques__titulo {
  margin: 0 0 0.6rem;
  font-family: var(--gm-fonte-util);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gm-pena);
}

.gm-sitio-card--link {
  text-decoration: none;
  color: inherit;
}

.gm-hero p {
  max-width: 38rem;
  margin: 0 0 1.5rem;
  color: var(--gm-mata-texto);
  font-size: 1.125rem;
}

.gm-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Respiro que cresce com a tela: 3rem no celular, até 4.75rem no monitor. */
.gm-secao {
  padding: clamp(3rem, 4.5vw, 4.75rem) 0;
}

.gm-secao--mata {
  background: var(--gm-mata);
  color: var(--gm-milho);
}

/* Papel um tom acima do fundo do site, para separar de quem vem depois. */
.gm-secao--papel {
  background: var(--gm-milho-carta);
  border-bottom: 1px solid var(--gm-borda);
}

/*
 * A coluna da raça é mais curta que a do sítio, que carrega a homenagem do
 * Dr. Fausto. Sem alinhar o pé, o botão ficava no ar e sobrava um vão embaixo
 * dele, desencontrado do vizinho. Agora as duas colunas terminam na mesma linha.
 */
@media (min-width: 800px) {
  .gm-secao--papel .gm-grade--2 {
    align-items: stretch;
  }

  .gm-secao--papel .gm-grade--2 > div {
    display: flex;
    flex-direction: column;
  }

  /* Só casa na coluna da raça: na do sítio, quem fecha é a figura da homenagem. */
  .gm-secao--papel .gm-grade--2 > div > p:last-child {
    margin-top: auto;
    margin-bottom: 0;
  }
}

/* Retrato ao lado do nome e das datas, com um fio dourado marcando a homenagem. */
.gm-homenagem {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--gm-canto);
}

.gm-homenagem picture {
  flex: none;
}

.gm-homenagem img {
  display: block;
  width: 7.5rem;
  height: auto;
  border-radius: var(--gm-raio);
}

.gm-homenagem figcaption {
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
  color: var(--gm-pena);
}

.gm-homenagem strong {
  font-family: var(--gm-fonte-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gm-tinta);
}

.gm-homenagem__datas {
  font-family: var(--gm-fonte-util);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

@media (min-width: 800px) {
  .gm-homenagem img {
    width: 9rem;
  }
}

/* Evita título com uma palavra sozinha na última linha. */
.gm-secao h2 {
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.gm-secao__olho {
  margin: 0 0 1.25rem;
  color: var(--gm-pena);
  font-family: var(--gm-fonte-util);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.gm-secao--mata .gm-secao__olho {
  color: var(--gm-canto);
}

.gm-grade {
  display: grid;
  gap: 1.25rem;
}

.gm-grade > * {
  min-width: 0;
}

#diretorio .gm-grade {
  margin-top: 1.5rem;
}

@media (min-width: 800px) {
  .gm-grade--2 {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.gm-card {
  padding: 1.15rem;
  border: 1px solid var(--gm-borda);
  border-radius: var(--gm-raio);
  background: var(--gm-milho-carta);
}

.gm-card:hover {
  border-color: var(--gm-canto);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .gm-card:hover {
    transform: none;
  }
}

.gm-card h3 {
  margin: 0.35rem 0 0.25rem;
  font-family: var(--gm-fonte-display);
  font-size: 1.35rem;
}

/* Confiança, não alerta: o vermelho da crista fica reservado para erros. */
.gm-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--gm-canto);
  border-radius: 999px;
  color: var(--gm-canto);
  font-family: var(--gm-fonte-util);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gm-selo::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
}

.gm-vazio {
  padding: 1.15rem;
  border: 1px dashed var(--gm-pena);
  border-radius: var(--gm-raio);
}

.gm-banner-slot {
  min-height: 5.5rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed var(--gm-pena);
  border-radius: var(--gm-raio);
  color: var(--gm-pena);
  text-align: center;
}

/* A marca: silhueta do galo. Herda a cor de quem a contém. */

.gm-galo {
  display: block;
  width: auto;
  height: 1em;
  flex: none;
  fill: currentColor;
}

.gm-galo--marca {
  height: 2.2rem;
  color: var(--gm-mata);
}

.gm-galo--rodape {
  height: 2.1rem;
  color: var(--gm-canto);
}

.gm-galo--historia {
  width: 100%;
  height: auto;
  max-height: 9rem;
  color: var(--gm-canto);
  opacity: 0.9;
  justify-self: end;
}

.gm-lista-simples {
  display: grid;
  gap: 0.85rem;
}

.gm-lista-simples article {
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--gm-borda);
}

.gm-lista-simples h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

/* Escuro para fechar a página, do mesmo verde do topo. */
.gm-footer {
  padding: 3rem 0 5.5rem;
  background: var(--gm-mata);
  color: var(--gm-mata-texto);
}

.gm-footer__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  color: var(--gm-milho);
  font-family: var(--gm-fonte-display);
  font-size: 1.15rem;
  font-weight: 600;
}

.gm-pagina {
  padding: 2.5rem 0 4rem;
}

.gm-pagina .gm-envoltorio {
  max-width: 42rem;
}

.gm-whatsapp {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.45rem 0.85rem 0.45rem 0.55rem;
  border-radius: 999px;
  background: var(--gm-mata);
  color: var(--gm-milho);
  text-decoration: none;
  box-shadow: none;
}

.gm-whatsapp:hover {
  color: var(--gm-canto);
}

.gm-whatsapp__icone {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--gm-canto);
  color: var(--gm-tinta);
}

@media (max-width: 479px) {
  .gm-whatsapp__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .gm-whatsapp {
    padding: 0.45rem;
  }
}