/* =======================
   Responsividade Avançada
======================= */

@media (max-width: 900px) {
  .card {
    width: 95vw;
    height: auto;
    min-height: 480px;
  }
  .q-title {
    font-size: clamp(16px, 2vw, 20px);
  }
}

@media (max-width: 640px), (orientation: portrait) {
  html, body {
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    height: auto;
    padding: 8px;
  }

  .app {
    min-height: auto;
    height: auto;
    gap: 16px;
  }

  .card {
    width: 100%;
    height: auto;
    min-height: 460px;
    padding: 16px;
    flex: 1 1 auto;
  }

  .answers-fieldset {
    flex-direction: column;
    align-items: center;
  }

  .answer-option {
    max-width: 90%;
    width: 100%;
  }

  .controls {
    flex-direction: column;
    gap: 8px;
  }

  .brand-title { font-size: 16px; }
  .brand-sub { font-size: 12px; }

  .sen-logo-wrapper {
    position: static;
    text-align: center;
    margin-top: 12px;
  }
  .sen-logo { width: 80px; opacity: 0.9; }
}