/* Ajustes específicos para preservar a leitura e a imagem da hero no celular. */
.countdown-label {
  display: none;
}

@media (max-width: 520px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  main,
  .hero,
  .section,
  footer {
    width: 100%;
    max-width: 100%;
  }

  .hero {
    min-height: 1000px;
  }

  .event-facts {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: none;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 17px;
  }

  .event-facts > span {
    min-width: 0;
    gap: 4px;
  }

  .event-facts .fact-date,
  .event-facts .fact-time,
  .event-facts .fact-place {
    font-size: clamp(0.67rem, 2.8vw, 0.75rem);
    line-height: 1;
    white-space: nowrap;
  }

  .event-facts .fact-place {
    max-width: none;
  }

  .event-facts i {
    width: auto;
    font-size: 0.76rem;
  }

  .countdown {
    width: 100%;
    margin-bottom: 22px;
  }

  .countdown-values {
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    gap: 6px;
  }

  .countdown-label {
    display: block;
    color: #9eddf7;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .countdown-values span {
    min-width: 0;
    padding: 7px 4px;
  }

  .countdown-values b {
    font-size: 1.06rem;
  }

  .countdown-values small {
    font-size: 0.58rem;
  }
}

@media (max-width: 350px) {
  .event-facts {
    gap: 6px;
  }

  .event-facts .fact-date,
  .event-facts .fact-time,
  .event-facts .fact-place {
    font-size: 0.63rem;
  }
}