/* ==========================================================
   HEROHAZARD UOL V3
   Ajustes solicitados:
   1) Personagens atravessando a tela ~35% mais devagar.
   2) Desktop inteiro visível sem barra de rolagem.
   O layout original do Work continua sendo a base.
   ========================================================== */

/* Movimento horizontal original do Work, apenas mais lento.
   Os delays também foram proporcionais para preservar a distribuição
   dos campeões ao longo da tela. */
.sprite-nami  { animation:40.5s linear -2.7s infinite paradeRight !important; }
.sprite-janna { animation:45.9s linear -23.0s infinite paradeLeft !important; }
.sprite-yuumi { animation:36.5s linear -14.9s infinite paradeRight !important; }
.sprite-lulu  { animation:41.9s linear -6.8s infinite paradeLeft !important; }
.sprite-leona { animation:48.6s linear -33.8s infinite paradeRight !important; }
.sprite-braum { animation:51.3s linear -39.2s infinite paradeLeft !important; }
.sprite-rell  { animation:44.6s linear -25.7s infinite paradeRight !important; }

/* Pequena compactação desktop antes do ajuste automático.
   Mantém a proporção visual do original, só remove espaços excessivos. */
@media (min-width: 901px) {
  .topbar {
    height: 64px;
  }

  .hero-grid {
    grid-template-columns: 1fr 500px;
    gap: 62px;
    padding-top: 34px;
    padding-bottom: 28px;
  }

  .hero-copy h1 {
    font-size: 60px;
    margin-top: 14px;
    margin-bottom: 18px;
  }

  .hero-copy > p {
    font-size: 17px;
    line-height: 1.5;
  }

  .trust {
    margin-top: 20px;
  }

  .donate-card {
    padding: 22px;
    border-radius: 22px;
  }

  .card-title {
    margin-bottom: 14px;
  }

  .card-title > span,
  .success-icon {
    width: 38px;
    height: 38px;
  }

  .card-title h2 {
    font-size: 18px;
  }

  .donate-card label {
    margin-top: 9px;
    margin-bottom: 5px;
  }

  .amount-pills button {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .money-input {
    margin-top: 7px;
  }

  .money-input input {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 16px;
  }

  .field-row input,
  .donate-card textarea {
    padding: 9px 10px;
  }

  .donate-card textarea {
    height: 62px;
  }

  .primary {
    margin-top: 10px;
    padding: 11px;
  }

  .secure-note {
    margin-top: 8px;
  }

  .community {
    gap: 16px;
    margin-bottom: 16px;
  }

  .goal-card {
    padding: 18px 20px;
  }

  .goal-head h3 {
    margin: 5px 0;
    font-size: 18px;
  }

  .goal-head strong {
    font-size: 27px;
  }

  .progress {
    height: 9px;
    margin: 16px 0 9px;
  }

  .ranking-card {
    padding: 17px 19px;
  }

  .section-title {
    margin-bottom: 8px;
  }

  .ranking-card li {
    padding: 6px 0;
  }

  .rank {
    width: 24px;
    height: 24px;
  }

  .empty {
    padding: 14px;
  }

  .recent {
    padding-bottom: 16px;
  }

  .recent-head {
    margin-bottom: 10px;
  }

  .recent-head h3 {
    font-size: 19px;
  }

  .recent-head p {
    font-size: 12px;
  }

  .recent article {
    padding: 11px 13px;
  }

  .recent article p {
    margin-top: 7px;
    line-height: 1.35;
  }

  footer {
    padding: 14px 24px 16px;
  }

  footer .brand {
    margin-bottom: 5px;
  }

  footer p {
    margin-bottom: 4px;
  }
}

/* Em telas de notebook mais baixas, reduz só um pouco mais os espaços.
   O JS complementar calcula a escala final exata. */
@media (min-width: 901px) and (max-height: 850px) {
  .topbar { height: 56px; }
  .hero-grid {
    padding-top: 18px;
    padding-bottom: 16px;
    gap: 48px;
    grid-template-columns: 1fr 470px;
  }
  .hero-copy h1 {
    font-size: 53px;
    margin: 10px 0 13px;
  }
  .hero-copy > p { font-size: 15px; }
  .trust { margin-top: 14px; }
  .donate-card { padding: 18px 20px; }
  .donate-card textarea { height: 54px; }
  .community { margin-bottom: 10px; }
  .goal-card, .ranking-card { padding-top: 14px; padding-bottom: 14px; }
  .recent { padding-bottom: 10px; }
  footer { padding-top: 9px; padding-bottom: 10px; }
}