:root{
  /* valores de fallback (mantêm o logo maior se JS falhar) */
  --logo-scale-desktop: 1.20;
  --logo-translate-desktop: -12%;

  --logo-scale-tablet: 1.14;
  --logo-translate-tablet: -8%;

  --logo-scale-mobile: 1.10;
  --logo-translate-mobile: -4%;
}

/* garante que a coluna esquerda não corte o logo ampliado */
.coluna-esquerda {
  overflow: visible;
}

/* Aplica escala + deslocamento usando a variável dinâmica --logo-dynamic-scale */
.logo-site {
  display: inline-block;
  position: relative;
  z-index: 30;
  transform-origin: left center;
  will-change: transform;
  /* scale usa --logo-dynamic-scale quando definido, senão cai back para o desktop fallback */
  transform: translateX(var(--logo-translate-desktop)) scale(var(--logo-dynamic-scale, var(--logo-scale-desktop)));
  transition: transform 160ms ease;
  pointer-events: none;
}

/* Caso o logo seja <img> interno */
.logo-site img {
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

/* Breakpoints: mantêm o translate padrão por tamanho, JS ajustará a escala dinamicamente */
@media (max-width: 1200px) {
  .logo-site {
    transform: translateX(var(--logo-translate-tablet)) scale(var(--logo-dynamic-scale, var(--logo-scale-tablet)));
  }
}
@media (max-width: 900px) {
  .logo-site {
    transform: translateX(var(--logo-translate-mobile)) scale(var(--logo-dynamic-scale, var(--logo-scale-mobile)));
  }
}