/* ================================================== */
/* Estilos Detalhes do Pacote: Desktop + Mobile       */
/* ================================================== */

/* Container Principal */
.pacote-detalhes .container {
  max-width: 960px; /* + espaço para desktop */
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px);
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Título do Pacote */
.pacote-detalhes h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #003366;
  text-align: center;
  margin-bottom: clamp(16px, 3vw, 24px);
  font-weight: 800;
}

/* ------------------------- GALERIA ------------------------- */
.galeria {
  position: relative;
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

/* Em desktop: imagem principal + miniaturas abaixo */
@media (min-width: 769px) {
  .galeria {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto; /* principal + miniaturas */
  }
}

/* Imagem Principal (ratio estável) */
.imagem-principal {
  width: 100%;
  /* controla a altura pela proporção; ajusta conforme as tuas imagens */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  background: #f2f2f2;
}
.imagem-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* desktop: preencher */
  border-radius: 12px;
  transition: transform 0.3s ease, opacity 0.32s ease;
}

/* Miniaturas */
.miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  justify-items: center;
}
.miniaturas img {
  width: 100%;
  max-width: 120px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.24s ease, border-color 0.24s ease;
  border: 2px solid transparent;
}
.miniaturas img:hover,
.miniaturas img:focus-visible {
  transform: scale(1.06);
  border-color: #FFD700;
  outline: none;
}

/* -------------------- Tela Cheia (Fullscreen) -------------------- */
.imagem-principal.tela-cheia {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
}
.imagem-principal.tela-cheia img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  object-fit: contain; /* fullscreen: sem cortar */
}

/* Botão Fechar (X) */
.fechar {
  display: none;           /* visível só em fullscreen */
  position: absolute;
  top: clamp(12px, 2vw, 20px);
  right: clamp(12px, 2vw, 20px);
  background-color: transparent;
  color: #ffffff;
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: clamp(24px, 4vw, 36px);
  transition: color 0.3s ease;
  z-index: 1001;
}
.imagem-principal.tela-cheia .fechar { display: block; }
.fechar:hover,
.fechar:focus-visible {
  color: #FFD700;
  outline: none;
}

/* -------------------- Navegação (Setas) -------------------- */
.seta {
  background-color: transparent;
  color: #003366;
  border: none;
  cursor: pointer;
  padding: clamp(14px, 5vw, 28px);     /* maior hit-area para mobile */
  font-size: clamp(24px, 5vw, 38px);
  transition: color 0.3s ease, transform 0.2s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.seta-esquerda { left: clamp(8px, 2vw, 14px); }
.seta-direita  { right: clamp(8px, 2vw, 14px); }

.seta:hover,
.seta:focus-visible {
  color: #FFD700;
  transform: translateY(-50%) scale(1.06);
  outline: none;
}

/* -------------------- Texto e Blocos -------------------- */
.pacote-detalhes .descricao-pacote { 
	margin-top: 30px;
	margin-bottom: clamp(20px, 3vw, 30px); 
	}
.pacote-detalhes .descricao-pacote p {
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.8;
  color: #444444;
  margin-bottom: 14px;
}

.pacote-detalhes .detalhes-pacote {
  background-color: #f9f9f9;
  padding: clamp(16px, 2.5vw, 22px);
  border-radius: 10px;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.pacote-detalhes .detalhes-pacote h2 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: #003366;
  margin-bottom: 12px;
  font-weight: 800;
}
.pacote-detalhes .detalhes-pacote ul {
  list-style: none;
  padding: 0;
}
.pacote-detalhes .detalhes-pacote ul li {
  font-size: clamp(0.95rem, 2.1vw, 1.1rem);
  color: #555555;
  margin-bottom: 10px;
  padding-left: 22px;
  position: relative;
}
.pacote-detalhes .detalhes-pacote ul li::before {
  content: "•";
  color: #FFD700;
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  top: -3px;
}

/* -------------------- Botões CTA -------------------- */
.pacote-detalhes .cta-button {
  display: inline-block;
  min-width: 220px;
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
  background-color: #FFD700;
  color: #003366;
  padding: clamp(12px, 2.5vw, 16px) clamp(16px, 3vw, 20px);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.pacote-detalhes .cta-button:hover,
.pacote-detalhes .cta-button:focus-visible {
  background-color: #e6b800;
  transform: translateY(-1px);
  outline: none;
}

/* -------------------- Voltar aos Pacotes -------------------- */
/* Usa sticky para não colidir com conteúdo e ser previsível ao rolar */
.voltar-pacotes {
    position: fixed;
    top: 100px;
    left: 20px;
    z-index: 1000;
}
.voltar-pacotes .cta-button {
    background: #003366;
    color: #fff;
    padding: 10px 16px;
    font-size: .95rem;
    border-radius: 5px;
}
.voltar-pacotes .cta-button:hover { background: #002855; }

/* -------------------- Responsividade Adicional -------------------- */
@media (max-width: 768px) {
  /* Stack vertical da galeria */
  .galeria { grid-template-columns: 1fr; }
  /* Setas menores em mobile + hit area suficiente */
  .seta { font-size: 28px; }
  /* Miniaturas um pouco menores */
  .miniaturas img { max-width: 100px; }
}

/* -------------------- Preferências do Utilizador -------------------- */
@media (prefers-reduced-motion: reduce) {
  .imagem-principal img,
  .miniaturas img,
  .cta-button,
  .seta {
    transition: none !important;
  }
}

/* Mobile: torna sticky dentro do fluxo */
@media (max-width: 768px) {
  /* colamos o botão sob o header fixo (~60–80px) */
  .voltar-pacotes {
    position: sticky;
    top: 70px;                 /* ajusta conforme a altura real do teu header mobile */
    left: auto;                /* ignora o absolute anterior */
    margin: 8px 12px;          /* cria respiro lateral */
    z-index: 1200;
  }
  
  
.voltar-pacotes .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #003366;
    color: #fff;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
  }
}