/* ===================================================================
   responsive.css — Breakpoints para tablet, celular e telas grandes
   =================================================================== */

/* ===== Telas grandes / TV ===== */
@media (min-width: 1440px) {
  .container { max-width: 1200px; }
  .hero { padding: 64px 0 90px; }
}

/* ===== Faixa lateral fixa (somente em telas largas o suficiente
   para não sobrepor o quiz, que é centralizado em 780px).
   Posicionada na altura aproximada de onde fica o título "DESAFIO LÓGICO"
   no hero (cabeçalho fixo + respiro do hero), em vez de centralizada
   verticalmente na tela. ===== */
@media (min-width: 1240px) {
  .promo-rail {
    position: fixed;
    top: 150px;
    right: 26px;
    width: 200px;
    margin-bottom: 0;
    z-index: 40;
    animation: slideInRight .5s ease both;
  }
}

/* ===== Tablet ===== */
@media (max-width: 900px) {
  .rules-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .game-options-grid { grid-template-columns: 1fr; }
}

/* ===== Celular ===== */
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .hero { padding: 32px 0 40px; }
  .hero-title { font-size: clamp(1.6rem, 7.2vw, 2.08rem); }
  .rules-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rule-card { padding: 14px 8px; font-size: 0.78rem; }
  .game-options-grid { grid-template-columns: 1fr; gap: 14px; }

  .level-cards { grid-template-columns: 1fr; }
  .level-select-section { padding: 40px 0; }

  .question-card { padding: 46px 20px 30px; }
  .question-text { font-size: 1.15rem; }
  .option-btn { padding: 14px 16px; font-size: 0.92rem; }

  .question-timer-badge { top: 14px; right: 14px; font-size: 0.7rem; padding: 5px 10px; }
  .timer { font-size: 1.1rem; padding: 7px 16px; }

  .promo-rail { margin-bottom: 16px; }
  .promo-rail-mockup { max-width: 140px; }

  .quiz-section { padding: 36px 0 24px; }
  .cta-final { padding: 40px 0 56px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .result-card { padding: 36px 22px; }

  .cert-form { flex-direction: column; }
  .cert-form input { width: 100%; }

  .cta-list { flex-direction: column; gap: 10px; align-items: flex-start; margin: 0 auto 30px; width: fit-content; }

  .share-buttons { justify-content: center; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 1.52rem; }
  .btn-xl { padding: 15px 26px; font-size: 0.95rem; }
}