/* ---------------------------------------------------------------------------
   Grupo Mouselle — camada própria sobre o HTML clonado.
   Só cores/raios da paleta do site (var(--kb-cN)) — nada de cores fixas novas,
   para o claro/escuro e a paleta do painel continuarem a mandar.
   --------------------------------------------------------------------------- */

:root {
  --gm-tinta: var(--kb-c4, #242424);
  --gm-verde: var(--kb-c3, #1c4b42);
  --gm-lima: var(--kb-c6, #b4e717);
  --gm-papel: var(--kb-c8, #fafaf7);
  --gm-branco: var(--kb-c7, #fff);
  --gm-mudo: var(--kb-c2, #616161);
  --gm-linha: color-mix(in srgb, var(--gm-tinta) 14%, transparent);
  --gm-raio: 20px;
  --gm-t: 200ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.gm-only-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* foco visível e coerente em tudo o que acrescentamos.
   Inclui :focus além de :focus-visible — as ligações do submenu só recebiam o
   contorno em navegação por teclado e ficavam sem indicação quando o foco lhes
   era dado por outra via. */
.gm-foco:focus,
.gm-foco:focus-visible,
.gm-q [data-framer-name^="Desktop/"]:focus,
.gm-q [data-framer-name^="Desktop/"]:focus-visible,
.gm-sub a:focus,
.gm-sub a:focus-visible,
.gm-mnav a:focus,
.gm-mnav a:focus-visible,
.gm-burger:focus,
.gm-burger:focus-visible,
.gm-wa:focus,
.gm-wa:focus-visible {
  outline: 2px solid var(--gm-verde);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------- */
/* 1. destaque do H1 do hero                                                    */
/* --------------------------------------------------------------------------- */

.gm-accent {
  color: var(--gm-lima);
  display: inline-block;
}

/* --------------------------------------------------------------------------- */
/* 1b. ONDE ESTOU — o item do menu da página actual                             */
/*                                                                              */
/* O template tinha o marcador `data-framer-page-link-current` no item ERRADO   */
/* (no "Quem Somos" mostrava o "Início", na inicial não mostrava nada) e, ainda  */
/* assim, ele não se via: o CSS do Framer só o estiliza dentro de texto rico, e  */
/* estes itens não são texto rico. Ou seja, o visitante nunca soube em que       */
/* página estava.                                                               */
/*                                                                              */
/* O marcador passou a ser calculado a partir do endereço da página (src/lib/    */
/* globais.ts). Falta dar-lhe corpo — e a peça certa já existia no template: o   */
/* `.framer-5lt6qe` é o tracinho que o Framer faria subir no hover, e que aqui   */
/* estava parado em `bottom:-10px`, fora da vista. Em vez de inventar um         */
/* destaque novo, usa-se o que o desenho original já previa.                     */
/* --------------------------------------------------------------------------- */

[data-framer-name="Navigation"] a[aria-current="page"] > .framer-5lt6qe {
  bottom: 4px;
  left: 50%;
  width: 16px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  opacity: 1;
}

/* O menu de telemóvel é uma lista, não uma barra: aqui o sinal certo é a cor   */
/* e um traço à esquerda, que é como se lê uma lista vertical.                  */
.gm-mnav > a[aria-current="page"],
.gm-mnav .gm-mnav-sub-int > a[aria-current="page"] {
  color: var(--gm-verde);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--gm-lima);
}

/* quem não quer movimento continua a ver o destaque: ele não depende de animação */
@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Navigation"] a[aria-current="page"] > .framer-5lt6qe {
    transition: none;
  }
}

/* Foco visível nos itens do menu principal. Faltava: quem navega por teclado
   percorria o menu sem ver onde estava. Aplica-se aos itens do template e aos
   que venham a ser acrescentados nas definições globais, porque o alvo é a
   barra e não uma classe de cada item. */
[data-framer-name="Navigation"] a:focus-visible {
  outline: 2px solid var(--gm-verde);
  outline-offset: 2px;
  border-radius: 50px;
}

/* --------------------------------------------------------------------------- */
/* 2. painel dos sectores no cabeçalho (≥1200px)                                */
/*                                                                              */
/* Cinco entradas numeradas em duas colunas, com ícone, nome e um descritor      */
/* curto. Quem manda abrir e fechar é o JS (`data-aberto`), para haver intenção  */
/* de rato, teclado e ARIA; sem JS fica o :hover como rede de segurança.         */
/* --------------------------------------------------------------------------- */

.gm-has-sub { position: relative; }

/* O painel vive dentro da pastilha branca do menu, que o template fecha com
   `overflow:clip` — e a barra e o "Inner" fazem o mesmo. Resultado: o painel
   abria mesmo (visível, opacidade 1, no sítio certo) mas ficava recortado à
   altura da pastilha, ou seja, invisível. Estas três caixas passam a deixar
   passar o que sai delas; os fundos arredondados de cada item já têm o seu
   próprio raio, por isso nada transborda. */
header.gm-cab,
header.gm-cab [data-framer-name="Inner"],
header.gm-cab [data-framer-name="Navigation"] {
  overflow: visible !important;
}

.gm-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  width: 720px;
  max-width: calc(100vw - 40px);
  padding: 10px;
  margin-top: 12px;
  background: var(--gm-branco);
  border: 1px solid var(--gm-linha);
  border-radius: 20px;
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--gm-branco) 60%, transparent) inset,
    0 26px 60px -30px rgba(0, 0, 0, 0.55),
    0 2px 8px -4px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--gm-t), transform var(--gm-t), visibility var(--gm-t);
  z-index: 60;
}

.gm-has-sub[data-aberto="1"] > .gm-sub,
html:not(.gm-js) .gm-has-sub:hover > .gm-sub,
html:not(.gm-js) .gm-has-sub:focus-within > .gm-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* corredor invisível: o rato desce do item para o painel sem o menu fechar */
.gm-sub::before {
  content: "";
  position: absolute;
  inset: -18px 0 auto 0;
  height: 20px;
}

.gm-sub-grelha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.gm-sub-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--gm-tinta);
  text-decoration: none;
  transition: background var(--gm-t);
}

/* a quinta entrada ocupa a linha toda: cinco em duas colunas não fecham */
.gm-sub-item:nth-child(5) { grid-column: 1 / -1; }

.gm-sub-item:hover { background: var(--gm-papel); }

.gm-sub-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gm-linha);
  border-radius: 12px;
  color: var(--gm-verde);
  transition: background var(--gm-t), border-color var(--gm-t), color var(--gm-t);
}

.gm-sub-icone { width: 20px; height: 20px; }

.gm-sub-item:hover .gm-sub-marca {
  background: var(--gm-verde);
  border-color: var(--gm-verde);
  color: var(--gm-lima);
}

.gm-sub-corpo { display: block; min-width: 0; }

.gm-sub-num {
  display: block;
  margin-bottom: 3px;
  color: var(--gm-mudo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gm-sub-nome {
  display: block;
  color: var(--gm-tinta);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* o descritor QUEBRA em vez de ser cortado com reticências: uma linha de apoio
   truncada não informa ninguém e faz o painel parecer apertado */
.gm-sub-desc {
  display: block;
  margin-top: 3px;
  color: var(--gm-mudo);
  font-size: 13px;
  line-height: 1.38;
  text-wrap: pretty;
  transition: transform var(--gm-t), color var(--gm-t);
}

.gm-sub-item:hover .gm-sub-desc {
  color: var(--gm-tinta);
  transform: translateX(2px);
}

.gm-sub-seta {
  width: 17px;
  height: 17px;
  color: var(--gm-mudo);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity var(--gm-t), transform var(--gm-t);
}

.gm-sub-item:hover .gm-sub-seta,
.gm-sub-item:focus-visible .gm-sub-seta,
.gm-sub-todos:hover .gm-sub-seta {
  opacity: 1;
  transform: none;
  color: var(--gm-verde);
}

/* faixa de fecho: ver tudo à esquerda, pedir proposta à direita */
.gm-sub-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 10px 6px 4px 14px;
  border-top: 1px solid var(--gm-linha);
}

.gm-sub-todos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gm-tinta);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--gm-t);
}

.gm-sub-todos:hover { color: var(--gm-verde); }

.gm-sub-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--gm-lima);
  border-radius: 50px;
  color: var(--gm-verde);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--gm-t), color var(--gm-t);
}

.gm-sub-cta:hover { background: var(--gm-verde); color: var(--gm-branco); }

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

/* --------------------------------------------------------------------------- */
/* 3. navegação de telemóvel (o clone não trazia menu nenhum abaixo de 810px)   */
/* --------------------------------------------------------------------------- */

.gm-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  background: var(--gm-branco);
  border: 1px solid var(--gm-linha);
  border-radius: 50px;
  cursor: pointer;
  color: var(--gm-tinta);
}

.gm-burger span {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform var(--gm-t), opacity var(--gm-t);
}

.gm-burger span::before,
.gm-burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform var(--gm-t);
}

.gm-burger span::before { top: -6px; }
.gm-burger span::after { top: 6px; }

.gm-burger[aria-expanded="true"] span { background: transparent; }
.gm-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.gm-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.gm-mnav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: none;
  max-height: 100dvh;
  padding: 84px 20px 28px;
  overflow-y: auto;
  background: var(--gm-branco);
  border-bottom: 1px solid var(--gm-linha);
}

.gm-mnav[data-aberto="1"] { display: block; }

.gm-mnav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 8px;
  color: var(--gm-tinta);
  font-size: 17px;
  text-decoration: none;
  border-bottom: 1px solid var(--gm-linha);
}

.gm-mnav a:last-child { border-bottom: 0; }

.gm-mnav .gm-mnav-tit {
  padding: 20px 8px 6px;
  color: var(--gm-mudo);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-mnav .gm-mnav-cta {
  justify-content: center;
  margin-top: 18px;
  background: var(--gm-lima);
  border: 0;
  border-radius: 50px;
  color: var(--gm-verde);
  font-weight: 600;
}

/* "Sectores" em acordeão: mesma fonte de conteúdo do painel de desktop, sem
   hover nenhum (no telemóvel não existe) e com altura animada por mola. */
.gm-mnav-grupo { border-bottom: 1px solid var(--gm-linha); }

.gm-mnav-abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 8px;
  background: none;
  border: 0;
  color: var(--gm-tinta);
  font: inherit;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}

.gm-mnav-abrir svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--gm-mudo);
  transition: transform var(--gm-t), color var(--gm-t);
}

.gm-mnav-abrir[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: var(--gm-verde);
}

.gm-mnav-sub {
  height: 0;
  overflow: hidden;
}

/* fio à esquerda: dá a ler que os cinco sectores pendem do item "Sectores" */
.gm-mnav-sub-int {
  padding: 2px 0 10px 16px;
  border-left: 1px solid var(--gm-linha);
  margin-left: 8px;
}

.gm-mnav-sub a {
  min-height: 46px;
  padding: 10px 8px;
  border-bottom: 0;
  color: var(--gm-mudo);
  font-size: 15.5px;
}

.gm-mnav-sub a:hover,
.gm-mnav-sub a:focus-visible { color: var(--gm-verde); }

.gm-mnav-sub-todos {
  margin-top: 2px;
  color: var(--gm-verde) !important;
  font-weight: 500;
}

/* O pacote clonado só trazia o cabeçalho de desktop: abaixo dos 810px a barra de
   navegação (612px) transbordava os 390px do ecrã e empurrava o logótipo para
   fora da vista (ficava em x=-162). Aqui repõe-se um cabeçalho de telemóvel a
   sério: logótipo à esquerda, botão de menu à direita. */
@media (max-width: 1199px) {
  header [data-framer-name="Navigation"],
  header [data-framer-name="Action"] {
    display: none !important;
  }

  header [data-framer-name="Logo + Hamburger"] {
    flex: 1 1 auto !important;
    width: auto !important;
    flex-flow: row !important;
    place-content: center space-between !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .gm-burger {
    display: inline-flex;
    flex: 0 0 auto !important;
  }
}

body.gm-travado { overflow: hidden; }

/* --------------------------------------------------------------------------- */
/* 4. lista "O que fazemos" das páginas de sector                               */
/* --------------------------------------------------------------------------- */

.gm-itens { margin: 8px 0 0; }

.gm-itens-tit {
  margin: 0 0 18px;
  color: var(--gm-mudo);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gm-itens ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-itens li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--gm-linha);
  color: var(--gm-tinta);
  font-size: 16px;
  line-height: 1.45;
}

.gm-itens li svg {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  color: var(--gm-verde);
}

@media (max-width: 809px) {
  .gm-itens ul { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------- */
/* 4b. botões de apelo à acção das páginas de sector                            */
/* --------------------------------------------------------------------------- */

.gm-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}

.gm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--gm-t), background var(--gm-t), color var(--gm-t);
}

.gm-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.gm-btn--principal { background: var(--gm-lima); color: var(--gm-verde); }
.gm-btn--principal:hover { background: var(--gm-verde); color: var(--gm-branco); }

.gm-btn--zap {
  background: transparent;
  border: 1px solid var(--gm-linha);
  color: var(--gm-tinta);
}

.gm-btn--zap:hover { background: var(--gm-verde); border-color: var(--gm-verde); color: var(--gm-branco); }

.gm-btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .gm-btn { transition-duration: 0.01ms !important; }
  .gm-btn:active { transform: none; }
}

/* --------------------------------------------------------------------------- */
/* 5. cabeçalho do bloco de diferenciais                                        */
/* --------------------------------------------------------------------------- */

/* 3 colunas: cabeçalho + 5 diferenciais = 6 células, duas filas cheias.
   Com as 4 colunas do template sobravam dois buracos na segunda fila. */
.gm-dif { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

@media (max-width: 1199px) {
  .gm-dif { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 809px) {
  .gm-dif { grid-template-columns: minmax(0, 1fr) !important; }
}

/* a ranhura que mostrava o contador inventado passa a mostrar o nome do
   diferencial — o template punha-lhe `white-space:pre` e 60px, que aqui não serve */
.gm-dif-nome-caixa { width: 100% !important; white-space: normal !important; }

.gm-dif-nome {
  white-space: normal !important;
  font-size: clamp(19px, 1.5vw, 25px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance;
}

.gm-dif-head { margin: 0 0 26px; }

.gm-dif-head .gm-dif-et {
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 14px;
  background: var(--gm-papel);
  border-radius: 50px;
  color: var(--gm-mudo);
  font-size: 13px;
}

.gm-dif-head h2 {
  max-width: 20ch;
  margin: 0;
  color: var(--gm-tinta);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------- */
/* 6. acordeão das perguntas frequentes (o clone vinha sem JS)                  */
/* --------------------------------------------------------------------------- */

/* ATENÇÃO: o estado aberto tem de repor `flex`, não `block`. O parágrafo da
   resposta usa o padrão do Framer `flex:1 0 0; width:1px` — num pai `block` o
   `flex` é ignorado, fica com 1px de largura e a resposta estica-se por
   milhares de píxeis. */
.gm-q [data-framer-name="Answer"] { display: none; }
.gm-q.gm-open [data-framer-name="Answer"] { display: flex; }

.gm-q [data-framer-name^="Desktop/"] { cursor: pointer; }

/* a linha vertical do ícone desaparece quando está aberto: "+" passa a "−" */
.gm-q.gm-open .gm-icone-v {
  transform: scaleX(0) !important;
  transition: transform var(--gm-t);
}

.gm-icone-v { transition: transform var(--gm-t); }

/* --------------------------------------------------------------------------- */
/* 7. botão flutuante de WhatsApp                                               */
/* --------------------------------------------------------------------------- */

.gm-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 20px 0 16px;
  background: var(--gm-verde);
  border-radius: 50px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.55);
  color: var(--gm-branco);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: transform var(--gm-t), box-shadow var(--gm-t);
}

.gm-wa:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.6);
}

.gm-wa svg { width: 24px; height: 24px; flex: 0 0 auto; }

@media (max-width: 809px) {
  .gm-wa { right: 16px; bottom: 16px; height: 52px; padding: 0 18px 0 15px; }
  .gm-wa .gm-wa-txt { display: none; }
  .gm-wa { padding: 0; width: 52px; justify-content: center; }
}

/* --------------------------------------------------------------------------- */
/* 8. mapa                                                                      */
/* --------------------------------------------------------------------------- */

.gm-mapa {
  width: 100%;
  margin: 48px 0 0;
  overflow: hidden;
  border: 1px solid var(--gm-linha);
  border-radius: var(--gm-raio);
  background: var(--gm-papel);
}

.gm-mapa iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
  filter: saturate(0.72) contrast(1.02);
}

.gm-mapa-nota {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--gm-linha);
  background: var(--gm-branco);
  color: var(--gm-mudo);
  font-size: 14px;
}

.gm-mapa-nota a {
  color: var(--gm-verde);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 809px) {
  .gm-mapa { margin-top: 32px; }
  .gm-mapa iframe { height: 300px; }
}

/* --------------------------------------------------------------------------- */
/* 9. assinatura Bitkamba no rodapé                                             */
/* --------------------------------------------------------------------------- */

.gm-assinatura {
  padding: 14px 0 4px;
  color: var(--gm-mudo);
  font-size: 13px;
  line-height: 1.5;
}

.gm-assinatura a { color: inherit; text-decoration: underline; }
.gm-assinatura a:hover { color: var(--gm-verde); }

/* --------------------------------------------------------------------------- */
/* 10. alvos de toque decentes no telemóvel                                     */
/* --------------------------------------------------------------------------- */

@media (max-width: 809px) {
  .gm-mnav a, .gm-sub a { min-height: 48px; }

  /* as ligações do template ("Simple Black") tinham 17px de altura no rodapé —
     impossíveis de acertar com o dedo. Passam a ter alvo de 44px. */
  .framer-9fn5px {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* caixas de selecção do formulário: alvo maior e etiqueta clicável inteira */
  .framer-16oxfgr,
  .framer-nwac5i {
    width: 22px !important;
    height: 22px !important;
  }

  .framer-16fbghg {
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
  }
}

/* --------------------------------------------------------------------------- */
/* 10b. larguras fixas do desktop que o clone trazia                            */
/*                                                                              */
/* O pacote clonado só tem as medidas da variante de desktop: o título do hero  */
/* vinha com 750px fixos e o rodapé com 710px, o que em telemóvel cortava o H1  */
/* a meio ("Facilitamos a op…") e empurrava o rodapé para fora do ecrã. Estas   */
/* classes são as raízes do transbordo — corrigi-las endireita tudo o que está  */
/* lá dentro. As referências são os hashes do próprio clone (estáveis: o HTML   */
/* de origem está guardado em PageOrig e a obra reconstrói sempre a partir dele).*/
/* --------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .framer-1g9gbbj,   /* hero · Content  */
  .framer-lqiowk,    /* hero · Title    */
  .framer-1y59jsp,   /* hero · Title 1  */
  .framer-1w03maa,   /* hero · caixa do H1 */
  .framer-12ypjdk,   /* hero · subtítulo   */
  .framer-1qptps8 {  /* rodapé · fila de colunas */
    width: 100% !important;
    max-width: 100% !important;
  }

  /* o rodapé mantinha-se em duas colunas (marca | ligações) e empurrava a coluna
     das ligações para fora do ecrã (ficava em x=360 num ecrã de 390) */
  .framer-1y77njy {
    flex-flow: column !important;
    gap: 36px !important;
    align-items: stretch !important;
  }

  .framer-1y77njy > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .framer-1qptps8 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 20px !important;
  }

  .framer-1qptps8 > * { width: 100% !important; }

  /* textos longos do rodapé e do formulário vinham com white-space:pre e ficavam
     cortados a meio ("Todos os direitos rese…") */
  .framer-1ld7bmh p,
  .framer-1uqmuhj p,
  .framer-16fbghg p {
    white-space: normal !important;
  }
}

/* A fila de botões do hero vinha com `width:min-content`: abaixo do desktop os
   botões encolhiam até à palavra mais longa e o rótulo saía cortado a meio
   ("licitar Proposta"). Passa a ocupar a largura toda e a poder quebrar. */
@media (max-width: 1199px) {
  .framer-1qdi32k {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    place-content: center flex-start !important;
    gap: 14px !important;
  }

  /* e cada botão passa a ter a largura do que tem lá dentro (o `min-content` do
     template media pela palavra mais longa, não pela frase) */
  .framer-1qdi32k .framer-9fn5px {
    width: max-content !important;
    flex: none !important;
  }
}

/* Os cartões do percurso vinham com 350px de altura fixa e `space-between`. Com
   os textos do cliente — mais curtos do que os do template — abria-se um buraco
   de mais de 100px entre o título e a descrição. Passam a crescer com o
   conteúdo; a grelha continua alinhada porque as células esticam à mais alta. */
.framer-18c7m1x {
  height: auto !important;
  min-height: 200px;
  place-content: flex-start flex-start !important;
  gap: 22px;
}

/* ...e a célula da grelha que os segura vinha com os mesmos 350px reservados,
   o que deixava uma faixa vazia por baixo dos cartões */
[data-framer-name="Step"] > div,
[data-framer-name="Step"] > .ssr-variant > div {
  height: auto !important;
}

@media (max-width: 809px) {
  .framer-1qptps8 { grid-template-columns: minmax(0, 1fr) !important; }

  /* os dois telefones numa só linha não cabiam em 375px: deixa-se quebrar */
  .framer-15pvs7h,
  .framer-15pvs7h p {
    white-space: normal !important;
  }

  .framer-1xnqbuk,
  .framer-5hu7gd,
  .framer-1ho2sbx {
    max-width: 100% !important;
  }
}

/* O bloco de contacto TEM variantes de tablet/telemóvel na folha de estilos do
   template (.framer-v-32vguw e .framer-v-1j6zimv), mas quem trocava a classe pelo
   tamanho do ecrã era o JavaScript do Framer, que o clone não trouxe. Resultado:
   ficava em duas colunas a 390px, com o título e os campos cortados. Repõem-se
   aqui as mesmas regras, agora presas a media queries. */
@media (max-width: 1199px) {
  .framer-o08hbf { flex-direction: column !important; }

  .framer-o08hbf > * {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .framer-5ydgb2 { padding: 25px !important; }
}

@media (max-width: 809px) {
  .framer-1mt1zca { grid-template-columns: repeat(1, minmax(50px, 1fr)) !important; }
  .framer-5ydgb2 { padding: 20px !important; }

  /* barra final do rodapé: em fila só cabia o copyright — os "Termos de Serviço"
     e a "Política de Privacidade" ficavam fora do ecrã (x=462 num ecrã de 375) */
  .framer-1uqmuhj,
  .framer-fqxspv {
    width: 100% !important;
    max-width: 100% !important;
  }

  .framer-1ld7bmh,
  .framer-fqxspv {
    flex-flow: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .framer-1ld7bmh > * { width: 100% !important; }

  /* etiquetas rotativas e pontinhos do hero: 720px que não cabem em 390px e que
     só repetem os nomes dos sectores mostrados logo a seguir na grelha */
  .framer-1u1fr92,
  .framer-6dl9e8 {
    display: none !important;
  }

  /* opções do formulário: uma por linha, com alvo de toque decente */
  .framer-1i0yzky {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px;
  }
}

/* --------------------------------------------------------------------------- */
/* 12. slider do hero                                                           */
/*                                                                              */
/* Os pontinhos do template eram desenho: três bolas sem controlador nenhum.     */
/* Aqui o fundo passa a ser uma LISTA de slides (imagem ou vídeo, editáveis no   */
/* painel) e os pontos são gerados a partir dela — acrescentar um slide no CMS   */
/* acrescenta um ponto, sem obra.                                               */
/* --------------------------------------------------------------------------- */

.gm-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1100ms var(--gm-curva, cubic-bezier(0.44, 0, 0.16, 1));
}

.gm-slide[data-gm-activo="1"] { opacity: 1; }

.gm-slide[hidden] { display: none; }

.gm-slide > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* fora de cena descansa um pouco ampliado; ao entrar assenta devagar */
  transform: scale(1.085);
  transition: transform 900ms var(--gm-curva, cubic-bezier(0.44, 0, 0.16, 1));
}

.gm-slide[data-gm-activo="1"] > * {
  transform: scale(1);
  transition: transform var(--gm-slide-dur, 6000ms) linear;
}

/* controlo: coluna encostada à margem direita do hero (no telemóvel sobe para
   junto do cabeçalho, para não disputar espaço com os botões nem com o WhatsApp) */
.gm-hero-ctrl {
  position: absolute;
  top: 50%;
  right: 18px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translateY(-50%);
}

.gm-hero-ctrl:empty { display: none; }

.gm-ponto {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gm-ponto-nucleo {
  width: 7px;
  height: 7px;
  border-radius: 50px;
  background: var(--gm-branco);
  opacity: 0.5;
  transition: width var(--gm-t), height var(--gm-t), opacity var(--gm-t);
}

.gm-ponto[aria-current="true"] .gm-ponto-nucleo {
  width: 9px;
  height: 9px;
  opacity: 1;
}

.gm-ponto:hover .gm-ponto-nucleo { opacity: 0.85; }

/* anel de progresso: só o ponto activo o mostra, e vai-se fechando ao ritmo do
   slide — dá a sensação de tempo sem acrescentar ruído */
.gm-ponto-anel {
  position: absolute;
  inset: 7px;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--gm-branco);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 240ms linear;
}

.gm-ponto-anel circle {
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
}

.gm-ponto[aria-current="true"] .gm-ponto-anel { opacity: 0.75; }

/* a transição só existe enquanto o anel está a correr: assim, quando o slide
   muda (ou o relógio pára), o anel volta a zero de imediato em vez de desandar
   devagarinho para trás */
.gm-ponto[aria-current="true"][data-gm-correr="1"] .gm-ponto-anel circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--gm-slide-dur, 6000ms) linear;
}

.gm-ponto:focus-visible {
  outline: 2px solid var(--gm-branco);
  outline-offset: -6px;
  border-radius: 50px;
}

@media (max-width: 1199px) {
  /* no telemóvel os pontos descem para a faixa livre por baixo dos botões,
     alinhados com a margem do texto — longe do botão de WhatsApp, que vive no
     canto oposto */
  .gm-hero-ctrl {
    top: auto;
    bottom: 14px;
    left: 4px;
    right: auto;
    flex-direction: row;
    transform: none;
  }
}

/* --------------------------------------------------------------------------- */
/* 13. rodapé institucional                                                     */
/* --------------------------------------------------------------------------- */

/* 13a. PAR DE COR DO CONTEXTO                                                  */
/*                                                                              */
/* O rodapé do tema "Muncul" era ESCURO: os estados de rato do componente de    */
/* ligação ficaram presos ao branco, para lerem sobre esse fundo. No clone o    */
/* cartão do rodapé é claro — e o branco caía em cima do branco.                */
/*                                                                              */
/* A correcção não é um valor à mão: o contexto passa a ter par de cor PRÓPRIO. */
/* Estas são as cores de arranque (válidas sem JavaScript); o mouselle.js mede  */
/* o fundo que o cartão REALMENTE pinta e reescreve-as todas, garantindo que    */
/* cada estado lê sobre esse fundo. Como o estado de rato é sempre uma          */
/* variação do repouso — mais escura sobre fundo claro, mais clara sobre fundo  */
/* escuro — nunca pode coincidir com o fundo, seja qual for a paleta do painel. */
/* --------------------------------------------------------------------------- */

.gm-rodape {
  --gm-rod-fundo: var(--gm-papel);
  --gm-rod-tinta: var(--gm-tinta);
  --gm-rod-mudo: color-mix(in srgb, var(--gm-rod-tinta) 76%, var(--gm-rod-fundo));
  --gm-rod-elo: var(--gm-rod-tinta);
  --gm-rod-elo-rato: color-mix(in srgb, var(--gm-verde) 84%, var(--gm-rod-tinta));
  --gm-rod-elo-activo: color-mix(in srgb, var(--gm-rod-elo-rato) 60%, var(--gm-rod-tinta));
  --gm-rod-foco: var(--gm-rod-elo-rato);
  --gm-rod-linha: color-mix(in srgb, var(--gm-rod-tinta) 16%, var(--gm-rod-fundo));
  --gm-rod-linha-leve: color-mix(in srgb, var(--gm-rod-tinta) 9%, var(--gm-rod-fundo));
  --gm-rod-t: 260ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* se um dia a paleta do painel escurecer o rodapé, o par de cor vira ao
   contrário sozinho (o JS marca o contexto depois de medir o fundo) */
.gm-rodape[data-gm-fundo="escuro"] {
  --gm-rod-tinta: var(--gm-branco);
  --gm-rod-mudo: color-mix(in srgb, var(--gm-branco) 78%, var(--gm-rod-fundo));
  --gm-rod-elo-rato: color-mix(in srgb, var(--gm-lima) 88%, var(--gm-branco));
  --gm-rod-linha: color-mix(in srgb, var(--gm-branco) 26%, var(--gm-rod-fundo));
  --gm-rod-linha-leve: color-mix(in srgb, var(--gm-branco) 16%, var(--gm-rod-fundo));
}

/* O texto do clone lê a cor de `--extracted-r6o4lv` (declarada em linha no
   contentor). Redeclará-la NO PARÁGRAFO vence a herança sem `!important` — e
   é assim que todos os estados passam a depender do par de cor acima. */
.gm-rod-titulo,
.gm-rod-marca-rot,
.gm-fc-rot {
  color: var(--gm-rod-mudo);
  --extracted-r6o4lv: var(--gm-rod-mudo);
}

.gm-rod-marca-frase,
.gm-fc-val,
.gm-rod-copy p {
  color: var(--gm-rod-tinta);
  --extracted-r6o4lv: var(--gm-rod-tinta);
}

.gm-rod-elo p.framer-text {
  --extracted-r6o4lv: var(--gm-rod-elo);
  transition: color var(--gm-rod-t);
}

.gm-rod-elo:hover p.framer-text,
.gm-rod-elo:focus-visible p.framer-text {
  --extracted-r6o4lv: var(--gm-rod-elo-rato);
}

.gm-rod-elo:active p.framer-text {
  --extracted-r6o4lv: var(--gm-rod-elo-activo);
}

/* anel de foco perceptível — o do browser era um fio de 1px cinzento */
.gm-rodape a:focus-visible,
.gm-rodape .gm-fc-zap:focus-visible {
  outline: 2px solid var(--gm-rod-foco);
  outline-offset: 4px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------- */
/* 13b. hierarquia tipográfica                                                  */
/*                                                                              */
/* O tema dava MAIS peso às ligações do que aos títulos de coluna — hierarquia  */
/* ao contrário. Título pequeno em maiúsculas discretas, ligação em corpo, e as */
/* ligações legais da barra de baixo ainda mais pequenas.                       */
/* --------------------------------------------------------------------------- */

.gm-rod-titulo,
.gm-rod-marca-rot,
.gm-fc-rot {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.gm-rod-elo p.framer-text {
  font-size: 15px !important;
  font-weight: 450 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.1px !important;
}

.gm-rod-legal p.framer-text { font-size: 13px !important; }

/* a etiqueta de um campo de contacto não pode pesar o mesmo que o título da
   coluna que a contém — fica um degrau abaixo */
.gm-fc-rot {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
}

.gm-rod-copy p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.gm-rod-marca-frase {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.2px !important;
  max-width: 30ch;
  /* sem isto a frase quebrava em "…empresas em / Angola." e deixava uma
     palavra órfã na segunda linha (o `!important` é preciso porque o preset
     tipográfico do tema declara `text-wrap` com mais especificidade) */
  text-wrap: balance !important;
}

.gm-fc-val {
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* --------------------------------------------------------------------------- */
/* 13c. ligações: alvo, movimento e sublinhado que se desenha                    */
/*                                                                              */
/* O componente do tema vinha com `width:min-content` e o rótulo centrado sem   */
/* poder encolher: em ecrãs estreitos o texto saía da caixa pelos dois lados e  */
/* era cortado pelo cartão ("…toria & Certificação"). Passa a medir pelo texto  */
/* e a alinhar à esquerda.                                                       */
/* --------------------------------------------------------------------------- */

/* as caixas do tema mediam por `min-content` (a palavra mais longa): a coluna
   é uma célula da grelha, por isso ocupa-a toda e é a ligação que mede pelo
   texto — não o contrário */
.gm-rodape-cols [data-framer-name="Widget"],
.gm-rodape-cols .gm-rod-lista,
.gm-rodape-cols .gm-rod-item,
.gm-rodape-contactos [data-framer-name="List"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* na barra de baixo as duas ligações legais ficam lado a lado, cada uma com a
   largura do seu texto */
.gm-rodape .gm-rod-legais .gm-rod-item { width: max-content !important; }

.gm-rodape .gm-rod-elo {
  position: relative;
  width: max-content !important;
  max-width: 100%;
  min-height: 34px;
  justify-content: flex-start !important;
  transition: transform var(--gm-rod-t);
}

.gm-rodape .gm-rod-elo > div:not([data-framer-name]) {
  position: relative;
  flex: 0 1 auto !important;
  min-width: 0;
}

.gm-rodape .gm-rod-elo p.framer-text { white-space: normal !important; }

/* a seta do tema em cada ligação era ruído repetido 19 vezes; o estado de rato
   passa a ser um sublinhado que se desenha da esquerda para a direita */
.gm-rodape .gm-rod-elo [data-framer-name="Icon"] { display: none !important; }

.gm-rodape .gm-rod-elo > div:not([data-framer-name])::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: var(--gm-rod-elo-rato);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--gm-rod-t);
}

.gm-rod-elo:hover > div:not([data-framer-name])::after,
.gm-rod-elo:focus-visible > div:not([data-framer-name])::after {
  transform: scaleX(1);
}

.gm-rod-elo:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------- */
/* 13d. ritmo, respiro e divisórias                                             */
/* --------------------------------------------------------------------------- */

.gm-rodape { padding: 40px 30px 44px !important; }

/* divisória superior: abre o rodapé com uma régua fina à largura do conteúdo */
.gm-rodape [data-framer-name="Inner"] {
  border-top: 1px solid var(--gm-rod-linha);
  padding-top: 48px !important;
  gap: 44px !important;
  align-items: stretch !important;
}

/* segunda divisória, mais leve, antes da barra de direitos */
.gm-rodape [data-framer-name="Line"] {
  background: var(--gm-rod-linha-leve) !important;
}

.gm-rodape-cols { align-items: flex-start !important; }

/* espaçamento igual em todas as colunas: título → lista, e entre ligações */
.gm-rodape-cols [data-framer-name="Widget"] { gap: 16px !important; }

.gm-rod-lista { gap: 2px !important; }

.gm-rodape .gm-rod-marca { gap: 26px !important; }

.gm-rodape [data-framer-name="Logo"] { gap: 18px !important; }

.gm-rodape .gm-rod-logo {
  width: 132px !important;
  height: 36px !important;
}

.gm-rodape [data-framer-name="Text"] {
  align-items: flex-start !important;
  gap: 10px !important;
}

/* Quatro colunas a sério: o template punha a marca numa coluna elástica e as
   ligações todas espremidas à direita. Com `display:contents` na fila das
   ligações, as três colunas passam a ser células da mesma grelha da marca. */
@media (min-width: 1200px) {
  /* As três colunas de ligações repartem o espaço por igual: com a repartição
     antiga a goteira entre "Grupo" e "Contactos" era de 40px e as outras de
     130px — a fila lia-se como três blocos desencontrados. */
  .gm-rodape-main {
    display: grid !important;
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: start;
  }

  .gm-rodape-main > * { width: auto !important; max-width: none !important; }

  .gm-rodape-cols {
    display: contents !important;
  }
}

/* --------------------------------------------------------------------------- */
/* 13e. contactos como informação, não como lista de ligações soltas            */
/* --------------------------------------------------------------------------- */

.gm-fc-linha,
.gm-rodape .gm-fc-bloco {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px !important;
}

.gm-rodape-contactos [data-framer-name="List"] { gap: 18px !important; }

/* os dois telefones ficam claramente separados um do outro */
.gm-rodape [data-framer-name="Phone"] .gm-rod-item + .gm-rod-item { margin-top: 2px; }

.gm-fc-zap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 18px 0 14px;
  background: transparent;
  border: 1px solid var(--gm-rod-linha);
  border-radius: 50px;
  color: var(--gm-rod-tinta);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--gm-rod-t), border-color var(--gm-rod-t), color var(--gm-rod-t);
}

.gm-fc-zap svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* o rótulo no estado de rato usa a cor do FUNDO do rodapé sobre o realce: são
   as duas pontas do mesmo par, por isso lêem sempre uma sobre a outra */
.gm-fc-zap:hover {
  background: var(--gm-rod-elo-rato);
  border-color: var(--gm-rod-elo-rato);
  color: var(--gm-rod-fundo);
}

.gm-fc-zap:active { background: var(--gm-rod-elo-activo); border-color: var(--gm-rod-elo-activo); }

/* --------------------------------------------------------------------------- */
/* 13f. barra inferior: direitos à esquerda, ligações legais à direita          */
/* --------------------------------------------------------------------------- */

.gm-rodape .gm-rod-barra {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 40px;
}

.gm-rodape .gm-rod-barra > .gm-rod-copy { grid-area: 1 / 1; }
.gm-rodape .gm-rod-barra > .gm-assinatura {
  grid-area: 2 / 1;
  padding: 2px 0 0;
  color: var(--gm-rod-mudo);
  font-size: 12px;
}

/* a assinatura da casa segue a mesma regra de todas as ligações do rodapé:
   sem sublinhado permanente, sublinhado a desenhar-se no estado de rato */
.gm-rodape .gm-assinatura a {
  position: relative;
  color: var(--gm-rod-mudo);
  text-decoration: none;
  transition: color var(--gm-rod-t);
}

.gm-rodape .gm-assinatura a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--gm-rod-elo-rato);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--gm-rod-t);
}

.gm-rodape .gm-assinatura a:hover,
.gm-rodape .gm-assinatura a:focus-visible { color: var(--gm-rod-elo-rato); }

.gm-rodape .gm-assinatura a:hover::after,
.gm-rodape .gm-assinatura a:focus-visible::after { transform: scaleX(1); }

.gm-rodape .gm-rod-barra > .gm-rod-legais {
  grid-area: 1 / 2 / span 2 / auto;
  justify-self: end;
  align-self: center;
  width: auto !important;
  gap: 26px !important;
}

/* --------------------------------------------------------------------------- */
/* 13g. telemóvel e tablet                                                      */
/* --------------------------------------------------------------------------- */

@media (max-width: 1199px) {
  .gm-rodape { padding: 34px 26px 38px !important; }
  .gm-rodape [data-framer-name="Inner"] { padding-top: 38px !important; gap: 36px !important; }
  .gm-rodape .gm-rod-marca { gap: 22px !important; }
}

@media (max-width: 809px) {
  .gm-rodape { padding: 30px 22px 34px !important; }
  .gm-rodape [data-framer-name="Inner"] { padding-top: 32px !important; gap: 30px !important; }

  /* alvo de toque em todas as ligações, sem colar umas às outras */
  .gm-rodape .gm-rod-elo { min-height: 44px; }
  .gm-rod-lista { gap: 0 !important; }

  /* barra inferior empilhada e centrada */
  .gm-rodape .gm-rod-barra {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 14px !important;
  }

  .gm-rodape .gm-rod-barra > * {
    grid-area: auto !important;
    justify-self: center !important;
    width: 100% !important;
  }

  .gm-rodape .gm-rod-barra > .gm-rod-legais {
    flex-flow: row !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 24px !important;
  }

  .gm-rodape .gm-rod-legais .gm-rod-elo { justify-content: center !important; }

  .gm-rodape .gm-rod-copy p,
  .gm-rodape .gm-assinatura { text-align: center !important; }

  /* alvo de toque também no logótipo e na assinatura da casa (a caixa cresce,
     o desenho do logótipo não — a imagem continua a caber por `contain`) */
  .gm-rodape .gm-rod-logo { height: 44px !important; }

  .gm-rodape .gm-assinatura a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Mesmo defeito herdado do tema, noutro sítio: o componente de botão media
     por `min-content` e centrava o rótulo. Abaixo dos 810px o texto passa a
     poder quebrar, e o `min-content` encolhia a caixa até à palavra mais longa
     — o rótulo saía pelos dois lados e era cortado ("alar connosco"). Passa a
     medir pelo texto todo, com o limite da caixa que o segura. */
  .framer-9fn5px {
    width: max-content !important;
    max-width: 100% !important;
  }

  .framer-9fn5px > div:not([data-framer-name]) {
    flex: 0 1 auto !important;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------- */
/* 14. secção "A Nossa Vantagem" da página inicial                              */
/*                                                                              */
/* Ficou só o cabeçalho depois de saírem os casos de estudo do template: em vez  */
/* de um título a boiar, alinha-se à esquerda e fecha com UMA chamada à acção.   */
/* --------------------------------------------------------------------------- */

.gm-vant-cab {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: 20px 60px;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}

.gm-vant-cab > * {
  width: 100% !important;
  max-width: 100% !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.gm-vant-cab p,
.gm-vant-cab h2 { text-align: left !important; }

.gm-vant-acao {
  align-self: flex-start;
  width: 100%;
  margin-top: 34px;
}

.gm-vant-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  background: var(--gm-verde);
  border-radius: 50px;
  color: var(--gm-branco);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--gm-t), color var(--gm-t), transform var(--gm-t);
}

.gm-vant-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.gm-vant-btn:hover {
  background: var(--gm-lima);
  color: var(--gm-verde);
  transform: translateX(3px);
}

.gm-vant-btn:focus-visible {
  outline: 2px solid var(--gm-verde);
  outline-offset: 3px;
}

/* a secção já não tem cartões: o respiro do template deixava um vazio enorme */
.gm-vant [data-framer-name="Inner"] { gap: 0 !important; }

@media (max-width: 1199px) {
  .gm-vant-cab {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .gm-vant-acao { margin-top: 26px; }
}

/* --------------------------------------------------------------------------- */
/* 15. cartão preto do percurso: altura fixa do template deixava um buraco      */
/* --------------------------------------------------------------------------- */

.framer-1umnu6h,
[data-framer-name="Step"] .framer-18c7m1x { gap: 20px; }

/* --------------------------------------------------------------------------- */
/* 11. respeitar quem pediu menos movimento                                     */
/* --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gm-sub, .gm-burger span, .gm-burger span::before, .gm-burger span::after,
  .gm-wa, .gm-icone-v {
    transition-duration: 0.01ms !important;
  }
  .gm-wa:hover { transform: none; }

  /* slider: corte suave, sem zoom lento nem anel a correr */
  .gm-slide { transition-duration: 220ms !important; }
  .gm-slide > *,
  .gm-slide[data-gm-activo="1"] > * {
    transform: none !important;
    transition: none !important;
  }
  .gm-ponto[aria-current="true"] .gm-ponto-anel circle {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
  .gm-vant-btn:hover { transform: none; }
  .gm-rod-elo:active { transform: none; }

  /* o sublinhado do rodapé aparece de uma vez, sem se desenhar */
  .gm-rodape .gm-rod-elo > div:not([data-framer-name])::after {
    transition: none !important;
  }

  .gm-mnav-sub { transition: none !important; }
}