html, body {
  overflow-x: hidden;
}

    .menu li a{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:500;
}

.menu li a i{
  width:18px;
  text-align:center;
  color:var(--verde-escuro);
}

/* ===== AVATAR MENU ===== */
.menu-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--verde-claro);
}

    

.passeio-container {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box; /* 🔥 ESSENCIAL */
}



.hero-passeio {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
}

.hero-passeio img {
  width: 100%;
  height: 550px;
  object-fit: contain;
  display: block;
}

@media (max-width:768px){
  .hero-passeio img{
    height: 520px;
  }
}

img {
  max-width: 100%;
  height: auto;
}



.passeio-header {
  margin-top: 20px;
}

.passeio-header h1 {
  font-size: 28px;
  margin-bottom: 6px;
}

.passeio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #555;
  font-size: 14px;
}

.info-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-top: 25px;
}

.card-box {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.card-box h3 {
  margin-bottom: 12px;
}

.cta-box button {
  width: 100%;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}




    #map { height: 300px; margin-bottom:20px; }
    
    .capa {
      width: auto;
      height: 200px;
      object-fit: cover;
      
    }
    .avatar-wrapper {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
    }
    .avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }

    .participante { display: flex; align-items: center; gap: 6px; }
    .participante img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

    .comentario { display: flex; gap: 10px; margin-top: 12px; }
    .comentario img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
    .comentario .conteudo { background: #f1f1f1; padding: 8px 10px; border-radius: 8px; }
    .data { font-size: 12px; color: #777; }

   

    .badge-gratis {
  background: rgba(46, 204, 113, 0.15);
  color: #1e8449;
  font-weight: 600;
  font-size: 13px;

  padding: 4px 10px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 1px solid rgba(46, 204, 113, 0.35);
}

.badge-pago {
  background: rgba(241, 196, 15, 0.18);
  color: #7d6608;
  font-weight: 600;
  font-size: 13px;

  padding: 4px 10px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  border: 1px solid rgba(241, 196, 15, 0.45);
}

.login-call {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 12px;
  padding: 14px;

  background: rgba(169,178,70,0.12); /* --verde-claro */
  border: 1px solid rgba(130,140,52,0.35); /* --verde-escuro */

  border-radius: 14px;
}

.login-call i {
  font-size: 28px;
  color: var(--verde-escuro);
}

.login-call strong {
  display: block;
  font-size: 14px;
  color: var(--terra-muito-escura);
}

.login-call small {
  color: var(--cinza-medio);
}

.btn-login-call {
  margin-left: auto;

  background: linear-gradient(135deg,var(--verde-escuro),var(--verde-claro));
  color: #fff;
  text-decoration: none;

  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;

  box-shadow: 0 6px 14px rgba(130,140,52,0.35);
  transition: all .2s ease;
}

.btn-login-call:hover {
  transform: translateY(-2px);
}




/* HEADER */
.header {
  position: fixed;
  top: 0;
  
  width: 100%;
  background: #ffffffde;
  border-bottom: 1px solid #eeeeee;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
}

.logo img {
  height: 38px;
}

/* BOTÃO */
.menu-btn {
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
}

/* MENU */
.menu {
  display: none;
  background: #fff;
  border-top: 1px solid #eee;
}

.menu.open {
  display: block;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 10px;
}

.menu li {
  margin-bottom: 6px;
}

.menu a,
.menu button {
  width: 100%;
  display: block;
  padding: 10px;
  text-align: left;
  background: none;
  border: none;
  text-decoration: none;
  color: #333;
  font-size: 15px;
  cursor: pointer;
}

.menu a:hover,
.menu button:hover {
  background: #f5f5f5;
}

/* SUBMENU */
.has-sub .submenu {
  display: none;
  padding-left: 15px;
}

.has-sub.open .submenu {
  display: block;
}

.arrow {
  float: right;
}

/* DIVISOR */
.divider {
  height: 1px;
  background: #eee;
  margin: 10px 0;
}

/* ESPAÇO DO HEADER */
body {
  padding-top: 100px;
}


/* ===== MOBILE: MENU SEMPRE VERTICAL ===== */
@media (max-width: 768px) {

  .menu ul {
    display: block !important;
  }

  .menu li {
    display: block !important;
    width: 100%;
  }

  .menu a,
  .menu button {
    display: block;
    width: 100%;
  }

}

.btn-cancelar {
  width: 44px;
  height: 44px;
  border-radius: 5%;
  border: none;
  background: #f5f5f5;
  color: #c0392b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}

.btn-cancelar:hover {
  background: #ffeaea;
  transform: scale(1.05);
}

.btn-whatsapp-passeio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-top: 15px;
  padding: 12px 16px;

  background: linear-gradient(135deg, #25d366, #1ebe5d);
  color: #fff;
  font-weight: 600;
  font-size: 15px;

  border-radius: 14px;
  text-decoration: none;

  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35);
  transition: all 0.25s ease;
}

.btn-whatsapp-passeio i {
  font-size: 20px;
}

.btn-whatsapp-passeio:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(37, 211, 102, 0.45);
}

.btn-whatsapp-passeio:active {
  transform: scale(0.98);
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-verde {
  color: var(--verde-claro);
}

.icon-verde-escuro {
  color: var(--verde-escuro);
}

.icon-terra {
  color: var(--terra-clara);
}

.icon-terra-escuro {
  color: var(--terra-escura);
}

.meta-item i {
  font-size: 15px;
}
/* ===== MENU MOBILE MAIS COMPACTO ===== */
@media (max-width:768px){

  .menu li{
    margin-bottom:2px; /* antes 6px */
  }

  .menu a,
  .menu button{
    padding:8px 10px;  /* diminui altura do item */
    line-height:1.2;   /* reduz espaçamento interno do texto */
  }

  .menu li a{
    gap:8px; /* aproxima ícone do texto */
  }

}
/* ESCONDE MOBILE BAR NO DESKTOP */
.mobile-app-bar {
  display: none;
}

/* MOBILE */
@media (max-width: 768px) {

  .menu-btn,
  .menu {
    display: none !important;
  }

  .mobile-app-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: #ffffff;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 9999;
  }

  .mobile-app-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #777;
    font-size: 12px;
    flex: 1;
  }

  .mobile-app-bar i {
    font-size: 20px;
    margin-bottom: 3px;
  }

  .mobile-app-bar a.active,
  .mobile-app-bar a:hover {
    color: #00b37e; /* sua cor principal */
  }

  body {
    padding-bottom: 70px; /* evita conteúdo atrás da barra */
  }
}

/* LIGHTBOX MODERNO */
.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  touch-action: pan-y;
}

.lightbox img{
  max-width:95%;
  max-height:90%;
  border-radius:14px;
  transition:transform .3s ease;
}


/* ===== BOTÃO ADMIN ESTILO APP ===== */

.admin-add-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:15px;
  gap:6px;
}

.admin-add-btn{
  width:70px;
  height:70px;
  border-radius:12px;
  border:none;
  background:#f5f5f5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
}

.admin-add-btn i{
  font-size:18px;
  color:var(--verde-escuro);
  margin-bottom:4px;
}

.admin-add-btn span{
  font-size:11px;
  color:#555;
}

.admin-add-btn:hover{
  background:#e9f7f0;
  transform:translateY(-2px);
}

.admin-add-info{
  font-size:11px;
  color:#888;
  text-align:center;
}

.btn-interesse{
  width:100%;
  padding:14px;
  border:none;
  border-radius:10px;
  background:#ff7a00;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.btn-interesse:hover{
  background:#e86900;
}

.btn-participar{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:0.2s;
}

/* estado confirmar */
.btn-confirmar{
  background:var(--verde-claro);
  color:white;
}

/* estado cancelar */
.btn-cancelar{
  background:#e74c3c;
  color:white;
}