/* ---------------------------------------------------------------------------
   Grupo Mouselle — camada de MOVIMENTO.

   O pacote clonado do tema “Muncul” veio sem o JavaScript do Framer: ficou o
   desenho, perdeu-se a física. Isto repõe o sistema de movimento como uma
   camada transversal — as mesmas curvas, o mesmo ritmo e as mesmas revelações,
   presas às classes do próprio clone (estáveis: o HTML de origem está
   congelado em PageOrig).

   Regras da casa respeitadas aqui:
   · só `transform`, `opacity`, `filter` e (no acordeão) `height` são animados;
   · `will-change` entra na altura certa e SAI no fim (classe .gm-fim);
   · nada fica preso invisível: o estado inicial só existe quando o JS o põe;
   · `prefers-reduced-motion` desliga parallax, marquee e percursos longos;
   · zero cores fixas — tudo sai dos tokens --gm- e --kb- da paleta do site.

   ATENÇÃO A QUEM EDITAR ESTE CABEÇALHO: nunca escrever a sequência de asterisco
   e barra dentro de um comentário. Esta linha já dizia "--gm-*" seguido de
   "/--kb-*", e esse par FECHAVA O COMENTÁRIO aqui mesmo. O que vinha a seguir
   passava a ser lido como CSS, e o parser engolia o bloco :root inteiro — o que
   deixava --gm-curva, --gm-mola e --gm-rv-dur POR DEFINIR.
   Consequência, medida no browser: toda a transição declarada com var(--gm-curva)
   era inválida e caía no valor inicial (all 0s). Ou seja, a física desta camada
   estava desligada desde que o ficheiro foi escrito, sem dar erro nenhum.
   --------------------------------------------------------------------------- */

:root {
  /* curva do tema (transições não-elásticas) */
  --gm-curva: cubic-bezier(0.44, 0, 0.16, 1);
  /* mola: equivalente em bezier a um spring de rigidez média, sem ressalto feio */
  --gm-mola: cubic-bezier(0.22, 1, 0.36, 1);
  /* mola com ressalto curto, para chegadas (botões, pastilhas) */
  --gm-mola-viva: cubic-bezier(0.34, 1.4, 0.64, 1);

  --gm-rv-dur: 720ms;      /* revelação por scroll */
  --gm-rv-passo: 75ms;     /* atraso incremental entre irmãos */
  --gm-hover: 320ms;       /* estados de rato */
}

/* --------------------------------------------------------------------------- */
/* 1. revelação por scroll (play once)                                          */
/* --------------------------------------------------------------------------- */

/* O estado inicial NUNCA está no HTML servido: o JS só marca .gm-rv em blocos
   que ainda não estão à vista, por isso sem JS (ou se o JS falhar) o conteúdo
   aparece normalmente e nada pisca. */
.gm-rv {
  opacity: 0;
  transform: translate3d(0, var(--gm-rv-y, 28px), 0) scale(var(--gm-rv-e, 0.985));
  filter: blur(var(--gm-rv-b, 3px));
  will-change: opacity, transform, filter;
  transition:
    opacity var(--gm-rv-dur) var(--gm-curva) var(--gm-rv-atraso, 0ms),
    transform var(--gm-rv-dur) var(--gm-mola) var(--gm-rv-atraso, 0ms),
    filter calc(var(--gm-rv-dur) * 0.7) var(--gm-curva) var(--gm-rv-atraso, 0ms);
}

.gm-rv.gm-dentro {
  opacity: 1;
  transform: none;
  filter: none;
}

/* fim da festa: liberta a camada de composição e deixa de intrometer-se */
.gm-rv.gm-fim {
  will-change: auto;
  transition: none;
  filter: none;
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------- */
/* 2. cabeçalho reactivo                                                        */
/* --------------------------------------------------------------------------- */

/* O contentor do cabeçalho já era `position:absolute; top:0` no tema (a barra
   assenta por cima do hero). Passa a fixo só quando há JS — sem JS fica como
   estava, e em nenhum dos casos há salto de layout. */
.gm-cab-caixa {
  position: fixed !important;
  /* acima do painel de telemóvel (z-index 200): sem isto o painel tapava o
     próprio botão que o fecha */
  z-index: 220 !important;
  transition: transform 480ms var(--gm-curva);
}

.gm-cab-caixa[data-gm-recolhido="1"] {
  transform: translate3d(0, -102%, 0);
}

.gm-cab {
  transition:
    background-color 360ms var(--gm-curva),
    backdrop-filter 360ms var(--gm-curva),
    box-shadow 360ms var(--gm-curva),
    padding 360ms var(--gm-curva);
}

/* A partir dos 80px de scroll: fundo desfocado, hairline e um encolher discreto.
   O fundo é ESCURO de propósito — o logótipo do cabeçalho é a versão clara (foi
   desenhado para assentar no hero) e a pastilha do menu já é branca. Com vidro
   claro o logótipo desaparecia; com vidro escuro tudo continua legível e a barra
   ganha o peso institucional da marca. */
.gm-cab[data-gm-pousado="1"] {
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

/* o encolher só acontece quando o menu de telemóvel está fechado: com o painel
   aberto a barra tem de manter a altura com que foi medida, senão abria-se uma
   fresta entre as duas */
.gm-cab[data-gm-pousado="1"]:not([data-gm-menu="1"]) {
  padding-top: 16px;
  padding-bottom: 16px;
}

.gm-cab[data-gm-pousado="1"][data-gm-vidro="escuro"] {
  background-color: color-mix(in srgb, var(--gm-tinta) 76%, transparent) !important;
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--gm-branco) 14%, transparent),
              0 14px 34px -28px rgba(0, 0, 0, 0.85);
}

.gm-cab[data-gm-pousado="1"][data-gm-vidro="claro"] {
  background-color: color-mix(in srgb, var(--gm-branco) 84%, transparent) !important;
  box-shadow: 0 1px 0 0 var(--gm-linha),
              0 14px 34px -30px rgba(0, 0, 0, 0.55);
}

/* painel dos sectores: abre com fade + deslocamento curto + escala 0.98→1, e as
   entradas entram em cascata. O FECHO é mais rápido do que a abertura (é o que
   dá a sensação de o painel "obedecer" em vez de arrastar-se). */
.gm-sub {
  transform: translate(-50%, 10px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 180ms var(--gm-curva),
    transform 200ms var(--gm-curva),
    visibility 180ms var(--gm-curva);
}

.gm-has-sub[data-aberto="1"] > .gm-sub {
  transform: translate(-50%, 0) scale(1);
  transition:
    opacity 280ms var(--gm-curva),
    transform 420ms var(--gm-mola),
    visibility 280ms var(--gm-curva);
}

.gm-sub-item,
.gm-sub-pe > * {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 160ms var(--gm-curva),
    transform 160ms var(--gm-curva),
    background var(--gm-hover);
}

.gm-has-sub[data-aberto="1"] .gm-sub-item,
.gm-has-sub[data-aberto="1"] .gm-sub-pe > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 300ms var(--gm-curva) var(--gm-atraso, 0ms),
    transform 420ms var(--gm-mola) var(--gm-atraso, 0ms),
    background var(--gm-hover);
}

.gm-sub-item:nth-child(1) { --gm-atraso: 24ms; }
.gm-sub-item:nth-child(2) { --gm-atraso: 48ms; }
.gm-sub-item:nth-child(3) { --gm-atraso: 72ms; }
.gm-sub-item:nth-child(4) { --gm-atraso: 96ms; }
.gm-sub-item:nth-child(5) { --gm-atraso: 120ms; }
.gm-sub-pe > * { --gm-atraso: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .gm-sub,
  .gm-has-sub[data-aberto="1"] > .gm-sub {
    transform: translate(-50%, 0);
    transition-duration: 0.01ms;
  }
  .gm-sub-item,
  .gm-sub-pe > *,
  .gm-has-sub[data-aberto="1"] .gm-sub-item,
  .gm-has-sub[data-aberto="1"] .gm-sub-pe > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------- */
/* 3. menu de telemóvel: painel a entrar + itens em cascata                     */
/* --------------------------------------------------------------------------- */

/* O painel abria por CIMA da barra e tapava o próprio botão que o fecha (o
   cabeçalho vive dentro de um contexto de empilhamento do template, por isso não
   basta subir-lhe o z-index). Passa a abrir DEBAIXO da barra: o logótipo e o
   botão “X” ficam sempre à mão. A altura da barra é medida pelo JS. */
.gm-mnav {
  inset: var(--gm-cab-alt, 76px) 0 auto 0;
  max-height: calc(100dvh - var(--gm-cab-alt, 76px));
  padding: 14px 20px 32px;
  transform: translate3d(0, -14px, 0);
  opacity: 0;
  transition:
    opacity 260ms var(--gm-curva),
    transform 380ms var(--gm-mola);
}

.gm-mnav[data-aberto="1"] {
  transform: none;
  opacity: 1;
}

.gm-mnav > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 300ms var(--gm-curva),
    transform 420ms var(--gm-mola);
}

.gm-mnav[data-aberto="1"] > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--gm-i, 0) * 34ms);
}

/* --------------------------------------------------------------------------- */
/* 4. hero: entrada em cascata, vídeo de fundo e parallax                       */
/* --------------------------------------------------------------------------- */

/* leitura confortável nas âncoras internas (desligado em prefers-reduced-motion) */
html {
  scroll-behavior: smooth;
}

.gm-hero {
  overflow: hidden;
}

/* o estado inicial da entrada vive numa classe posta pelo construtor da página,
   e só “conta” quando há JS (html.gm-js) — sem JS o hero aparece inteiro. */
.gm-js .gm-hero-passo {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

.gm-js .gm-hero-passo.gm-dentro {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 820ms var(--gm-curva) var(--gm-rv-atraso, 0ms),
    transform 900ms var(--gm-mola) var(--gm-rv-atraso, 0ms),
    filter 620ms var(--gm-curva) var(--gm-rv-atraso, 0ms);
}

.gm-js .gm-hero-passo.gm-fim {
  will-change: auto;
}

/* --------------------------------------------------------------------------- */
/* TROCA DE TEXTO ENTRE SLIDES (obra 363)                                       */
/*                                                                              */
/* Cada slide do hero passou a ter o seu próprio texto. A passagem de um para o  */
/* outro tem de ser NOTADA e não INCOMODAR: sai em fade com um translateY curto, */
/* o conteúdo é trocado fora de vista e entra pelo mesmo caminho. Nada de corte  */
/* seco — e nada de repetir a entrada dramática da primeira pintura, que é longa */
/* de propósito e aqui seria de mais, cinco vezes seguidas.                      */
/*                                                                              */
/* Os tempos são os da casa: --gm-curva, e a mesma família de durações curtas    */
/* dos estados de rato.                                                         */
/* --------------------------------------------------------------------------- */

/* Tudo isto é preso a `.gm-fim` — a classe que o construtor põe quando a
   entrada dramática da primeira pintura já acabou (2,4 s). Assim a chegada à
   página mantém exactamente a animação que a obra 343 desenhou, e só as
   passagens SEGUINTES usam estes tempos curtos. Sem esta condição, o hero
   entrava em cena com a rapidez de uma troca de slide. */
.gm-js .gm-hero-passo.gm-dentro.gm-fim {
  transition:
    opacity 380ms var(--gm-curva),
    transform 380ms var(--gm-mola),
    min-height 240ms var(--gm-curva);
}

/* O `!important` é preciso e não é preguiça: o Framer escreve `opacity: 1` e
   `transform: none` no atributo `style` de cada um destes blocos, e um estilo
   inline ganha a qualquer regra de classe, por mais específica que seja. Sem
   isto o texto trocava de repente, sem passagem nenhuma — que foi exactamente o
   que se mediu no browser antes desta correcção. É a mesma razão pela qual o
   resto do projecto escreve `display: none !important` para esconder blocos. */
.gm-js .gm-hero-passo.gm-dentro.gm-fim[data-gm-sai="1"] {
  opacity: 0 !important;
  transform: translate3d(0, 10px, 0) !important;
  filter: none;
  transition:
    opacity 240ms var(--gm-curva),
    transform 240ms var(--gm-curva);
}

/* ALTURA RESERVADA: sem ela, um slide com um título de duas linhas e outro com
   três empurram os botões para cima e para baixo a cada passagem.
   Não se reserva aqui um número à mão — em `em` acompanha o tamanho de letra
   mas não o NÚMERO DE LINHAS, que é o que muda com a largura do ecrã e com o
   comprimento do texto que o cliente escrever. Quem reserva é o construtor, que
   mede o texto de cada slide e guarda o do mais alto (ver mouselle.js,
   `reservarAltura`). A transição da própria medida vai na regra de cima, junto
   com as outras — separá-la numa regra de menor especificidade fazia com que
   nunca chegasse a aplicar-se. */

/* quem pediu menos movimento troca o texto sem passagem nenhuma — o JS já não
   anima, e isto garante que nem o resíduo da transição fica */
@media (prefers-reduced-motion: reduce) {
  .gm-js .gm-hero-passo.gm-dentro.gm-fim,
  .gm-js .gm-hero-passo.gm-dentro.gm-fim[data-gm-sai="1"] {
    transition: opacity 120ms linear !important;
    transform: none !important;
  }
}

/* revelação palavra a palavra do H1 (o tema fazia-o linha a linha; palavra a
   palavra dá a mesma leitura e sobrevive a qualquer quebra de linha) */
.gm-palavra {
  display: inline-block;
  overflow: hidden;
  /* sem esta folga, o overflow cortava as descidas do g/p/ç e os acentos */
  padding: 0.12em 0.02em 0.16em;
  margin: -0.12em -0.02em -0.16em;
  vertical-align: bottom;
}

.gm-palavra > i {
  display: inline-block;
  font-style: inherit;
  transform: translate3d(0, 108%, 0);
  opacity: 0;
  will-change: transform, opacity;
}

.gm-dentro .gm-palavra > i,
.gm-palavra.gm-dentro > i {
  transform: none;
  opacity: 1;
  transition:
    transform 900ms var(--gm-mola) calc(var(--gm-w, 0) * 42ms),
    opacity 620ms var(--gm-curva) calc(var(--gm-w, 0) * 42ms);
}

/* fundo do hero: a fotografia e o vídeo partilham a mesma moldura */
.gm-hero-fundo {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.08);
  transform-origin: 50% 42%;
}

.gm-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1100ms var(--gm-curva);
}

.gm-hero-video.gm-video-visivel {
  opacity: 1;
}

/* O vídeo é mais claro do que a fotografia que substitui (céu e mar ao fim do
   dia). Enquanto ele estiver no ar acrescenta-se uma camada de escurecimento
   por cima do fundo — e só por cima do FUNDO: o texto do hero está na camada
   seguinte e não é afectado. */
.gm-hero-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1100ms var(--gm-curva);
  background:
    linear-gradient(102deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.44) 34%,
      rgba(0, 0, 0, 0.16) 66%,
      rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 42%);
}

.gm-hero-fundo[data-gm-com-video="1"]::after {
  opacity: 1;
}

/* fotografias institucionais: parallax curto dentro da própria máscara */
.gm-imagem-lenta {
  will-change: transform;
  transform: translate3d(0, var(--gm-desvio, 0px), 0) scale(1.12);
}

/* --------------------------------------------------------------------------- */
/* 5. faixa deslizante dos referenciais (marquee infinito)                      */
/* --------------------------------------------------------------------------- */

/* a janela é o próprio contentor do tema: aproveita-se a geometria e troca-se
   os degradês fixos das pontas por uma máscara — funciona em qualquer fundo */
.gm-faixa-janela {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.gm-faixa {
  display: flex;
  flex: none;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
}

/* dois (ou mais) grupos idênticos a deslizar: quando o primeiro sai de cena o
   segundo está exactamente no lugar dele — laço sem costura */
.gm-faixa-grupo {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gm-faixa-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  height: 46px;
  margin-right: var(--gm-faixa-vao, 14px);
  padding: 0 20px;
  background: var(--gm-branco);
  border: 1px solid var(--gm-linha);
  border-radius: 50px;
  color: var(--gm-tinta);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.gm-faixa-item svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--gm-verde);
}

.gm-faixa[data-gm-anda="1"] {
  animation: gm-faixa-desliza var(--gm-faixa-tempo, 34s) linear infinite;
}

.gm-faixa-janela:hover .gm-faixa[data-gm-anda="1"],
.gm-faixa-janela:focus-within .gm-faixa[data-gm-anda="1"] {
  animation-play-state: paused;
}

@keyframes gm-faixa-desliza {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-1 * var(--gm-faixa-largura, 0px)), 0, 0); }
}

/* sem JS a faixa é uma fila estática, centrada — continua a dizer o que tem a dizer */
.gm-faixa:not([data-gm-anda="1"]) {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
}

/* --------------------------------------------------------------------------- */
/* 6. cartões dos sectores                                                      */
/* --------------------------------------------------------------------------- */

.gm-cartao {
  position: relative;
  transition:
    transform 480ms var(--gm-mola),
    box-shadow 480ms var(--gm-curva);
}

.gm-cartao .gm-cartao-mascara img,
.gm-cartao .gm-cartao-mascara video {
  transition: transform 900ms var(--gm-mola);
}

/* pastilha com seta, no canto da fotografia */
.gm-cartao::before,
.gm-cartao::after {
  content: "";
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.gm-cartao::before {
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gm-lima);
  transform: scale(0.72) translate3d(0, 8px, 0);
  transition:
    opacity 320ms var(--gm-curva),
    transform 460ms var(--gm-mola-viva);
}

.gm-cartao::after {
  top: 29px;
  right: 29px;
  width: 16px;
  height: 16px;
  background: var(--gm-verde);
  transform: translate3d(-5px, 0, 0);
  transition:
    opacity 320ms var(--gm-curva) 60ms,
    transform 460ms var(--gm-mola) 60ms;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------- */
/* 7. diferenciais: ordinal a chegar e régua a desenhar-se                      */
/* --------------------------------------------------------------------------- */

.gm-dif-cartao {
  position: relative;
}

/* a régua que se desenha da esquerda para a direita quando o cartão entra */
.gm-dif-regua {
  display: block;
  flex: none;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin: 16px 0 0;
  background: var(--gm-linha);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--gm-curva) calc(180ms + var(--gm-i, 0) * var(--gm-rv-passo));
}

.gm-dentro .gm-dif-regua,
.gm-dif-cartao.gm-dentro .gm-dif-regua {
  transform: scaleX(1);
}

/* o ordinal 01–05 chega com mola, um pouco depois do resto do cartão */
.gm-dif-cartao [data-framer-name="Label"] {
  transform: scale(0.82);
  opacity: 0;
  transition:
    transform 620ms var(--gm-mola-viva) calc(140ms + var(--gm-i, 0) * var(--gm-rv-passo)),
    opacity 460ms var(--gm-curva) calc(140ms + var(--gm-i, 0) * var(--gm-rv-passo));
}

.gm-dif-cartao.gm-dentro [data-framer-name="Label"],
.gm-dif-cartao.gm-fim [data-framer-name="Label"] {
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------- */
/* 8. percurso em 4 fases                                                       */
/* --------------------------------------------------------------------------- */

.gm-percurso-barra {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 100%;
  height: 2px;
  margin: 2px 0 14px;
  border-radius: 2px;
  background: var(--gm-linha);
  overflow: hidden;
}

.gm-percurso-barra > i {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--gm-verde);
  transform: scaleX(var(--gm-progresso, 0));
  transform-origin: left center;
  transition: transform 220ms linear;
}

/* O passo activo destaca-se pelo TOM, não por apagar os outros: fica em papel
   branco, ligeiramente levantado e com sombra. Baixar a opacidade dos restantes
   pareceria elegante em movimento, mas rouba contraste ao texto apagado e, numa
   captura parada, lê-se como defeito. */
.gm-passo [data-framer-name="Desktop"] {
  transition:
    background-color 520ms var(--gm-curva),
    box-shadow 520ms var(--gm-curva),
    transform 620ms var(--gm-mola);
}

.gm-passo-activo [data-framer-name="Desktop"] {
  background-color: var(--gm-branco) !important;
  box-shadow: 0 22px 46px -32px rgba(0, 0, 0, 0.5);
  transform: translate3d(0, -3px, 0);
}

/* --------------------------------------------------------------------------- */
/* 9. acordeão das perguntas: altura com mola                                   */
/* --------------------------------------------------------------------------- */

/* Com JS, a resposta está SEMPRE em `flex` e é a altura que manda — é a única
   maneira honesta de a fazer crescer com mola. Quando a animação de fecho acaba,
   o JS marca `data-gm-fechado` e aí sim sai do fluxo (e da árvore de leitura).
   ATENÇÃO: tem de ser `flex`, nunca `block` — o parágrafo lá dentro usa o padrão
   `flex:1 0 0; width:1px` do Framer e num pai `block` esticava-se milhares de px. */
.gm-q[data-gm-anima="1"] [data-framer-name="Answer"] {
  display: flex !important;
  overflow: hidden;
}

.gm-q[data-gm-anima="1"] [data-framer-name="Answer"][data-gm-fechado="1"] {
  display: none !important;
}

.gm-q .framer-wf3vn4-container,
.gm-q [data-framer-name="Minus"] {
  transition: transform 460ms var(--gm-mola);
}

.gm-q.gm-open .framer-wf3vn4-container {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------- */
/* 10. botões: preenchimento em varrimento, seta a deslizar, compressão         */
/* --------------------------------------------------------------------------- */

.gm-botao {
  transition:
    transform 420ms var(--gm-mola),
    box-shadow 420ms var(--gm-curva);
}

/* o tema já trazia a “bolha” (data-framer-name="Bg") escondida por baixo do
   botão — era ela que o Framer fazia crescer no hover. Repõe-se o gesto. */
.gm-botao > [data-framer-name="Bg"] {
  border-radius: 50%;
  transform: scale(1);
  transform-origin: center;
  transition: transform 620ms var(--gm-mola);
}

/* Quando a bolha enche o botão, o rótulo tem de trocar de cor: o texto do botão
   principal é do MESMO verde da bolha e ficaria invisível. Troca-se pela cor de
   fundo do próprio botão (o inverso exacto, medido pelo JS); sem essa medida,
   branco — que se lê sobre o verde em qualquer caso. */
.gm-botao > div:not([data-framer-name]) {
  transition: color 320ms var(--gm-curva);
}

.gm-botao [data-framer-name="Icon"] {
  transition: transform 420ms var(--gm-mola);
}

.gm-botao:active {
  transform: scale(0.975);
}

/* ligações com seta (rodapé, listas) — só o gesto da seta, sem preenchimento */
.gm-elo [data-framer-name="Icon"] {
  transition: transform 380ms var(--gm-mola);
}

/* --------------------------------------------------------------------------- */
/* 11. formulário                                                               */
/* --------------------------------------------------------------------------- */

.gm-campo .framer-form-input-wrapper,
.gm-campo.framer-form-input-wrapper {
  transition:
    box-shadow 260ms var(--gm-curva),
    transform 320ms var(--gm-mola),
    border-color 260ms var(--gm-curva);
}

.gm-campo[data-gm-foco="1"] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gm-verde) 45%, transparent);
  transform: translate3d(0, -1px, 0);
}

/* a etiqueta acompanha o foco (o tema já tinha etiqueta visível — não se troca
   por uma etiqueta flutuante, que aqui seria um retrocesso de usabilidade) */
.gm-campo-etiqueta {
  display: inline-block;
  transition:
    color 260ms var(--gm-curva),
    transform 320ms var(--gm-mola);
}

.gm-campo-etiqueta[data-gm-foco="1"] {
  color: var(--gm-verde);
  transform: translate3d(2px, 0, 0);
}

/* estado do envio */
.gm-form-estado {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 360ms var(--gm-curva),
    transform 420ms var(--gm-mola);
}

.gm-form-estado[data-gm-visivel="1"] {
  opacity: 1;
  transform: none;
}

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

.gm-js .gm-wa {
  opacity: 0;
  transform: scale(0.6) translate3d(0, 12px, 0);
  /* enquanto está fora, não apanha cliques: é um alvo invisível por cima do
     que estiver por baixo (chegava a tapar as ligações legais do rodapé) */
  pointer-events: none;
  transition:
    opacity 300ms var(--gm-curva),
    transform 420ms var(--gm-curva);
}

.gm-js .gm-wa.gm-dentro {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 420ms var(--gm-curva),
    transform 620ms var(--gm-mola-viva);
}

/* pulsação muito discreta: um anel que se abre e desaparece, de 6 em 6 segundos */
.gm-wa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--gm-verde);
  opacity: 0;
  pointer-events: none;
}

.gm-wa.gm-dentro::before {
  animation: gm-wa-pulsa 6s var(--gm-curva) 2s infinite;
}

@keyframes gm-wa-pulsa {
  0% { transform: scale(1); opacity: 0.5; }
  14% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

.gm-wa .gm-wa-txt {
  transition: max-width 380ms var(--gm-mola), opacity 260ms var(--gm-curva);
}

/* --------------------------------------------------------------------------- */
/* 13. imagens: chegada suave em vez de “pop”                                   */
/* --------------------------------------------------------------------------- */

.gm-img {
  opacity: 0;
  transition: opacity 620ms var(--gm-curva);
}

.gm-img.gm-img-pronta {
  opacity: 1;
}

/* --------------------------------------------------------------------------- */
/* 14. transição entre páginas                                                  */
/* --------------------------------------------------------------------------- */

.gm-js body {
  animation: gm-pagina-entra 420ms var(--gm-curva) both;
}

@keyframes gm-pagina-entra {
  from { opacity: 0.62; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

html.gm-a-sair body {
  opacity: 0.25;
  transform: translate3d(0, -6px, 0);
  transition:
    opacity 200ms var(--gm-curva),
    transform 200ms var(--gm-curva);
}

/* --------------------------------------------------------------------------- */
/* 15. estados de rato — só onde há mesmo um rato                               */
/* --------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .gm-cartao:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.55);
  }

  .gm-cartao:hover .gm-cartao-mascara img,
  .gm-cartao:hover .gm-cartao-mascara video,
  .gm-cartao:focus-visible .gm-cartao-mascara img {
    transform: scale(1.06);
  }

  .gm-cartao:hover::before,
  .gm-cartao:focus-visible::before {
    opacity: 1;
    transform: none;
  }

  .gm-cartao:hover::after,
  .gm-cartao:focus-visible::after {
    opacity: 1;
    transform: translate3d(2px, 0, 0);
  }

  .gm-botao:hover {
    transform: translate3d(0, -2px, 0);
  }

  /* a bolha nasce por BAIXO do botão: com escala 11 não chegava à aresta de
     cima e ficava um fio da cor de repouso a atravessar o topo do botão */
  .gm-botao:hover > [data-framer-name="Bg"] {
    transform: scale(15);
  }

  /* Só quando a cor do inverso foi MEDIDA (data-gm-inverso). Sem medida não se
     mexe na cor do rótulo: o branco às cegas herdado do tema escuro era o que
     fazia as ligações do rodapé desaparecerem sobre fundo claro. */
  .gm-botao[data-gm-inverso="1"]:hover > div:not([data-framer-name]) {
    --extracted-r6o4lv: var(--gm-botao-inverso) !important;
  }

  .gm-botao:hover [data-framer-name="Icon"] {
    transform: translate3d(4px, 0, 0);
  }

  .gm-elo:hover [data-framer-name="Icon"] {
    transform: translate3d(3px, 0, 0);
  }

  .gm-wa:hover {
    transform: translate3d(0, -3px, 0) scale(1.03);
  }
}

/* o cartão continua a responder ao teclado mesmo sem rato */
.gm-cartao:focus-visible {
  transform: translate3d(0, -8px, 0);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------- */
/* 16. quem pediu menos movimento, recebe menos movimento                       */
/* --------------------------------------------------------------------------- */

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

  .gm-rv,
  .gm-js .gm-hero-passo {
    transform: none !important;
    filter: none !important;
    transition-duration: 260ms !important;
    transition-delay: 0ms !important;
  }

  .gm-palavra > i {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .gm-hero-fundo,
  .gm-imagem-lenta {
    transform: none !important;
    will-change: auto !important;
  }

  .gm-faixa[data-gm-anda="1"] {
    animation: none !important;
    transform: none !important;
  }

  .gm-wa.gm-dentro::before {
    animation: none !important;
  }

  .gm-js body,
  html.gm-a-sair body {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gm-passo-activo [data-framer-name="Desktop"] {
    transform: none !important;
  }

  .gm-cab-caixa[data-gm-recolhido="1"] {
    transform: none !important;
  }

  .gm-cartao,
  .gm-botao,
  .gm-elo,
  .gm-botao > [data-framer-name="Bg"],
  .gm-cartao .gm-cartao-mascara img,
  .gm-dif-regua,
  .gm-dif-cartao [data-framer-name="Label"],
  .gm-passo [data-framer-name="Desktop"],
  .gm-sub,
  .gm-sub a,
  .gm-mnav,
  .gm-mnav > * {
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }

  .gm-dif-regua { transform: scaleX(1) !important; }
  .gm-dif-cartao [data-framer-name="Label"] { transform: none !important; opacity: 1 !important; }
}

/* --------------------------------------------------------------------------- */
/* 17. medidas pequenas                                                         */
/* --------------------------------------------------------------------------- */

@media (max-width: 809px) {
  /* no telemóvel a barra encolhe menos (já é baixa) */
  .gm-cab[data-gm-pousado="1"]:not([data-gm-menu="1"]) {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .gm-faixa-item {
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
  }
}