/* ==========================================================================
   Modern Home CSS - Premium Styles
   ========================================================================== */

/* 1. TYPOGRAPHY
   Substituindo fontes originais por Inter (Leitura) e Outfit (Impacto/Títulos).
   Ignoramos ícones (ex: .mdi) para não quebrar os símbolos. */
body, p, span:not([class*="mdi"]), a, div, li {
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, 
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* Deixar o texto um pouco mais antialiased para parecer mais suave (efeito macOS) */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}


/* 2. BUTTONS (Premium Micro-interactions)
   Botões mais vivos com elevação (transform) e sombras dinâmicas. */
[id^="ButtonComponent"], .sitebuilder-element-button {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
}

[id^="ButtonComponent"]:hover, .sitebuilder-element-button:hover {
  transform: translateY(-3px) scale(1.02) !important;
  /* Uma sombra azulada/verde dependendo do botão, usamos uma sombra suave premium */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
  filter: brightness(1.05) !important;
}

[id^="ButtonComponent"]:active, .sitebuilder-element-button:active {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}


/* 3. IMAGES (Subtle Zoom on hover)
   Aplica um efeito suave de zoom nas imagens da página, excluindo imagens do menu (ex: logo) */
[id^="ImageComponent"]:not(nav [id^="ImageComponent"], .menu-container [id^="ImageComponent"]), 
.sitebuilder-element-image:not(nav .sitebuilder-element-image, .menu-container .sitebuilder-element-image) {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease !important;
}

[id^="ImageComponent"]:not(nav [id^="ImageComponent"], .menu-container [id^="ImageComponent"]):hover, 
.sitebuilder-element-image:not(nav .sitebuilder-element-image, .menu-container .sitebuilder-element-image):hover {
  transform: scale(1.03) !important;
  z-index: 10 !important;
  /* Sombra leve para destacar a imagem que recebeu o hover */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}


/* 4. SMOOTH SCROLLING 
   Deslizamento suave ao clicar em âncoras da página */
html {
  scroll-behavior: smooth !important;
}

/* 5. CUSTOM SCROLLBAR (Mac OS Style) */
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03) !important; 
}
::-webkit-scrollbar-thumb {
  background: rgba(66, 104, 156, 0.5) !important; 
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(66, 104, 156, 0.8) !important; 
}

/* 6. CARDS & BOXES (Flutuação) - Otimizado para não travar */
/* Limitando apenas a grandes painéis para poupar a placa de vídeo */
.sitebuilder-element-box {
  transition: transform 0.3s ease !important;
}
.sitebuilder-element-box:hover {
  transform: translateY(-2px) !important;
}

/* 7. TEXT SELECTION PREMIUM */
::selection {
  background: rgba(66, 104, 156, 0.3) !important;
  color: inherit !important;
}

/* Removido o FadeInSlide e Overlays automáticos pesados para melhorar a performance */