/* Restaura comportamentos dos cards que dependiam do JS do Framer
   (removido no export offline). */

/* Efeito hover: fundo escuro e textos claros, como no site original */
a.framer-7UoBi {
  transition: background-color 0.3s ease;
}
a.framer-7UoBi .framer-text {
  transition: color 0.3s ease;
}
a.framer-7UoBi:hover {
  background-color: rgb(14, 16, 17) !important;
}
a.framer-7UoBi:hover .framer-text {
  --framer-text-color: rgb(255, 255, 255) !important;
  color: rgb(255, 255, 255) !important;
}
/* data e subtítulo levemente esmaecidos, como no original */
a.framer-7UoBi:hover .framer-12e9ry7 .framer-text,
a.framer-7UoBi:hover .framer-3am14p .framer-text {
  --framer-text-color: rgba(255, 255, 255, 0.65) !important;
  color: rgba(255, 255, 255, 0.65) !important;
}
/* regra da variante de hover que já veio no export (classe .hover
   seria aplicada pelo JS do Framer; replicada aqui com :hover) */
a.framer-7UoBi.framer-v-g0by6k:hover .framer-1aavbmy {
  height: var(--framer-aspect-ratio-supported, 200px);
}

/* Esconde o indicador de "carregando" do scroll infinito, que sem o JS
   ficava travado na tela */
div[data-framer-name="Loading"] {
  display: none !important;
}

/* Menu de celular (aberto pelo botão hambúrguer via menu.js).
   Visual copiado do site original: painel branco em tela cheia com os
   links em Anton SC, empilhados no centro. */
#menu-celular {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  background-color: rgb(255, 255, 255);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
body.menu-celular-aberto #menu-celular {
  opacity: 1;
  visibility: visible;
  transform: none;
}
#menu-celular a {
  font-family: 'Anton SC', sans-serif;
  font-size: 40px;
  line-height: 1;
  color: rgb(30, 30, 30);
  text-decoration: none;
  text-transform: uppercase;
}
/* barra do cabeçalho acima do painel, para o botão continuar acessível */
#menu-celular ~ * nav,
nav {
  position: relative;
}
body.menu-celular-aberto nav {
  z-index: 10;
}
/* botão vira X quando aberto */
[data-framer-name="Menu Toggle Inner"] div[data-framer-name="Line"] {
  transition: transform 0.3s ease;
}
body.menu-celular-aberto [data-framer-name="Menu Toggle Inner"] div[data-framer-name="Line"]:first-child {
  transform: translateY(3px) rotate(45deg) !important;
}
body.menu-celular-aberto [data-framer-name="Menu Toggle Inner"] div[data-framer-name="Line"]:last-child {
  transform: translateY(-3px) rotate(-45deg) !important;
}

/* Modo escuro por inversão de cores (ativado pela pílula do sol, via
   menu.js). O filtro no elemento raiz não quebra position:fixed (exceção
   da especificação). Fotos e vídeos são contra-invertidos para manterem
   as cores naturais; o rodapé e os cards de Ações (texto sobreposto a
   foto) são contra-invertidos por inteiro — neles o visual claro já é o
   correto. */
html.tema-escuro {
  filter: invert(1) hue-rotate(180deg);
  background: #f1efef;
  color-scheme: dark;
}
html.tema-escuro :is(img:not([src$=".svg"]), video):not(#footer *):not(.framer-I4tAf *) {
  filter: invert(1) hue-rotate(180deg);
}
html.tema-escuro #footer,
html.tema-escuro .framer-I4tAf {
  filter: invert(1) hue-rotate(180deg);
}
/* pílula do tema: indica que é clicável */
[data-framer-name="Theme Toggle"],
.pilula-tema {
  cursor: pointer;
}

/* Zoom sutil na imagem dos cards da página Ações ao passar o mouse.
   A regra da variante .hover já vinha no export; o JS do Framer é que
   aplicava a classe — replicada com :hover. */
.framer-I4tAf .framer-1pffzda {
  transition: width 0.4s ease, height 0.4s ease;
}
.framer-I4tAf:hover .framer-1pffzda {
  width: 103% !important;
  height: 103% !important;
}

/* Transição suave entre páginas (fade), no lugar do SPA do Framer.
   Funciona em Chrome/Edge/Safari; no Firefox a navegação fica normal. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation-duration: 0.25s;
}
::view-transition-new(root) {
  animation-duration: 0.25s;
}

/* Sublinhado animado nos links do cabeçalho e do rodapé.
   O traço ("Border") já vem no HTML com largura 1% escondido à esquerda;
   o JS do Framer trocava a variante no hover — replicado aqui via :hover. */
a[data-highlight] div[data-framer-name="Border"] {
  transition: width 0.3s ease, left 0.3s ease;
}
a[data-highlight]:hover div[data-framer-name="Border"] {
  width: 100% !important;
  left: 0 !important;
}