/* ============================================================
   RESPONSIVIDADE
   Regras para tablet, celular e telas menores.
============================================================ */

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .benefits-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lineup-layout {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .professor-figma-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .professor-figma-text p {
    text-align: left;
  }

  .professor-figma-visual {
    order: -1;
    max-width: 360px;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .testi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 70px 0;
  }

  .benefits-grid,
  .testi-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 70px 0 60px;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas .btn {
    justify-content: center;
  }

  .scoreboard-score .num {
    font-size: 64px;
  }

  .offer-card {
    padding: 34px 22px;
  }

  .pitch {
    aspect-ratio: 2 / 2.9;
  }

  .pos {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .professor-figma-visual {
    max-width: 300px;
  }

  .credentials {
    flex-direction: column;
    align-items: stretch;
  }

  .credentials span {
    justify-content: center;
  }

  .footer-inner {
    justify-content: center;
    text-align: center;
  }

  .footer-nav {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ============================================================
   ACESSIBILIDADE
   Evita movimento excessivo para usuários que solicitaram isso
   nas preferências do sistema operacional.
============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* Ajustes do marquee para telas de celular */
@media (max-width: 640px) {
  .marquee {
    padding: 16px 0;
  }

  .marquee__item {
    font-size: 14px;      /* um pouco menor, cabe melhor na tela */
    padding: 0 14px;
  }

  .marquee__trilho {
    animation-duration: 14s; /* um pouco mais rápido, já que o texto é menor */
  }
}