/* Camada de UX mobile: melhora leitura, toque e estabilidade visual. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { overflow-x: hidden; overscroll-behavior-y: none; }
img, video, iframe { max-width: 100%; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }

@media (max-width: 650px) {
  .shell { width: min(100% - 20px, 780px); padding: 14px 0 32px; }
  .shell { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .brand { min-height: 44px; margin: 2px 4px 16px; font-size: 15px; }
  .brand-mark { width: 34px; height: 34px; }
  .hero, .card { border-radius: 16px; }
  .hero { padding: 24px 20px; }
  .hero:after { width: 160px; height: 160px; right: -75px; top: -80px; }
  h1 { font-size: clamp(30px, 9vw, 42px); letter-spacing: -.02em; }
  h2 { font-size: clamp(24px, 7vw, 32px); }
  h3 { font-size: 19px; }
  .lead { font-size: 17px; line-height: 1.48; }
  .card { padding: 20px; }
  .hero > .btn, .lesson-locked .btn, .lesson-access .btn, .result-checkout { width: 100%; }
  .hero > .btn { margin-top: 4px; }
  .option { min-height: 64px; padding: 15px; gap: 11px; line-height: 1.35; touch-action: manipulation; }
  .option:before { width: 22px; height: 22px; }
  .region-grid { grid-template-columns: 1fr; }
  .progress-label { align-items: flex-start; font-size: 13px; }
  .progress { margin-bottom: 20px; }
  .actions { gap: 10px; margin-top: 20px; }
  .actions .btn, .actions .btn.ghost, .actions .btn.secondary { width: 100%; }
  .btn { min-height: 54px; padding: 15px 18px; touch-action: manipulation; }
  .btn:active { transform:scale(.985); }
  input, select { min-height: 54px; font-size: 16px; }
  input[type="checkbox"] { min-height: 22px; min-width: 22px; }
  input[type="range"] { min-height: 44px; accent-color: var(--brand); touch-action: manipulation; }
  .form-grid { gap: 14px; }
  #email-verification .actions { flex-direction: column; }
  #email-verification input { letter-spacing: .12em; text-align: center; font-weight: 700; }
  .small, .notice, .check, .error { font-size: 15px; }
  .check { line-height: 1.45; }
  .results-header { padding: 4px 2px 18px; }
  .results-header h1 { font-size: clamp(30px, 8.5vw, 39px); }
  .result-next-step { margin-top: 14px; padding: 20px; }
  .result-next-step h2 { font-size: clamp(23px, 6.4vw, 29px); }
  .result-presentation { margin: 0 -2px 18px; }
  .result-cta-headline { margin-top: 18px; font-size: clamp(23px, 6.5vw, 29px); }
  .result-next-step .lead { margin: 0 0 18px; }
  .result-sound-button { min-height: 44px; right: 10px; bottom: 10px; }
  .report-actions { padding: 18px 20px; }
  .metric { font-size: 38px; }
  .chart-wrap { min-height: 250px; }
  .product { gap: 14px; }
  .product-art { width: 76px; height: 76px; border-radius: 13px; }
  .store-grid { gap: 14px; }
  .store-card { padding: 18px; }
  .store-card .product-art { width: 100%; height: min(58vw, 260px); border-radius: 13px; margin-bottom: 2px; }
  .badge { max-width: 100%; line-height: 1.25; }
  .footer { padding: 20px 4px; line-height: 1.55; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .testimonial-quote { margin: 18px 0 12px; padding: 18px 16px 15px 23px; }
  .testimonial-quote p { font-size: 19px; line-height: 1.35; }
  .testimonial-source-text { font-size: 14px; }
}

@media (max-width: 390px) {
  h1 { font-size: clamp(29px, 9.2vw, 36px); }
  .hero, .card { padding: 20px 17px; }
  .progress-label { gap: 8px; }
  .progress-label span:last-child { white-space: nowrap; }
  .product { flex-direction: column; }
  .product > div:last-child { width: 100%; min-width: 0; }
  .product-art { width: 100%; height: auto; aspect-ratio: 16 / 7; }
  .product .btn { width: 100%; }
  .result-next-step, .report-actions { padding: 18px 17px; }
  .result-sound-button { font-size: 13px; padding-inline: 11px; }
}

@media (min-width: 651px) and (max-width: 900px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); }
}