/* Mobile responsive overrides — versão mobile
   Mantém a faixa de "VAGAS LIMITADAS" no topo,
   seguido da foto, depois do texto e botão.
*/

@media (max-width: 1024px) {

  /* Garantir que o ticker fique visível no topo */
  .ticker-wrap {
    position: relative;
    z-index: 20;
  }

  .ticker-track {
    padding: 8px 0;
  }

  /* Layout principal em coluna: foto -> texto -> botão */
  .hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 16px 18px 28px;
    margin: 0 auto;
    grid-template-columns: none !important;
    align-items: center;
  }

  /* Forçar a foto antes do bloco de texto */
  .hero-visual {
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0;
  }

  .hero-photo {
    width: min(420px, 94%);
    height: auto;
  }

  .hero-copy {
    order: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
  }

  .brand {
    margin-bottom: 8px;
    width: min(220px, 70%);
  }

  .divider {
    margin-top: 10px;
  }

  .eyebrow {
    font-size: 18px;
  }

  .hero-copy h1 {
    font-size: 44px;
    line-height: 1.04;
    margin: 6px 0 8px;
  }

  .description,
  .highlight {
    width: 70%;
    font-size: 16px;
  }

  .event-pill {
    margin-top: 8px;
    width: auto;
  }

  .btn {
    width: 100%;
    max-width: 420px;
    padding: 14px 20px;
    margin-top: 12px;
    justify-content: center;
  }

  /* Ajustes finos do ticker para dispositivos pequenos */
  .ticker-track span {
    font-size: 12px;
  }

  .ticker-group {
    gap: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 520px) {
  .hero {
    width: calc(100% - 28px);
  }

  .hero-copy h1 {
    font-size: 54px;
    letter-spacing: -3px;
    margin-top: 12px;
  }

  .event-pill span {
    font-size: 14px;
  }

  .description,
  .highlight {
    font-size: 16px;
  }

  .btn {
    width: 100%;
    padding: 18px 24px;
  }
}

/* Pequenos ajustes para telas bem pequenas */
@media (max-width: 420px) {
  .hero-copy h1 {
    font-size: 36px;
  }

  .brand {
    width: min(180px, 70%);
  }

  .btn {
    padding: 12px 16px;
  }

  .description,
  .highlight {
    width: 85%;
    font-size: 16px;
  }

}