/* =========================
   Hero - texto fixo
========================= */
.hero {
  position: fixed;
  top: 9%;  /* centralizado vertical */
  left: 50%; /* centralizado horizontal */
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,0.6);
  z-index: 100;
  width: 90%;
  max-width: 1000px;
}

.hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.5px;
}




/* =======================
   TABLETS (iPad vertical)
======================= */
@media (max-width: 1024px) {
  .hero {
    top: 5%;
  }

  .hero h1 {
    font-size: 1.9rem;
  }
}


@media (min-width: 701px) and (max-width: 820px){
  .hero {
    top: 4%;
  }

  .hero h1 {
    font-size: 1.6rem;
    white-space: nowrap;      /* impede quebra de linha */
  }
}

@media (min-width: 821px) and (max-width: 900px) {
  .hero {
    top: 5%;
  }

  .hero h1 {
    font-size: 1.8rem;
    white-space: nowrap;      /* impede quebra de linha */
  }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .hero {
    top: 5%;
  }

  .hero h1 {
    font-size: 1.9rem;
    white-space: nowrap;      /* impede quebra de linha */
  }
}


/* =======================
   MOBILE MENOR (até 400px)
======================= */
@media (max-width: 539px) {
  .hero {
    top: 5%;
  }

  .hero h1 {
    font-size: 1.2rem;
  }
}

@media (min-width: 540px )  and (max-width: 700px)  {
  .hero {
    top: 5%;
  }

  .hero h1 {
    font-size: 1.1rem;
    white-space: nowrap;      /* impede quebra de linha */
    
  }
}
@media (max-width: 344px)  {
  .hero {
    top: 6%;
  }

  .hero h1 {
    font-size: 1.3rem;
    
  }
}




/* Tablets e celulares em landscape */
@media (orientation: landscape) and (max-width: 739px) {
  .hero {
    top: 9%;
  }

  .hero h1 {
    font-size: 1.4rem;
    white-space: nowrap;
  }
}

/* iPad landscape */
@media (orientation: landscape) and (min-width: 740px) and (max-width: 990px) {
  .hero {
    top: 5%;
  }

  .hero h1 {
    font-size: 1.7rem;
    white-space: nowrap;
  }
}

/* iPad landscape */
@media (orientation: landscape) and (min-width: 991px) and (max-width: 1024px) {
  .hero {
    top: 9%;
  }

  .hero h1 {
    font-size: 1.9rem;
    white-space: nowrap;
  }
}