/**
 * Aços Capixaba - Estilos customizados
 * Paleta: brand-slate (#4A5B69), brand-orange (#F27F23)
 */

:root {
  --brand-slate: #4A5B69;
  --brand-slate-dark: #3d4a56;
  --brand-orange: #F27F23;
  --brand-orange-hover: #e06e15;
}

/* Imagem de fundo do hero (início) - Pixabay: industry/steel (baixada localmente) */
.hero-bg-image {
  background-color: var(--brand-slate);
  background-image: url('../assets/hero-bg.jpg');
}

/* Suavização de scroll */
html {
  scroll-behavior: smooth;
}

/* Animações de entrada */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out 0.2s forwards;
  opacity: 0;
}

/* Cards de produto - hover sutil */
.card-product {
  transform: translateY(0);
}

.card-product:hover {
  transform: translateY(-4px);
}

header.scrolled {
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.12);
  background-color: rgb(255 255 255 / 0.98);
}

header.scrolled .site-nav {
  height: 4rem;
}

header.scrolled .site-logo {
  height: 2.75rem;
}

header.scrolled .site-menu {
  gap: 1.25rem;
}

header.scrolled .nav-link {
  font-size: 0.875rem;
}

header.scrolled .btn-primary {
  font-size: 0.875rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

header.scrolled .site-menu-toggle {
  width: 1.75rem;
  height: 1.75rem;
}

@media (min-width: 768px) {
  header.scrolled .site-nav {
    height: 4.5rem;
  }

  header.scrolled .site-logo {
    height: 3.5rem;
  }

  header.scrolled .site-menu {
    gap: 1.75rem;
  }

  header.scrolled .nav-link,
  header.scrolled .btn-primary {
    font-size: 0.9375rem;
  }
}

/* Foco acessível */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

/* Placeholder do formulário */
input::placeholder,
textarea::placeholder {
  color: #9ca3af;
}