@media (max-width: 768px) {
  .menu ul {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .hero {
    height: 60vh;
    padding: 20px;
  }

  .hero-texto {
    padding: 20px;
  }

  .hero-texto h1 {
    font-size: 1.8em;
  }

  .hero-texto p {
    font-size: 1em;
  }
  .map-menu {
    flex-direction: column;
    align-items: center;
  }

  .info-cards {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .mapa-container {
    flex: 1 1 100%;
    max-width: 100%;
    margin-top: 20px;
  }
  .sobre-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sobre-texto,
  .sobre-imagem-wrapper,
  .sobre-info {
    max-width: 100%;
  }

  .sobre-imagem-wrapper {
    height: 250px;
  }
  
  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .footer-logo-box,
  .footer-section {
    flex: none;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .footer-social-icons {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .menu {
    flex-direction: column;
    gap: 10px;
  }

  .btn-agendar {
    padding: 8px 12px;
    font-size: 14px;
  }

  .menu ul {
    padding-top: 10px;
  }

  .hero-texto h1 {
    font-size: 1.5em;
  }

  .hero-texto p {
    font-size: 0.9em;
  }
  .section-title {
    font-size: 2rem;
  }

  .service-item .icon {
    font-size: 3rem;
  }

  .service-item h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 1024px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    padding: 30px 20px;
  }

  .menu-box {
    padding: 25px 16px;
  }

  .menu-box i {
    font-size: 1.8rem;
  }

  .menu-box span {
    font-size: 1rem;
  }

  #banhoDeErvas,
  #banhoRevi,
  #banhoKids,
  #sauna,
  #banhoGold,
  #banhoBeterraba,
  #banhoMara,
  #banhoAveia,
  #banhoSpa,
  #banhoRosas,
  #banhoChoc,
  #banhoChoco,
  #banhoVinho,
  #banhoMaca,
  #banhoLeite,
  #banhoRelax,
  #banhoAnti,
  #banhoDetox {
    width: 95vw;
    top: 20%;
    padding: 16px;
    position: relative;
    overflow: hidden; /* opcional para evitar scroll do balão */
  }

  #banhoDeErvas .price,
  #banhoRevi .price,
  #banhoKids .price,
  #sauna .price,
  #banhoGold .price,
  #banhoBeterraba .price,
  #banhoMara .price,
  #banhoAveia .price,
  #banhoChoc .price,
  #banhoChoco .price,
  #banhoSpa .price,
  #banhoVinho .price,
  #banhoRosas .price,
  #banhoLeite .price,
  #banhoMaca .price,
  #banhoRelax .price,
  #banhoAnti .price,
  #banhoDetox .price {
    width: 120px;
    height: 70px;
    font-size: 20px;
    padding: 10px;
    line-height: 50px;
    z-index: 1;
  }

  #banhoDeErvas h2,
  #banhoRevi h2,
  #banhoKids h2,
  #sauna h2,
  #banhoGold h2,
  #banhoBeterraba h2,
  #banhoMara h2,
  #banhoAveia h2,
  #banhoChoc h2,
  #banhoChoco h2,
  #banhoRosas h2,
  #banhoVinho h2,
  #banhoLeite h2,
  #banhoMaca h2,
  #banhoSpa h2,
  #banhoRelax h2,
  #banhoAnti h2,
  #banhoDetox h2 {
    font-size: 24px;
    padding-top: 80px; /* espaço para o balão */
    position: relative;
    z-index: 2; /* assegura que fique acima do balão */
  }

  #banhoDeErvas p,
  #banhoRevi p,
  #sauna p,
  #banhoGold p,
  #banhoKids p,
  #banhoBeterraba p,
  #banhoMara p,
  #banhoAveia p,
  #banhoChoc p,
  #banhoChoco p,
  #banhoRosas p,
  #banhoVinho p,
  #banhoLeite p,
  #banhoMaca p,
  #banhoSpa p,
  #banhoRelax p,
  #banhoAnti p,
  #banhoDetox p {
    font-size: 0.95rem;
  }

  #banhoDeErvas ul,
  #banhoRevi ul,
  #banhoKids ul,
  #sauna ul,
  #banhoGold ul,
  #banhoBeterraba ul,
  #banhoMara ul,
  #banhoAveia ul,
  #banhoChoc ul,
  #banhoChoco ul,
  #banhoRosas ul,
  #banhoVinho ul,
  #banhoLeite ul,
  #banhoMaca ul,
  #banhoSpa ul,
  #banhoRelax ul,
  #banhoAnti ul,
  #banhoDetox ul {
    list-style: none;
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  header {
    padding: 12px 16px;
  }

  header a {
    font-size: 1rem;
  }

  .btn-voltar {
    font-size: 14px;
    padding: 6px 10px;
  }

  .container {
    grid-template-columns: 1fr;
    padding: 20px 16px;
  }

  .menu-box {
    padding: 20px 14px;
  }

  .menu-box i {
    font-size: 1.5rem;
  }

  .menu-box span {
    font-size: 0.95rem;
  }

  #banhoDeErvas,
  #banhoRevi,
  #banhoKids,
  #sauna,
  #banhoGold,
  #banhoBeterraba,
  #banhoMara,
  #banhoAveia,
  #banhoRosas,
  #banhoChoc,
  #banhoChoco,
  #banhoRelax,
  #banhoVinho,
  #banhoLeite,
  #banhoAnti,
  #banhoSpa,
  #banhoMaca,
  #banhoDetox {
    top: 15%;
    padding: 14px;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden; /* opcional para evitar scroll do balão */
  }

  #banhoDeErvas h2,
  #banhoRevi h2,
  #banhoKids h2,
  #sauna h2,
  #banhoGold h2,
  #banhoBeterraba h2,
  #banhoMara h2,
  #banhoAveia h2,
  #banhoChoc h2,
  #banhoChoco h2,
  #banhoRosas h2,
  #banhoVinho h2,
  #banhoLeite h2,
  #banhoMaca h2,
  #banhoSpa h2,
  #banhoRelax h2,
  #banhoAnti h2,
  #banhoDetox h2 {
    font-size: 20px;
    padding-top: 80px; /* espaço para o balão */
    position: relative;
    z-index: 2; /* assegura que fique acima do balão */
  }

  #banhoDeErvas .price,
  #banhoRevi .price,
  #sauna .price,
  #banhoGold .price,
  #banhoBeterraba .price,
  #banhoKids .price,
  #banhoMara .price,
  #banhoAveia .price,
  #banhoChoc .price,
  #banhoChoco .price,
  #banhoRosas .price,
  #banhoVinho .price,
  #banhoMaca .price,
  #banhoSpa .price,
  #banhoLeite .price,
  #banhoRelax .price,
  #banhoAnti .price,
  #banhoDetox .price {
    width: 100px;
    height: 60px;
    font-size: 18px;
    padding: 8px;
    right: 10px;
    top: 10px;
    line-height: 45px;
    z-index: 1;
  }

  #banhoDeErvas ul,
  #banhoRevi ul,
  #banhoKids ul,
  #sauna ul,
  #banhoGold ul,
  #banhoBeterraba ul,
  #banhoMara ul,
  #banhoSpa ul,
  #banhoAveia ul,
  #banhoVinho ul,
  #banhoChoc ul,
  #banhoChoco ul,
  #banhoRosas ul,
  #banhoMaca ul,
  #banhoLeite ul,
  #banhoRelax ul,
  #banhoAnti ul,
  #banhoDetox ul {
    list-style: none;
    padding-left: 0;
  }

  #banhoDeErvas ul li::before,
  #banhoMaca ul li::before,
  #banhoKids ul li::before,
  #sauna ul li::before,
  #banhoGold ul li::before,
  #banhoBeterraba ul li::before,
  #banhoMara ul li::before,
  #banhoAveia ul li::before,
  #banhoChoc ul li::before,
  #banhoChoco ul li::before,
  #banhoSpa ul li::before,
  #banhoRosas ul li::before,
  #banhoVinho ul li::before,
  #banhoRevi ul li::before,
  #banhoLeite ul li::before,
  #banhoRelax ul li::before,
  #banhoAnti ul li::before,
  #banhoDetox ul li::before {
    content: "🦋";
    color: #fff;
  }
}

@media (max-width: 900px) {
  .sobre-container {
    flex-direction: column;
    padding: 40px 20px;
  }

  .sobre-imagem-wrapper {
    width: 100%;
    height: 280px;
    max-width: 100%;
    margin-top: 30px;
  }
}