/* Estilos das páginas internas (serviços, sobre, blog, políticas).
   A home continua no arquivo .dc.html com estilos inline; estas páginas são
   HTML estático simples, para carregarem rápido e serem lidas pelo Google
   sem depender de JavaScript. */

/* ---------- Fontes ----------
   Hospedadas aqui, e nao no fonts.googleapis.com. Duas razoes: o endereco IP
   de cada visitante deixava de ir para o Google a cada pagina aberta (ponto
   de LGPD), e o navegador deixa de abrir conexao com um dominio externo antes
   de conseguir desenhar o texto.
   Geist e Geist Mono estao sob SIL Open Font License, que permite hospedagem
   propria. Sao fontes variaveis: um arquivo cobre todos os pesos. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream: #FAF6F1;
  --sand: #EFE4D6;
  --line: #E9DECE;
  --ink: #2A2723;
  --ink-soft: #4A453D;
  --ink-mute: #766F68;
  --brand: #B15C34;
  --brand-dark: #8F4526;
  --dark: #1F1D1A;
  --dark-2: #2A2723;
  --dark-text: #958F84;
  --dark-title: #C9C2B6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--brand-dark); text-decoration: none; }
a:hover { color: var(--brand); }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ---------- Cabeçalho ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 12px; padding-bottom: 12px;
}
.site-header img { height: 56px; width: auto; object-fit: contain; display: block; }
.site-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.site-nav a { color: var(--ink-soft); font-weight: 600; font-size: 15px; }
.site-nav a { transition: color .2s ease; }
.site-nav a:hover, .site-footer a:hover {
  color: var(--brand);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.site-footer a { transition: color .2s ease; }

/* ---------- Botões (mesmo componente da home) ---------- */
.fmm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; user-select: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .12s ease;
}
.fmm-btn svg { flex: none; transition: transform .25s ease; }
.fmm-btn:active { transform: translateY(1px); }
.fmm-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fmm-btn-primary { background: var(--brand); color: #FFF; border-color: var(--brand); }
.fmm-btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #FFF; }
.fmm-btn-primary:hover svg { transform: translateX(3px); }
.fmm-btn-outline { background: var(--cream); color: var(--ink); border-color: #D9C7B2; }
.fmm-btn-outline:hover { background: var(--sand); color: var(--brand-dark); border-color: var(--brand-dark); }
.fmm-btn-sm { padding: 10px 18px; font-size: 13.5px; gap: 8px; }

/* ---------- Conteúdo ---------- */
.page { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.eyebrow, .post-cat, .crumb {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 500; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-dark);
}
.eyebrow { margin-bottom: 16px; }
.crumb { text-transform: none; letter-spacing: .04em; color: var(--ink-mute); }
.byline { font-variant-numeric: tabular-nums; }
h1 {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; margin: 0 0 18px;
  letter-spacing: -0.01em; text-wrap: pretty;
}
h2 {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px); margin: 40px 0 14px;
  letter-spacing: -0.008em;
}
/* Subtítulo dentro de uma seção. Fica antes das regras de .faq e .article,
   que têm o próprio tratamento e precisam continuar vencendo esta. */
.page h3 {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: 17.5px; color: var(--ink); margin: 28px 0 8px; letter-spacing: -0.005em;
}
.lead { font-size: 17.5px; line-height: 1.65; color: var(--ink-soft); max-width: 640px; text-wrap: pretty; }
.prose { max-width: 640px; }
.prose p { color: var(--ink-soft); margin: 0 0 14px; text-wrap: pretty; }
.prose ul { color: var(--ink-soft); padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 8px; }
.note {
  background: var(--sand); border-radius: 10px; padding: 18px 20px;
  font-size: 14.5px; color: #6B4327; max-width: 640px; margin: 28px 0 0;
}
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 32px 0 0; }

/* ---------- Fala da engenheira (Quem Somos) ----------
   O resto da página está em terceira pessoa, o que soa institucional. Este é o
   único bloco em que ela fala direto com quem lê, e o fundo diferente marca
   essa troca de voz. */
.fala {
  margin: 32px 0 0; max-width: 760px;
  background: var(--sand); border-radius: 10px; padding: 32px 34px;
  display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: stretch;
}
/* Foto e assinatura formam uma unidade. Antes o nome ficava embaixo do texto,
   na outra coluna, longe do rosto a que pertence.
   A foto alinha pelo topo com a primeira linha da citação, e o nome desce
   para a base da coluna, alinhando com a última. Assim as duas colunas
   fecham nas duas pontas, em vez de sobrar um vazio de um lado só. */
.fala-pessoa { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.fala-pessoa img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  display: block; border-radius: 10px;
}
.fala figcaption {
  margin-top: 14px; font-size: 14.5px; font-weight: 600;
  color: var(--ink); line-height: 1.35; text-align: center;
}
.fala figcaption span {
  display: block; margin-top: 3px;
  font-weight: 500; font-size: 13.5px; color: var(--brand-dark);
}
/* Tom de citação sem trocar a família de fonte: o site inteiro roda em Geist,
   e uma terceira família só aqui quebraria o sistema tipográfico. O itálico e
   as aspas dão o tom, no mesmo corpo do texto do restante da página. */
.fala blockquote { margin: 0; }
.fala blockquote p {
  margin: 0 0 14px; font-size: 16px; line-height: 1.7;
  font-style: italic; color: var(--ink); text-wrap: pretty;
}
.fala blockquote p:first-child::before { content: "\201C"; }
.fala blockquote p:last-child::after { content: "\201D"; }
.fala blockquote p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  /* Em coluna única, foto e nome viram um cabeçalho de atribuição, lado a
     lado, e o texto ocupa a largura inteira embaixo. */
  .fala { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; }
  /* Volta para linha: a regra de coluna vale só no arranjo de duas colunas. */
  .fala-pessoa { flex-direction: row; align-items: center; justify-content: flex-start; height: auto; gap: 16px; }
  .fala-pessoa img { width: 92px; flex: none; }
  /* Lado a lado, o nome alinha pela esquerda junto da foto, e não centrado. */
  .fala figcaption { margin-top: 0; text-align: left; }
}

/* ---------- Trajetória (Quem Somos) ----------
   Três momentos lado a lado. As fotos originais têm proporções diferentes e
   já vêm recortadas em 4:3, então a moldura mantém a fileira alinhada. */
.trajetoria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.trajetoria figure { margin: 0; }
.trajetoria img {
  /* height:auto é necessário: os atributos width/height do HTML valem como
     dica de apresentação e fixariam a altura em 570px, anulando a proporção. */
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--sand);
}
.trajetoria figcaption { margin-top: 12px; }
.trajetoria .ano {
  display: block; font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 500; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-dark); margin-bottom: 5px;
}
.trajetoria figcaption p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 820px) {
  .trajetoria { grid-template-columns: 1fr; gap: 28px; max-width: 460px; }
}

/* ---------- Situações reconhecíveis (lista de sinais) ---------- */
.signals { list-style: none; padding: 0; margin: 0; max-width: 720px; }
.signals li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  color: var(--ink-soft); line-height: 1.55;
}
.signals li::before {
  content: ""; position: absolute; left: 8px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}

/* ---------- Etapas do método (a ordem carrega informação) ---------- */
.steps { list-style: none; counter-reset: etapa; padding: 0; margin: 0; max-width: 720px; }
.steps li {
  counter-increment: etapa; position: relative;
  padding: 0 0 22px 52px; border-left: 1px solid var(--line); margin-left: 15px;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(etapa, decimal-leading-zero);
  position: absolute; left: -15px; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sand); color: var(--brand-dark);
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.steps strong {
  display: block; font-family: 'Geist', system-ui, sans-serif;
  font-size: 16.5px; color: var(--ink); margin-bottom: 4px;
}
.steps span { color: var(--ink-soft); line-height: 1.55; }

/* ---------- Entregável ---------- */
.deliverable {
  background: #FFF; border: 1px solid var(--sand); border-radius: 10px;
  padding: 26px 28px; max-width: 720px;
}
.deliverable ul { list-style: none; padding: 0; margin: 0; }
.deliverable li {
  position: relative; padding-left: 28px; margin-bottom: 10px;
  color: var(--ink-soft); line-height: 1.55;
}
.deliverable li::before {
  content: ""; position: absolute; left: 4px; top: 7px;
  width: 11px; height: 6px; border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand); transform: rotate(-45deg);
}

/* ---------- Perguntas frequentes ---------- */
.faq { max-width: 720px; }
.faq h3 {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: 16.5px; color: var(--ink); margin: 24px 0 6px;
}
.faq p { color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* ---------- Artigos ---------- */
.crumb { font-size: 13.5px; color: var(--ink-mute); margin: 0 0 12px; }
.byline {
  font-size: 13.5px; color: var(--ink-mute); margin: 0 0 8px;
  padding-bottom: 26px; border-bottom: 1px solid var(--line); max-width: 720px;
}
.article { margin-top: 30px; }
.article h2 { margin: 38px 0 12px; }
.article h3 {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: 18px; color: var(--ink); margin: 28px 0 8px;
}
.article p { margin: 0 0 15px; }
.article .signals { margin: 18px 0 24px; }
.article em { color: var(--ink); font-style: italic; }

/* ---------- Índice do blog ---------- */
.posts { display: grid; gap: 14px; margin-top: 28px; max-width: 820px; }
.post {
  background: #FFF; border: 1px solid var(--sand); border-radius: 10px;
  padding: 24px 26px; display: block; transition: border-color .2s ease;
}
.post:hover { border-color: var(--brand); }
.post-cat { display: block; }
.post strong {
  display: block; font-family: 'Geist', system-ui, sans-serif; font-weight: 600;
  font-size: 19px; color: var(--ink); margin: 8px 0 8px; line-height: 1.3;
}
.post-resumo { display: block; color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.post-mais { display: block; margin-top: 14px; color: var(--brand-dark); font-weight: 700; font-size: 14px; }

/* ---------- Regiões ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tags span {
  background: var(--sand); color: #6B4327; font-weight: 600;
  font-size: 13.5px; padding: 7px 14px; border-radius: 6px;
}

/* ---------- Outros serviços ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.card {
  background: #FFF; border: 1px solid var(--sand); border-radius: 10px;
  padding: 22px; display: flex; align-items: center; gap: 14px;
  transition: border-color .2s ease;
}
.card:hover { border-color: var(--brand); }
.card-icone {
  flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--sand);
  display: flex; align-items: center; justify-content: center;
}
.card strong {
  font-family: 'Geist', system-ui, sans-serif; font-weight: 600; font-size: 15.5px;
  color: var(--ink); line-height: 1.35;
}
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Rodapé ---------- */
/* A folga inferior maior existe por causa do botão flutuante do WhatsApp, que
   é fixo no canto inferior direito: com os 26px originais ele cobria o link
   "Termos de Uso" da última linha. */
.site-footer { background: var(--dark); padding: 48px 0 84px; margin-top: 40px; }
.site-footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.site-footer img { height: 44px; width: auto; display: block; margin-bottom: 14px; }
.site-footer p, .site-footer a, .site-footer span { color: var(--dark-text); font-size: 14px; }
.site-footer .col-title {
  color: var(--dark-title); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px;
}
.site-footer .list { display: flex; flex-direction: column; gap: 10px; }
.site-footer .bottom {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid #33302B;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: #8B867C;
}
.site-footer .bottom a { font-size: 12.5px; color: #8B867C; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px;
  border-radius: 50%; background: #25D366; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 60;
}

/* ---------- Perguntas frequentes recolhíveis ----------
   A lista inteira aberta empurrava a chamada final para longe no celular.
   O texto continua no HTML, apenas fechado por padrão. */
.faq-item { border-bottom: 1px solid var(--sand); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 4px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; padding: 14px 0; flex: 1; }
.faq-item summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item > p { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.65; }
.faq-item summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ---------- Chamada no meio da página ----------
   Na página de serviço, a primeira chamada dentro do conteúdo só aparecia
   depois de cinco telas de rolagem no celular. */
.cta-inline {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; background: var(--sand); border-radius: 10px;
  padding: 24px 26px; margin: 32px 0;
}
.cta-inline > div > strong { display: block; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
/* Só o texto de apoio, não o rótulo dentro do botão: o seletor amplo
   sobrescrevia a cor branca do .fmm-btn-primary. */
.cta-inline > div > span { display: block; font-size: 14.5px; color: #6B4327; line-height: 1.55; max-width: 460px; }

/* Expectativa de retorno logo abaixo da chamada: reduz a hesitação de quem
   está a um toque de mandar mensagem. */
.retorno { font-size: 14px; color: var(--ink-mute); margin: 14px 0 0; }

/* ---------- Filtro do blog ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 4px; }
.chip {
  font-family: 'Geist', system-ui, sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); background: #FFF; border: 1px solid var(--sand);
  border-radius: 999px; padding: 9px 15px; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #FFF; }
.chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sem-resultado { color: var(--ink-soft); margin-top: 20px; }

/* O botão flutuante do WhatsApp é a chamada permanente em qualquer tela.
   A barra com duas ações no rodapé foi retirada: o contato por telefone
   atrapalha a rotina da engenheira, e a preferência é mensagem. */

/* ---------- Tablet e celular ---------- */
@media (max-width: 900px) {
  /* Cabeçalho numa linha só: o menu quebrava para uma terceira linha e a
     barra chegava a 88px. */
  .site-header .wrap { flex-wrap: nowrap; gap: 16px; padding-top: 6px; padding-bottom: 6px; }
  .site-header img { height: 44px; }
  .site-header .wrap > a:first-child { display: block; flex: none; padding: 4px 0; }
  .site-nav { order: 0; width: auto; flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 18px; }
  /* Tablet também é aparelho de toque: os links tinham 19px de altura. */
  .site-nav a { display: inline-block; padding: 13px 0; font-size: 14.5px; white-space: nowrap; }
  .site-header .fmm-btn { padding: 13px 18px; font-size: 13px; }

  /* Alvos de toque com os 44px mínimos, do tablet para baixo. */
  .site-footer .list a { display: inline-block; padding: 13px 0; }
  .site-footer .bottom a { display: inline-block; padding: 14px 0; }
  .crumb a { display: inline-block; padding: 11px 2px; }

  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  /* Cabeçalho compacto numa linha só, e por isso fixo: com o logo ao lado do
     menu e sem o item "Regiões", que sozinho estourava a largura, ele ocupa
     ~58px em vez dos 120px de duas linhas. */
  .site-header { position: sticky; top: 0; }
  .site-header .wrap { flex-wrap: nowrap; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
  /* O logo divide a barra com um texto de 15px: a 32px a escrita da marca
     ficava com uns 8px de altura e sumia. */
  .site-header img { height: 36px; }
  /* Logo e links com a mesma caixa de 46px, centrados na mesma linha.
     display:block evita o espaço fantasma que inline-block cria abaixo da
     imagem e que desalinhava a marca em relação ao menu. */
  .site-header .wrap > a:first-child { display: block; flex: none; padding: 5px 0; }
  .site-nav { order: 0; width: auto; flex: 1 1 auto; flex-wrap: nowrap; overflow: visible;
    justify-content: flex-end; gap: 16px; }
  .site-nav a { display: inline-block; padding: 13px 0; font-size: 15px; white-space: nowrap; }
  /* "Regiões" sai do menu no celular; continua acessível pelo rodapé. */
  .site-nav a[href="/#atuacao"] { display: none; }

  .post { padding: 22px 20px; }

  .site-footer .cols { grid-template-columns: 1fr; gap: 26px; }
  .site-footer .bottom { flex-direction: column; align-items: flex-start; }

  /* "Regiões Atendidas" não cabia na linha do menu e ficava cortado. */
  .nav-extra { display: none; }

  /* A chamada do cabeçalho sai: a barra fixa embaixo cumpre o mesmo papel
     e devolve uma linha inteira ao conteúdo. */
  .site-header .fmm-btn { display: none; }
  .site-header .wrap { padding-top: 8px; padding-bottom: 4px; }

  /* O botão flutuante fica sobre o canto do rodapé; abre espaço para ele. */
  .site-footer { padding-bottom: 76px; }

  .cta-inline { padding: 22px 20px; }
  .cta-inline .fmm-btn { width: 100%; justify-content: center; }

  /* Filtro, perguntas e migalhas também precisam de alvo confortável. */
  .chip { padding: 12px 16px; font-size: 14px; }
  .faq-item summary h3 { padding: 16px 0; }
  .crumb { margin-bottom: 4px; }
  .crumb a { display: inline-block; padding: 11px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .fmm-btn, .fmm-btn svg { transition: none; }
  .fmm-btn:hover, .fmm-btn:active { transform: none; }
}

/* Aparelhos de 320px (iPhone SE e similares): o logo mais os tres itens do
   menu nao cabiam na linha e empurravam a pagina 7px para o lado, criando
   rolagem horizontal em todas as paginas internas. */
@media (max-width: 380px) {
  .site-header img { height: 32px; }
  .site-nav { gap: 11px; }
  .site-nav a { font-size: 14px; }
}