/* ============================================
   CUSTOM CSS — LP Consórcio Ademicon
   ============================================ */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Filtro: estado ativo dos botões */
.filter-btn.active {
  background-color: #D61C24;
  border-color: #D61C24;
  color: #FFFFFF;
}

.filter-btn:not(.active):hover {
  border-color: #D61C24;
  color: #D61C24;
}

/* Cards: animação de fade-in */
.product-card {
  animation: fadeInUp 0.5s ease-out both;
}

.product-card:nth-child(2) { animation-delay: 0.1s; }
.product-card:nth-child(3) { animation-delay: 0.2s; }

.product-card.hidden-card {
  display: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hamburger animação */
#menu-toggle.is-active .hamburger-line-1 {
  transform: translateY(8px) rotate(45deg);
}

#menu-toggle.is-active .hamburger-line-2 {
  opacity: 0;
}

#menu-toggle.is-active .hamburger-line-3 {
  transform: translateY(-8px) rotate(-45deg);
}

/* Header: sombra ao rolar */
#header.scrolled {
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08);
}

/* Botão flutuante WhatsApp: visível ao rolar */
#whatsapp-float.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Placeholder da imagem do consultor */
.fallback-img {
  display: none;
}

img:not([src]),
img[src=""] ~ .fallback-img,
img[onerror] ~ .fallback-img {
  display: flex;
}

/* Formulário: estados de erro */
.form-input.input-error {
  border-color: #D61C24;
}

.form-input.input-error:focus {
  border-color: #D61C24;
  box-shadow: 0 0 0 3px rgba(214, 28, 36, 0.15);
}

/* Formulário: estados de sucesso */
.form-input.input-success {
  border-color: #25D366;
}

/* Accessible focus styles */
*:focus-visible {
  outline: 2px solid #D61C24;
  outline-offset: 2px;
}

/* Select custom arrow override for dark backgrounds */
select option {
  padding: 8px 12px;
  font-family: 'Montserrat', sans-serif;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .product-card .h-48 {
    height: 200px;
  }
}

/* Animations for "Como Funciona" steps */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Print styles */
@media print {
  #header, #whatsapp-float, .filter-btn { display: none !important; }
  body { font-size: 12pt; }
}