/*
 * Cabeçalho, rodapé e utilitários.
 *
 * Separado do style.css porque aquele guarda os tokens e o estilo base, e este
 * guarda estrutura. Assim mexer no layout não arrisca a paleta.
 */

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */

.fm-envelope {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--fm-margem-lateral);
}

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

/* O atalho fica fora da tela até receber foco: quem navega por teclado pula a
   navegação inteira, quem usa mouse nunca o vê. */
.fm-pular {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--fm-space-sm) var(--fm-space-md);
  background: var(--fm-primary);
  color: var(--fm-on-primary);
  text-decoration: none;
}

.fm-pular:focus {
  left: var(--fm-margem-lateral);
  top: var(--fm-space-sm);
}

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.fm-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fm-space-xs);
  min-height: 44px;
  padding: 10px var(--fm-space-lg);
  font-family: var(--fm-font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--fm-primary);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fm-botao-primario {
  background: var(--fm-primary);
  color: var(--fm-on-primary);
}

.fm-botao-primario:hover {
  background: transparent;
  color: var(--fm-primary);
}

.fm-botao-fantasma {
  background: transparent;
  color: var(--fm-on-surface);
  border-color: var(--fm-outline-variant);
}

.fm-botao-fantasma:hover {
  border-color: var(--fm-on-surface);
}

/* --------------------------------------------------------------------------
   Marca
   -------------------------------------------------------------------------- */

.fm-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--fm-space-sm);
  color: var(--fm-on-surface);
  text-decoration: none;
  flex: none;
}

.fm-marca-simbolo {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--fm-on-surface);
  font-family: var(--fm-font-display);
  font-size: 0.9rem;
  line-height: 1;
}

.fm-marca-nome {
  font-family: var(--fm-font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.fm-cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fm-surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.fm-cabecalho[data-compacto] {
  border-bottom-color: var(--fm-outline-variant);
}

.fm-cabecalho-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fm-space-lg);
  padding-block: var(--fm-space-md);
}

.fm-nav-lista {
  display: flex;
  gap: var(--fm-space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fm-nav-lista a {
  display: inline-flex;
  align-items: center;
  font-family: var(--fm-font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  color: var(--fm-on-surface-variant);
  text-decoration: none;
  padding-block: 12px;
  transition: color 0.15s ease;
}

.fm-nav-lista a:hover,
.fm-nav-lista .current-menu-item > a {
  color: var(--fm-on-surface);
}

/* A página corrente muda de cor E ganha marca: informação nunca depende só de
   cor, porque nem todo mundo a distingue. */
.fm-nav-lista .current-menu-item > a::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-left: 8px;
  background: var(--fm-primary);
}

.fm-cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: var(--fm-space-sm);
  flex: none;
}

.fm-menu-botao {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  background: transparent;
  border: 1px solid var(--fm-outline-variant);
  color: var(--fm-on-surface);
  font-size: 1rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Painel móvel
   -------------------------------------------------------------------------- */

.fm-painel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--fm-surface);
  display: grid;
  place-items: center;
}

/* `display` explícito vence o `hidden` nativo do HTML, e o painel ficaria
   sempre aberto. */
.fm-painel[hidden] {
  display: none;
}

.fm-painel-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fm-space-lg);
}

.fm-painel-lista a {
  font-family: var(--fm-font-display);
  font-size: 1.75rem;
  color: var(--fm-on-surface);
  text-decoration: none;
  display: block;
  min-height: 44px;
}

.fm-painel-fechar {
  position: absolute;
  top: var(--fm-space-md);
  right: var(--fm-margem-lateral);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--fm-outline-variant);
  color: var(--fm-on-surface);
  font-size: 1.25rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Corpo da página
   -------------------------------------------------------------------------- */

/*
 * O Hello reserva altura mínima para o conteúdo, o que deixa um vão morto
 * depois do rodapé em páginas curtas. O grid empurra o rodapé para baixo sem
 * inventar altura.
 *
 * Grid, e não flex: `position: sticky` do cabeçalho não funciona dentro de um
 * container flex em coluna, porque o item passa a ser dimensionado pelo eixo
 * do flex. O sintoma era o cabeçalho aparecendo no meio da página.
 */
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
}

/* Páginas montadas no Elementor trazem o próprio envelope; as demais precisam
   de margem lateral para o texto não colar na borda. */
.fm-conteudo > .entry-content:not(.elementor) {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--fm-margem-lateral);
  padding-block: var(--fm-space-xl);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.fm-rodape {
  margin-top: var(--fm-space-2xl);
  border-top: 1px solid var(--fm-outline-variant);
  background: var(--fm-surface-container);
}

.fm-rodape-interno {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--fm-space-xl);
  padding-block: var(--fm-space-2xl) var(--fm-space-xl);
}

.fm-rodape-frase {
  margin-top: var(--fm-space-md);
  max-width: 34ch;
  color: var(--fm-on-surface-variant);
  font-size: 0.9rem;
}

.fm-rodape-lista {
  list-style: none;
  margin: var(--fm-space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--fm-space-xs);
}

.fm-rodape-lista a {
  color: var(--fm-on-surface-variant);
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.fm-rodape-lista a:hover {
  color: var(--fm-on-surface);
  text-decoration: underline;
}

.fm-rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fm-space-md);
  padding-block: var(--fm-space-md);
  border-top: 1px solid var(--fm-outline-variant);
  font-family: var(--fm-font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  color: var(--fm-on-surface-variant);
}

.fm-rodape-base a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Telas estreitas
   -------------------------------------------------------------------------- */

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

  .fm-menu-botao {
    display: grid;
  }

  .fm-cabecalho-cta {
    display: none;
  }
}

@media (max-width: 767px) {
  .fm-rodape-interno {
    grid-template-columns: 1fr;
    gap: var(--fm-space-lg);
  }
}

/* --------------------------------------------------------------------------
   Blocos de conteúdo

   Classes usadas pelo conteúdo das páginas. Ficam aqui, e não em CSS embutido
   na página, para que o visual seja consistente e editável num lugar só.
   -------------------------------------------------------------------------- */

.fm-hero {
  padding-block: var(--fm-space-2xl);
}

.fm-hero-titulo {
  font-size: clamp(2rem, 4vw, 3.4rem);
  max-width: 22ch;
  margin-block: var(--fm-space-lg) var(--fm-space-lg);
}

.fm-hero-titulo em {
  font-style: italic;
}

.fm-hero-texto {
  font-size: 1.1rem;
  max-width: 60ch;
  color: var(--fm-on-surface-variant);
}

.fm-hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fm-space-md);
  margin-top: var(--fm-space-lg);
  max-width: none;
}

/* Prova numérica: três colunas iguais, para a linha não ficar órfã à esquerda. */
.fm-numeros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fm-space-lg);
  margin-top: var(--fm-space-2xl);
  padding-top: var(--fm-space-lg);
  border-top: 1px solid var(--fm-outline-variant);
}

.fm-numeros > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
}

.fm-numeros dt {
  font-family: var(--fm-font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  color: var(--fm-on-surface-variant);
}

.fm-numeros dd {
  margin: 0;
  font-family: var(--fm-font-display);
  font-size: 2.6rem;
  line-height: 1;
}

.fm-bloco {
  padding-block: var(--fm-space-xl);
}

.fm-bloco h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 22ch;
  margin-block: var(--fm-space-sm) var(--fm-space-md);
}

.fm-bloco h2 em {
  font-style: italic;
}

.fm-texto-guia {
  font-size: 1.05rem;
  color: var(--fm-on-surface-variant);
  margin-bottom: var(--fm-space-lg);
}

/* Grades: a linha de 1px entre células é o separador do site em Astro,
   feita com `gap` sobre fundo, e não com borda por célula. */
.fm-grade-3,
.fm-grade-2 {
  display: grid;
  gap: 1px;
  background: var(--fm-outline-variant);
  border: 1px solid var(--fm-outline-variant);
  margin-top: var(--fm-space-lg);
}

.fm-grade-3 {
  grid-template-columns: repeat(3, 1fr);
}

.fm-grade-2 {
  grid-template-columns: repeat(2, 1fr);
}

.fm-cartao,
.fm-servico {
  background: var(--fm-surface);
  padding: var(--fm-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--fm-space-sm);
}

.fm-cartao h3,
.fm-servico h3 {
  font-size: 1.25rem;
}

.fm-cartao p,
.fm-servico p,
.fm-cartao li,
.fm-servico li {
  max-width: none;
  font-size: 0.95rem;
}

/* O texto do herói e os guias também não devem herdar limite de caractere:
   a própria coluna define a medida. */
.fm-hero p,
.fm-texto-guia,
.fm-citacao,
.fm-fontes {
  max-width: none;
}

.fm-hero-texto {
  max-width: 62ch;
}

.fm-texto-guia {
  max-width: 72ch;
}

/* `margin-top: auto` empurra a nota para o rodapé do cartão, de modo que a
   linha fique alinhada entre cartões de alturas diferentes. */
.fm-cartao-nota {
  margin-top: auto;
  padding-top: var(--fm-space-sm);
  border-top: 1px solid var(--fm-outline-variant);
  font-family: var(--fm-font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  color: var(--fm-on-surface-variant);
}

@media (max-width: 900px) {
  .fm-grade-3,
  .fm-grade-2 {
    grid-template-columns: 1fr;
  }

  .fm-numeros {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fm-numeros > div {
    flex-direction: row;
    align-items: baseline;
    gap: var(--fm-space-md);
    padding-block: var(--fm-space-sm);
    border-bottom: 1px solid var(--fm-outline-variant);
  }

  .fm-numeros dd {
    order: -1;
    min-width: 3rem;
    font-size: 2rem;
  }
}

/* O título da página é dado pelo próprio conteúdo (o h1 do bloco), então o
   cabeçalho automático do Hello duplicaria a informação. */
.fm-conteudo .page-header,
.fm-conteudo .entry-header,
.fm-conteudo > .entry-title {
  display: none;
}

/* --------------------------------------------------------------------------
   Blocos de argumento
   -------------------------------------------------------------------------- */

.fm-destaque {
  font-family: var(--fm-font-display);
  font-size: 2.4rem;
  line-height: 1;
  margin-block: var(--fm-space-xs) var(--fm-space-sm);
}

.fm-citacao {
  margin: var(--fm-space-lg) 0;
  padding-left: var(--fm-space-lg);
  border-left: 2px solid var(--fm-primary);
  font-family: var(--fm-font-display);
  font-size: 1.15rem;
  line-height: var(--fm-leading-body);
  max-width: 60ch;
}

/* As fontes ficam visíveis, e não atrás de um "saiba mais": é o que separa
   este conteúdo de material de venda com número sem origem. */
.fm-fontes {
  font-size: 0.8rem;
  color: var(--fm-on-surface-variant);
  padding-top: var(--fm-space-sm);
  border-top: 1px solid var(--fm-outline-variant);
}

.fm-pergunta {
  border-bottom: 1px solid var(--fm-outline-variant);
  padding-block: var(--fm-space-sm);
}

.fm-pergunta summary {
  font-family: var(--fm-font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--fm-on-surface);
}

.fm-pergunta p {
  padding-top: var(--fm-space-xs);
  color: var(--fm-on-surface-variant);
}

.fm-cartao ul {
  margin: var(--fm-space-xs) 0 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--fm-on-surface-variant);
}

/* --------------------------------------------------------------------------
   Malha

   A grade de 1px que amarra o site e o faz ler como prancha técnica, e não
   como página comum. Fica no corpo inteiro, atrás de tudo.
   -------------------------------------------------------------------------- */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--fm-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fm-grid-line) 1px, transparent 1px);
  background-size: var(--fm-grid) var(--fm-grid);
  /* Discreta de propósito: a grade estrutura, não compete com o texto. */
  opacity: 0.4;
}

/* O conteúdo sobe acima da malha. Sem isto o texto ficaria atrás dela. */
.fm-cabecalho,
.fm-conteudo,
.fm-rodape,
.fm-painel {
  position: relative;
  z-index: 1;
}

/*
 * Respiro sob o texto: um halo da cor do papel que apaga a grade ao redor das
 * letras. Uma linha de 1px cruzando o meio de uma palavra cria ruído de
 * leitura — o olho tenta separar o traço da letra e cansa.
 *
 * `box-decoration-break` faz o halo acompanhar cada linha do parágrafo, em vez
 * de desenhar um retângulo em volta do bloco inteiro.
 */
.fm-hero-titulo,
.fm-hero-texto,
.fm-bloco > h2,
.fm-texto-guia,
.fm-numeros dd {
  box-shadow: 0 0 12px 6px var(--fm-surface);
  background: var(--fm-surface);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   Alternador de tema
   -------------------------------------------------------------------------- */

.fm-tema-botao {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--fm-outline-variant);
  color: var(--fm-on-surface);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.fm-tema-botao:hover {
  background: var(--fm-surface-container);
}

/* --------------------------------------------------------------------------
   Botão flutuante de WhatsApp
   -------------------------------------------------------------------------- */

.fm-zap {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--fm-space-sm);
  min-height: 52px;
  padding: 0 var(--fm-space-lg);
  background: #25d366;
  color: #06331a;
  font-family: var(--fm-font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--fm-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid #06331a;
  box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
  transition: transform 0.15s ease;
}

.fm-zap:hover {
  transform: translateY(-2px);
  color: #06331a;
}

.fm-zap svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* Em tela estreita fica só o símbolo: o rótulo cobriria conteúdo. */
@media (max-width: 600px) {
  .fm-zap {
    padding: 0;
    width: 52px;
    justify-content: center;
  }

  .fm-zap-texto {
    display: none;
  }
}