/* ==========================================================================
   RESPONSIVE — Simao Tecnologia
   Ajustes mobile-first para os componentes definidos em components.css.
   Mobile já é o padrão nas regras acima; aqui tratamos exceções.
   ========================================================================== */

@media (max-width: 767px){
  .hero h1{ font-size: var(--fs-3xl); }
  .service-banner{ flex-direction: column; align-items: flex-start; }
  .product-placeholder,
  .product-image{ height: 220px; }
  .product-detail-placeholder,
  .product-detail-image{ height: 320px; }
  .min-vh-75{ min-height: auto; }
}

@media (max-width: 575px){
  .whatsapp-float{ width: 52px; height: 52px; right: 14px; bottom: 14px; font-size: var(--fs-lg); }
  .hero-card{ padding: var(--space-5); }
}