/* ======================================== */
/*            ESTILOS RESPONSIVOS           */
/* ======================================== */

/* Exemplo de breakpoint para telas menores que 768px */
@media (max-width: 768px) {
  .app-modern-theme .header-section {
    flex-direction: column;
    padding: 3rem;
    gap: 3rem;
  }

  .app-modern-theme .header-logo {
    font-size: 5rem; /* ~20px pode diminuir no mobile */
    margin-right: 0;
  }

  .app-modern-theme .nav-links {
    margin-left: 0;
    flex-direction: column;
    gap: 2rem;
  }

  /* Ajustes de botões, textos etc. */
  .app-modern-theme .button-primary,
  .app-modern-theme .auth-link {
    padding: 2rem 3rem;
    font-size: 3rem;
  }

  /* ...e assim por diante... */
}