/* ═══════════════════════════════════════════════════════════════════════════
   Home — atalhos Propósito · Produtos · Sustentabilidade · Carreiras

   A faixa cinza logo abaixo do banner (container 308446f): quatro links, cada
   um com ícone amarelo e título branco. No site no ar eles não reagem ao
   mouse; aqui ganham um hover discreto, em três detalhes que acontecem juntos:

     1. fundo: um véu claro (6% de branco) com cantos arredondados — mostra a
        área clicável inteira, não só o texto;
     2. ícone: sobe 3px e cresce 8%;
     3. título: um traço amarelo cresce da esquerda para a direita por baixo.

   Nada muda de lugar nem de tamanho na faixa: tudo é transform, opacidade e
   cor de fundo, então os vizinhos não se mexem. Vale igual para quem navega
   pelo teclado (:focus-visible). Em tela de toque não há hover — o link só
   abre, como antes.
   ═══════════════════════════════════════════════════════════════════════════ */

.elementor-element-308446f > .e-con-inner > a.e-con {
  border-radius: 12px;
  transition: background-color .25s ease;
}
.elementor-element-308446f > .e-con-inner > a.e-con .elementor-icon {
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
.elementor-element-308446f > .e-con-inner > a.e-con h3 {
  position: relative;
  display: inline-block;
}
.elementor-element-308446f > .e-con-inner > a.e-con h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: #FEB735;              /* o amarelo dos ícones */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

@media (hover: hover) {
  .elementor-element-308446f > .e-con-inner > a.e-con:hover { background-color: rgba(255, 255, 255, .06); }
  .elementor-element-308446f > .e-con-inner > a.e-con:hover .elementor-icon { transform: translateY(-3px) scale(1.08); }
  .elementor-element-308446f > .e-con-inner > a.e-con:hover h3::after { transform: scaleX(1); }
}
.elementor-element-308446f > .e-con-inner > a.e-con:focus-visible {
  background-color: rgba(255, 255, 255, .06);
  outline: 2px solid #FEB735;
  outline-offset: 2px;
}
.elementor-element-308446f > .e-con-inner > a.e-con:focus-visible .elementor-icon { transform: translateY(-3px) scale(1.08); }
.elementor-element-308446f > .e-con-inner > a.e-con:focus-visible h3::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .elementor-element-308446f > .e-con-inner > a.e-con .elementor-icon,
  .elementor-element-308446f > .e-con-inner > a.e-con h3::after { transition: none; }
  .elementor-element-308446f > .e-con-inner > a.e-con:hover .elementor-icon,
  .elementor-element-308446f > .e-con-inner > a.e-con:focus-visible .elementor-icon { transform: none; }
}