/* ===================================================================
   Galiza Seguros, camada de movimento e acabamento.

   Carregado depois de site.css e complementos.css, de proposito: as
   regras daqui ajustam o que ja existe sem reescrever nada.

   Nada aqui muda texto, endereco, campo de formulario ou evento de
   medicao. E so forma, movimento e estado.

   Organizacao:
     1. Tokens e base segura
     2. Entrada dos blocos
     3. Parallax
     4. Lista editorial de seguros
     5. Bento de diferenciais
     6. Sanfona com altura animada
     7. Acabamento: foco, pressionado, cartoes
     8. Menos movimento
   =================================================================== */

/* ---------- 1. Tokens e base segura ---------- */

:root {
  --gz-curva: cubic-bezier(.16, 1, .3, 1);
  --gz-entrada: 700ms;
  --gz-rapido: 250ms;
}

/*
 * A animacao de entrada nasce com opacidade zero e so aparece quando o
 * JavaScript marca o elemento. Se o script falhar, atrasar ou for bloqueado,
 * metade da home sumia. Com o portao abaixo, o estado escondido so existe
 * quando ha JavaScript vivo para desfaze-lo.
 */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- 2. Entrada dos blocos ---------- */

.reveal {
  transition:
    opacity var(--gz-entrada) var(--gz-curva),
    transform var(--gz-entrada) var(--gz-curva);
  will-change: opacity, transform;
}
.reveal-in { will-change: auto; }

/* Variacoes, para a pagina nao repetir o mesmo gesto de cima a baixo */
.reveal--sobe { transform: translateY(22px); }
.reveal--escala { transform: translateY(14px) scale(.985); }
.reveal--esquerda { transform: translateX(-22px); }
.reveal--direita { transform: translateX(22px); }
.reveal--escala.reveal-in,
.reveal--esquerda.reveal-in,
.reveal--direita.reveal-in,
.reveal--sobe.reveal-in { transform: none; }

/* ---------- 3. Parallax ---------- */

/*
 * O deslocamento quem aplica e o movimento.js.
 *
 * Cheguei a escrever este efeito com animacao ligada a rolagem, que e o jeito
 * moderno e roda fora da linha principal. Tirei por dois motivos: o Safari de
 * iPhone mais antigo nao entende, e boa parte do acesso do site vem de
 * celular; e nao da para confirmar o comportamento em teste aqui. Um unico
 * caminho, que eu consigo verificar, vale mais que dois caminhos e uma
 * suposicao.
 *
 * O CSS daqui cuida so do estado parado: o recorte, o zoom que da folga para
 * a imagem andar sem abrir buraco, e a camada de fundo posicionada.
 */
.gz-par { overflow: hidden; }
.gz-par > img,
.gz-par > .gz-par-alvo {
  display: block;
  transform: translate3d(0, 0, 0) scale(var(--gz-par-zoom, 1.08));
  will-change: transform;
}

/* Faixa de fundo que anda mais devagar que o conteudo */
.gz-fundo-par { position: relative; overflow: hidden; }
.gz-fundo-par > .gz-fundo-par__camada {
  position: absolute;
  inset: -12% 0;
  pointer-events: none;
  will-change: transform;
}

/*
 * Segundo brilho da faixa de chamada final. Fica no CSS, e nao em classe do
 * Tailwind, porque o site.css e compilado e nao ha etapa de build aqui: uma
 * classe nova no HTML sairia sem regra nenhuma.
 */
.gz-cta-brilho {
  position: absolute;
  left: -6rem;
  bottom: -3rem;
  width: 17rem;
  height: 17rem;
  border-radius: 50%;
  background: rgba(37, 211, 102, .12);
  filter: blur(64px);
  pointer-events: none;
}

/* ---------- 4. Lista editorial de seguros ---------- */

/*
 * Substitui os tres cartoes iguais lado a lado. O nome do seguro é o
 * elemento principal, cresce na tela e desliza no hover. Mesmo link, mesmo
 * texto, mesma ordem: muda só a forma.
 */
.gz-lista-ed {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #E6EBF2;
}
.gz-lista-ed > li { border-bottom: 1px solid #E6EBF2; }

.gz-item-ed {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem .25rem;
  color: inherit;
  text-decoration: none;
  transition: padding var(--gz-rapido) var(--gz-curva);
}
.gz-item-ed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 128, 255, .07) 0%, rgba(0, 128, 255, 0) 70%);
  opacity: 0;
  transition: opacity var(--gz-rapido) var(--gz-curva);
  pointer-events: none;
}
.gz-item-ed:hover::before,
.gz-item-ed:focus-visible::before { opacity: 1; }
.gz-item-ed:hover,
.gz-item-ed:focus-visible { padding-left: 1rem; padding-right: 1rem; text-decoration: none; }

.gz-item-ed__ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: #EAF4FF;
  color: #0080FF;
  transition: background var(--gz-rapido) var(--gz-curva), color var(--gz-rapido) var(--gz-curva);
}
.gz-item-ed:hover .gz-item-ed__ic { background: #0080FF; color: #FFF; }

.gz-item-ed__txt { position: relative; min-width: 0; }
.gz-item-ed__nome {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #253D80;
}
.gz-item-ed__apoio {
  display: block;
  margin-top: .25rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #5A6880;
  max-width: 62ch;
}
.gz-item-ed__seta {
  position: relative;
  flex: none;
  color: #9FB2CC;
  transition: transform var(--gz-rapido) var(--gz-curva), color var(--gz-rapido) var(--gz-curva);
}
.gz-item-ed:hover .gz-item-ed__seta {
  transform: translateX(4px);
  color: #0080FF;
}

@media (min-width: 768px) {
  .gz-item-ed { padding: 1.75rem .5rem; gap: 1.5rem; }
  .gz-item-ed__nome { font-size: 1.625rem; }
}

/* ---------- 5. Bento de diferenciais ---------- */

/*
 * Seis itens numa grade com tamanhos diferentes, em vez de seis cartoes
 * iguais. O numero de celulas e exatamente o numero de itens.
 */
.gz-bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
.gz-bento__item {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: 1.5rem;
  border-radius: 20px;
  background: #FFF;
  border: 1px solid #E6EBF2;
  transition: transform var(--gz-rapido) var(--gz-curva), box-shadow var(--gz-rapido) var(--gz-curva);
}
.gz-bento__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(37, 61, 128, .3);
}
.gz-bento__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E9F9EF;
  color: #0E6B4E;
}
.gz-bento__t {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: #253D80;
}
.gz-bento__p {
  font-size: .9375rem;
  line-height: 1.6;
  color: #5A6880;
  margin: 0;
}

/* A celula de destaque usa o azul da marca e ocupa mais espaco */
.gz-bento__item--marca {
  background: linear-gradient(145deg, #0080FF 0%, #253D80 100%);
  border-color: transparent;
  color: #FFF;
}
.gz-bento__item--marca .gz-bento__t { color: #FFF; }
.gz-bento__item--marca .gz-bento__p { color: rgba(255, 255, 255, .84); }
.gz-bento__item--marca .gz-bento__ic { background: rgba(255, 255, 255, .16); color: #FFF; }
.gz-bento__brilho {
  position: absolute;
  right: -30%;
  top: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 211, 102, .28), transparent 62%);
  pointer-events: none;
}

/*
 * Em duas colunas ninguem ocupa espaco dobrado: com seis itens, qualquer
 * celula maior deixaria um buraco na ultima linha. O destaque mantem so a
 * cor da marca.
 */
@media (min-width: 640px) {
  .gz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * Em tres colunas o destaque ocupa duas colunas por duas linhas: sao quatro
 * celulas dele mais uma de cada um dos outros cinco, o que fecha nove
 * celulas em tres linhas cheias. A classe --grande so vem do PHP quando o
 * numero de itens e multiplo de tres, que e quando a conta fecha.
 */
@media (min-width: 1024px) {
  .gz-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .gz-bento__item { padding: 1.75rem; }
  .gz-bento__item--grande {
    grid-column: span 2;
    grid-row: span 2;
    justify-content: flex-end;
    padding: 2.25rem;
  }
  .gz-bento__item--grande .gz-bento__ic { width: 52px; height: 52px; margin-bottom: auto; }
  .gz-bento__item--grande .gz-bento__t { font-size: 1.75rem; letter-spacing: -.02em; }
  .gz-bento__item--grande .gz-bento__p { font-size: 1.0625rem; max-width: 46ch; }
  .gz-bento__item--grande .gz-bento__brilho { width: 48%; right: -12%; top: -18%; }
}

/* ---------- 5a. Hero escuro com foto ao fundo ---------- */

/*
 * Usado na pagina da empresa. A foto fica atras, bem apagada, e anda mais
 * devagar que o texto na rolagem. O azul da marca continua mandando: a foto
 * da ambiente, nao protagonismo.
 */
.gz-heroe__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  opacity: .45;
}

/*
 * Veu em degrade, mais fechado onde o texto comeca. Sem ele o contraste
 * depende do trecho da foto que calhar de ficar atras da frase, e isso muda
 * conforme a largura da tela.
 */
.gz-heroe__veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, #253D80 10%, rgba(37, 61, 128, .82) 44%, rgba(37, 61, 128, .34) 100%),
    linear-gradient(to bottom, rgba(16, 28, 66, .45) 0%, rgba(16, 28, 66, 0) 40%);
}

/* A trilha de navegacao e escrita para fundo claro; aqui ela se inverte */
.gz-heroe__trilha a { color: rgba(255, 255, 255, .72); }
.gz-heroe__trilha a:hover { color: #FFF; }
.gz-heroe__trilha svg { color: rgba(255, 255, 255, .45); }
.gz-heroe__trilha [aria-current] { font-weight: 600; color: #FFF; }

/* Etiqueta acima do titulo, na versao para fundo escuro */
.gz-heroe__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .375rem .875rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFF;
}
.gz-heroe__etiqueta svg { color: #25D366; }

/*
 * Variante para os topos que ja tem uma foto em cartao: a home e as paginas
 * de seguro. A foto do fundo fica bem mais apagada, porque ali ela e textura,
 * nao assunto. Quem manda na imagem e o cartao.
 */
.gz-heroe--cartao .gz-heroe__foto { opacity: .3; }
.gz-heroe--cartao .gz-heroe__veu {
  background:
    linear-gradient(100deg, #253D80 16%, rgba(37, 61, 128, .88) 48%, rgba(37, 61, 128, .6) 100%),
    linear-gradient(to bottom, rgba(16, 28, 66, .45) 0%, rgba(16, 28, 66, 0) 42%);
}

/*
 * Sobre o azul escuro, o botao secundario branco some no fundo claro do
 * hover. Aqui ele vira contorno claro, que e o que funciona sobre escuro.
 */
.gz-heroe .btn-contorno-claro {
  background: transparent;
  color: #FFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}
.gz-heroe .btn-contorno-claro:hover {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}

/* O cartao da foto ganha respiro contra o escuro */
.gz-heroe .frame-mark { box-shadow: 0 30px 70px -40px rgba(5, 12, 35, .9); }

/* Selo de "cotacao sem custo", na versao para fundo escuro */
.gz-heroe__selo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem;
  border-radius: 999px;
  background: rgba(37, 211, 102, .14);
  font-size: .8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
}
.gz-heroe__selo svg { color: #25D366; flex: none; }

/*
 * Link dentro do texto do topo. O azul da marca some sobre o azul escuro,
 * entao aqui ele clareia. Usado na pagina de sinistro, que aponta para a
 * assistencia 24 horas no meio do paragrafo.
 */
.gz-heroe a.link-underline { color: #9CCBFF; }
.gz-heroe a.link-underline:hover { color: #FFF; }

/* ---------- 5a-bis. Topo das landing pages ---------- */

/*
 * A ordem no celular manda: titulo, formulario, prova. Quem chega de anuncio
 * precisa alcancar o campo sem rolar um folheto inteiro, e ao mesmo tempo
 * nao pode cair num formulario sem saber onde esta.
 *
 * No desktop a grade recoloca: titulo e prova na coluna da esquerda,
 * formulario na direita, ocupando as duas linhas.
 */
.gz-lp-topo {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .gz-lp-topo {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: 2.5rem 3.5rem;
    align-items: start;
  }
  .gz-lp-topo__titulo { grid-column: 1; grid-row: 1; }
  .gz-lp-topo__form { grid-column: 2; grid-row: 1 / span 2; }
  .gz-lp-topo__provas { grid-column: 1; grid-row: 2; }
}

/* ---------- 5b. Prova social ---------- */

/*
 * Faixa curta, para quem chega de anuncio. Fica acima do formulario de
 * proposito: quem nao conhece a empresa precisa ver gente real antes de
 * entregar telefone.
 */
.gz-prova {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem 1rem;
  border-radius: 999px;
  background: #FFF;
  border: 1px solid #E6EBF2;
  box-shadow: 0 2px 10px -6px rgba(37, 61, 128, .25);
  max-width: 100%;
}

.gz-prova__fotos { display: flex; flex: none; }
.gz-prova__ini {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: -10px;
  border-radius: 50%;
  background: #EAF4FF;
  border: 2px solid #FFF;
  color: #0069D6;
  font-size: .75rem;
  font-weight: 700;
}
.gz-prova__ini:last-child { margin-right: 0; }

.gz-prova__txt { min-width: 0; line-height: 1.2; }
.gz-prova__estrelas { display: block; color: #F5A524; font-size: .8125rem; letter-spacing: .5px; }
.gz-prova__linha {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  color: #5A6880;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gz-prova__link {
  flex: none;
  margin-left: .25rem;
  padding-left: .875rem;
  border-left: 1px solid #E6EBF2;
  font-size: .8125rem;
  font-weight: 600;
  color: #0069D6;
  text-decoration: none;
}
.gz-prova__link:hover { text-decoration: underline; }

/* Sobre fundo azul escuro, como no hero da pagina da empresa */
.gz-prova--escuro {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}
.gz-prova--escuro .gz-prova__ini { background: rgba(255, 255, 255, .16); border-color: transparent; color: #FFF; }
.gz-prova--escuro .gz-prova__linha { color: rgba(255, 255, 255, .78); }
.gz-prova--escuro .gz-prova__link { color: #FFF; border-left-color: rgba(255, 255, 255, .22); }

/*
 * Em tela estreita a faixa ocupa a largura toda. Uma inicial sai e o texto
 * encolhe um ponto, para a linha nao quebrar em tres e virar um bloco alto.
 */
@media (max-width: 460px) {
  .gz-prova { display: flex; gap: .625rem; padding: .5rem .75rem; }
  .gz-prova__ini:nth-child(4) { display: none; }
  .gz-prova__linha { font-size: .75rem; }
  .gz-prova__link { margin-left: auto; padding-left: .625rem; }
}

/* Bloco completo */
.gz-aval__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
.gz-aval__selo {
  flex: none;
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
  background: #FFF;
  border: 1px solid #E6EBF2;
  text-align: center;
}
.gz-aval__nota { font-size: 2rem; font-weight: 700; line-height: 1; color: #253D80; }
.gz-aval__estrelas { color: #F5A524; font-size: .9375rem; letter-spacing: 1px; }
.gz-aval__selo .gz-aval__estrelas { margin-top: .5rem; }
.gz-aval__total { margin-top: .5rem; font-size: .8125rem; color: #7A869C; }

.gz-aval__grade {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .gz-aval__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Carrossel --- */

/*
 * Sem JavaScript isto ja e uma lista que rola de lado, com o dedo ou com a
 * barra: o conteudo nunca fica preso. O movimento.js acrescenta o giro
 * automatico, o laco infinito e o arrastar com o mouse.
 *
 * Quantos cabem: um ate 640px, dois ate 1024px, tres acima. A largura de
 * cada item sai da propria grade, descontando o espaco entre eles, para o
 * terceiro cartao nunca aparecer pela metade.
 */
.gz-aval__palco {
  position: relative;
  margin-top: 2.5rem;
  --gz-aval-vao: 1.25rem;
  --gz-aval-por-vez: 1;
}
@media (min-width: 640px) { .gz-aval__palco { --gz-aval-por-vez: 2; } }
@media (min-width: 1024px) { .gz-aval__palco { --gz-aval-por-vez: 3; } }

.gz-aval__trilho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--gz-aval-vao);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* o cartao tem sombra ao passar o mouse; sem folga ela sai cortada */
  padding-bottom: .5rem;
}
.gz-aval__trilho::-webkit-scrollbar { display: none; }

.gz-aval__item {
  flex: 0 0 calc(
    (100% - (var(--gz-aval-por-vez) - 1) * var(--gz-aval-vao)) / var(--gz-aval-por-vez)
  );
  min-width: 0;
  scroll-snap-align: start;
}

/* Enquanto o dedo ou o mouse arrasta, o encaixe atrapalha e o texto nao
   pode ser selecionado sem querer */
.gz-aval__trilho.is-arrastando {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
html.js .gz-aval__trilho { cursor: grab; }

.gz-aval__controles {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
  justify-content: flex-end;
}
.gz-aval__seta {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid #E6EBF2;
  color: #253D80;
  transition: background var(--gz-rapido) var(--gz-curva), color var(--gz-rapido) var(--gz-curva), border-color var(--gz-rapido) var(--gz-curva);
}
.gz-aval__seta:hover { background: #0080FF; border-color: #0080FF; color: #FFF; }
.gz-aval__seta[data-carrossel-ir="-1"] svg { transform: rotate(180deg); }

.gz-aval__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1.5rem;
  border-radius: 20px;
  background: #FFF;
  border: 1px solid #E6EBF2;
}
.gz-aval__texto {
  flex: 1;
  margin: 1rem 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: #5A6880;
}
.gz-aval__pe {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #EEF1F6;
}
.gz-aval__ini {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: #EAF4FF;
  color: #0069D6;
  font-size: .875rem;
  font-weight: 700;
}
.gz-aval__nome { display: block; font-size: .875rem; font-weight: 600; color: #253D80; }
.gz-aval__origem { display: block; font-size: .75rem; color: #7A869C; }

/* ---------- 6. Sanfona com altura animada ---------- */

/*
 * O painel abria e fechava de uma vez, com o atributo hidden. Agora a altura
 * acompanha, o que deixa claro de onde o texto saiu. O hidden continua sendo
 * usado quando nao ha JavaScript, entao o conteudo nunca fica preso.
 */
html.js [data-sanfona-painel] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--gz-curva);
}
html.js [data-sanfona-painel].is-aberto { grid-template-rows: 1fr; }

/*
 * O item da grade nao pode ter espacamento nenhum. Com a faixa em 0fr a
 * altura do conteudo vai a zero, mas o padding do item continua ocupando
 * lugar: era por isso que a sanfona fechada deixava um vao. O espacamento
 * fica na camada de dentro, que o movimento.js cria.
 */
html.js [data-sanfona-painel] > .gz-sanfona__corte {
  overflow: hidden;
  min-height: 0;
  padding: 0;
  margin: 0;
}

/* ---------- 7. Acabamento ---------- */

/* Foco visivel de teclado em tudo que recebe foco */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #0080FF;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Resposta ao clique: o elemento cede um pouco */
@media (prefers-reduced-motion: no-preference) {
  a[class*="btn"]:active,
  button[class*="btn"]:active,
  .gz-item-ed:active,
  .gz-bento__item:active { transform: scale(.985); }
}

/* Cartoes de seguro e de artigo com a mesma altura e o rodape alinhado */
.gz-altura-igual { display: flex; flex-direction: column; height: 100%; }
.gz-altura-igual > :last-child { margin-top: auto; }

/* Botao em envio: a pessoa precisa ver que algo esta acontecendo */
.gz-enviando { position: relative; pointer-events: none; opacity: .75; }
.gz-enviando::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gz-gira 700ms linear infinite;
}
@keyframes gz-gira { to { transform: rotate(360deg); } }

/* Logos das seguradoras: cinza que ganha cor ao passar o mouse */
.gz-logos img {
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--gz-rapido) var(--gz-curva), opacity var(--gz-rapido) var(--gz-curva);
}
.gz-logos img:hover { filter: none; opacity: 1; }

/* ---------- 8. Menos movimento ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--sobe,
  .reveal--escala,
  .reveal--esquerda,
  .reveal--direita {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .gz-par > img,
  .gz-par > .gz-par-alvo,
  .gz-fundo-par > .gz-fundo-par__camada {
    transform: none !important;
    animation: none !important;
  }
  html.js [data-sanfona-painel] { transition: none; }
  .gz-enviando::after { animation: none; }
}

/* ---------- 9. Campos isca ---------- */

/*
 * Escondidos por CSS, nao por type=hidden: campo type=hidden e facil de um
 * robo reconhecer e pular, e a isca so funciona se parecer um campo normal
 * para quem le o HTML. Para quem usa leitor de tela, o aria-hidden no
 * contorno ja tira do caminho, e o tabindex -1 tira do teclado.
 *
 * A primeira versao escondia com left: -9999px e isso criou rolagem
 * horizontal na pagina de seguro no celular. Aqui esta o padrao de recorte,
 * que ocupa um pixel no lugar onde ja esta e nao empurra nada.
 */
.campo-isca {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}