/* ==========================================================================
   Font Utility Classes
   --------------------------------------------------------------------------
   Helpers gerados pelo layout para alternar familias tipograficas quando
   alguma classe especifica for usada no HTML.
   ========================================================================== */

.font-geist {
  font-family: 'Geist', sans-serif !important;
}

.font-roboto {
  font-family: 'Roboto', sans-serif !important;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif !important;
}

.font-poppins {
  font-family: 'Poppins', sans-serif !important;
}

.font-playfair {
  font-family: 'Playfair Display', serif !important;
}

.font-instrument-serif {
  font-family: 'Instrument Serif', serif !important;
}

.font-merriweather {
  font-family: 'Merriweather', serif !important;
}

.font-bricolage {
  font-family: 'Bricolage Grotesque', sans-serif !important;
}

.font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.font-manrope {
  font-family: 'Manrope', sans-serif !important;
}

.font-space-grotesk {
  font-family: 'Space Grotesk', sans-serif !important;
}

.font-work-sans {
  font-family: 'Work Sans', sans-serif !important;
}

.font-pt-serif {
  font-family: 'PT Serif', serif !important;
}

.font-geist-mono {
  font-family: 'Geist Mono', monospace !important;
}

.font-space-mono {
  font-family: 'Space Mono', monospace !important;
}

.font-quicksand {
  font-family: 'Quicksand', sans-serif !important;
}

.font-nunito {
  font-family: 'Nunito', sans-serif !important;
}

/* ==========================================================================
   Base Typography
   --------------------------------------------------------------------------
   Fonte principal usada no corpo da pagina.
   ========================================================================== */

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial;
}

/* ==========================================================================
   Company Logo Marquee
   --------------------------------------------------------------------------
   Faixa animada para logos das empresas. Para adicionar mais empresas, copie
   outro .company-logo-item no HTML e troque o src da imagem.
   ========================================================================== */

.company-logo-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
}

.company-logo-marquee::before,
.company-logo-marquee::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  width: 5rem;
  height: 100%;
  pointer-events: none;
}

.company-logo-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgb(10 10 10), transparent);
}

.company-logo-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgb(10 10 10), transparent);
}

.company-logo-track {
  display: flex;
  width: max-content;
  gap: 4rem;
  animation: company-logo-scroll 18s linear infinite;
}

.company-logo-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 3rem;
}

.company-logo-item-devwk {
  width: 12rem;
  height: 3.75rem;
}

.company-logo-item img {
  display: block;
  max-width: 100%;
  max-height: 2.5rem;
  object-fit: contain;
  filter: grayscale(1) saturate(0) brightness(1.25) contrast(1.05);
  opacity: 0.86;
}

.company-logo-item img.company-logo-devwk {
  max-height: 3.75rem;
  transform: scale(1.28);
}

@keyframes company-logo-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 2rem));
  }
}

/* ==========================================================================
   Offline Scroll And Visibility Fixes
   --------------------------------------------------------------------------
   Regras herdadas do export para evitar travas de scroll, loaders e elementos
   invisiveis quando o layout e aberto localmente.
   ========================================================================== */

html,
body {
  overflow: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
  scroll-behavior: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body,
.wrapper,
main,
#__next,
#app,
.page,
.content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.loader,
.preloader,
.loading,
[class*='loader'],
[class*='preloader'] {
  display: none !important;
  opacity: 0 !important;
}

.word-inner,
.char,
.line,
[data-aos],
[data-scroll],
.hero-text span,
.hero-fade,
[class*='hero'] span {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ==========================================================================
   Animation Reset Helpers
   --------------------------------------------------------------------------
   Mantem elementos gerados por Tailwind visiveis quando animacoes externas
   nao sao executadas no ambiente local.
   ========================================================================== */

.translate-y-full,
.translate-x-full,
.-translate-y-full,
.-translate-x-full,
.translate-y-1\/2,
.-translate-y-1\/2,
.translate-y-\[100\%\],
.translate-y-\[110\%\] {
  transform: none !important;
}

.opacity-0,
[class*='opacity-0'] {
  opacity: 1 !important;
}

.scale-0,
.scale-50,
.scale-75 {
  transform: none !important;
}

/* ==========================================================================
   Lenis And Layout Safety
   --------------------------------------------------------------------------
   Evita que wrappers de scroll suave ou containers flex cortem o conteudo.
   ========================================================================== */

html.lenis,
html.lenis-smooth,
body.lenis,
body.lenis-smooth,
.lenis-wrapper,
.lenis-content,
[data-lenis-prevent],
[data-scroll-container] {
  overflow: visible !important;
  height: auto !important;
}

body.flex.items-center,
body.flex.justify-center {
  align-items: flex-start !important;
  min-height: 100vh;
  height: auto !important;
}

main,
#__next,
#__nuxt,
#app,
.main-content {
  overflow: visible !important;
  height: auto !important;
}