
/* ===================== Escopo exclusivo da página FOTOS ===================== */
/* Tudo aqui só afeta fotos.html porque exige .page-fotos na árvore */

.page-fotos .slider--fotos {
  /* “caixa verde” equivalente ao wrapper, mas específico da página FOTOS */
  max-width: 700px;              /* mais largo que o do rodapé, se desejar */
  margin: 30px auto;
  border: 4px solid #ffffff;
  border-radius: 15px;
  background-color: #004d1a;      /* verde do tema */
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  padding: 50px;                  /* leve espaço interno */
}




/* Palco do slider (necessário p/ os .slide position:absolute funcionarem) */
.page-fotos .slider--fotos .slider {
  position: relative;        /* referencia para .slide { position:absolute } */
  min-height: 420px;         /* defina a altura visível do palco */
  display: grid;             /* centraliza conteúdo */
  place-items: center;       /* centraliza IMG */
  overflow: hidden;          /* evita scroll/estouro */
}




/* Botão PAUSAR (igual ao do rodapé) */
.page-fotos .slider--fotos .pauseBtn {
  background-color: #d9534f;      /* vermelho */
  color: #fff;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  cursor: pointer;
  display: block;                 /* ocupa a linha toda */
  margin: 20px auto 0 auto;       /* centraliza e desce um pouco */
  position: relative;             /* permite ajustar manualmente */
  top: 30px;                      /* empurra para baixo */
  z-index: 10;                    /* garante que fique acima da foto */
  transition: transform .1s ease, background-color .3s ease;
}
/* Título do slide (somente galeria) */
.page-fotos .slider--fotos .slider-title {
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;            /* próximo do palco */
}

/* Slides empilhados (sem “pulo” de layout) */
.page-fotos .slider--fotos .slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;            /* centro vertical */
  justify-content: center;        /* centro horizontal */
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
  pointer-events: none;
}

.page-fotos .slider--fotos .slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Tamanhos independentes por slider da galeria */
.page-fotos .slider--01 .slide img { width: 80% !important; height: auto !important; object-fit: contain; }
.page-fotos .slider--02 .slide img { width: 80% !important; height: auto !important; object-fit: contain; }
.page-fotos .slider--03 .slide img { width: 80% !important; height: auto !important; object-fit: contain; }
.page-fotos .slider--04 .slide img { width: 80% !important; height: auto !important; object-fit: contain; }
.page-fotos .slider--05 .slide img { width: 80% !important; height: auto !important; object-fit: contain; }
.page-fotos .slider--06 .slide img { width: 80% !important; height: auto !important; object-fit: contain; }
.page-fotos .slider--07 .slide img { width: 80% !important; height: auto !important; object-fit: contain; }

/* Se criar mais sliders, siga o mesmo padrão:

/* Setas (sem círculo e sem borda) */
.page-fotos .slider--fotos .prev,
.page-fotos .slider--fotos .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  z-index: 10;
}

.page-fotos .slider--fotos .prev { left: 12px; }
.page-fotos .slider--fotos .next { right: 12px; }
.page-fotos .slider--fotos .prev:hover,
.page-fotos .slider--fotos .next:hover { color: #00ff66; }






/* Dots — removidos na página FOTOS */
.page-fotos .slider--fotos .dots { display: none !important; }




.page-fotos .slider--fotos .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .3s ease;
}

.page-fotos .slider--fotos .dot.active {
  background-color: #333;
}













/* Botão PAUSAR (igual ao do rodapé) */
.page-fotos .slider--fotos .pauseBtn {
  background-color: #d9534f;      /* vermelho */
  color: #fff;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  cursor: pointer;
  margin-top: 5px;
  transition: transform .1s ease, background-color .3s ease;
}
.page-fotos .slider--fotos .pauseBtn:hover { background-color: #c9302c; }
.page-fotos .slider--fotos .pauseBtn:active { transform: scale(0.95); }

/* Responsividade básica para a página FOTOS */
@media (max-width: 768px) {
  .page-fotos .slider--fotos { max-width: 92%; padding: 10px; }
  .page-fotos .slider--fotos .slider { min-height: 360px; }
  .page-fotos .slider--fotos .prev,
  .page-fotos .slider--fotos .next { font-size: 32px; }
  .page-fotos .slider--fotos .dot { height: 12px; width: 12px; }
	
	
  /* imagens um pouco maiores no mobile */
  .page-fotos .slider--01 .slide img,
  .page-fotos .slider--02 .slide img,
  .page-fotos .slider--03 .slide img 
  .page-fotos .slider--04 .slide img,
  .page-fotos .slider--05 .slide img,
  .page-fotos .slider--06 .slide img, 
  .page-fotos .slider--07 .slide img,


}

@media (max-width: 480px) {
  .page-fotos .slider--fotos .slider { min-height: 320px; }
}



/* Bloqueio de cópia em toda a página */
body {
  -webkit-user-select: none; /* Chrome, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Padrão */
}


