* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
	font-family: 'GalanoGrotesqueAltLight';
	src: url('fontes/galano-grotesque-alt-light.otf') format('opentype');
}

html {
  scroll-behavior: smooth;
}

p::first-letter {   /* altera só a primeira letra de todos os parágrafos */
  font-size: 1.2em;
}
/*
p::before {         --- coloca um ícone antes de qualquer parágrafo ---
  content: "\2714 ";
  color: #00c853;
}
*/

#btnTopo { /* botão para voltar ao topo da página; usado no javascript */
  position: fixed;
  bottom: 20px;
  right: 10px;
  display: none;  /*  escondido até rolar */
  background: rgb(25, 176, 157);
  color: #fff;
  padding: 6px 10px;
  border: none !important;
  border-radius: 5px;
  text-decoration: none;
  font-size: 22px;
  font-weight: bolder;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
  z-index: 2000;
}
#btnTopo:hover {
  color: #fff;
  background: rgb(21, 147, 130);
  border: none;
}
.btnTopo.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  border: none;
}

/* Caixa flutuante (inicialmente escondida) */
.floating-links {
  position: fixed;
  top: 90px;       /* ajuste conforme sua navbar */
  right: 20px;
  /*background: #fff;*/
  background-color: rgba(0, 0, 0, 0.3); /* película semi-transparente */
  background-color: none;
  /*border: 1px solid #ccc;*/
  border-radius: 8px;
  /*box-shadow: 0 6px 18px rgba(0,0,0,0.25);*/
  display: none;   /* escondida por padrão */
  flex-direction: column;
  gap: 6px;
  width: 120px;
  justify-content: right;
  align-items: end;
  z-index: 2000;
  border: none;
}
.floating-links a {
  display: block;
  padding: 3px 10px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 4px;
}
.floating-links a:hover {
  /*background: #f8f9fa;*/
  color: rgb(248, 200, 89) !important;
}
/* classe que mostra o box */
.floating-links.show {
  display: flex;
}

/* cria o box pequeno e flutuante para os links */
.nav-links-box {
  position: absolute;
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 0.25rem 0.5rem;
  /*display: none;*/
  flex-direction: column;
  /*flex-wrap: nowrap;*/
  /*align-items: stretch;*/
  justify-content: space-around;
  z-index: 2000;
  width: 200px;
}
/* estiliza os links */
.nav-links-box a {
  color: #333;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  display: block;
  border-radius: 4px;
}
.nav-links-box a:hover {
  background: #f8f9fa;
  border-radius: 4px;
}

.lista-personalizada {   /* criação dos ícones da lista personalizada */
  list-style: none;
  padding-left: 0;
  text-align: left;
}
.lista-personalizada li::before {  /* configuração dos ícones da lista personalizada */
  position: relative;
  content: "\2714";
  margin-right: 7px;
  list-style-position: outside;
  padding-left: 0 !important;
  margin-left: 0 !important;
  font-size: 1.4em;
  color: rgb(16, 144, 129) !important;
}

#hamburgerBtn:hover {
  color: #fff !important;
  /*background: rgb(21, 147, 130);*/
}
/*
.hamburgerBtn.show {
  opacity: 1;
  pointer-events: auto;
}
*/
.header-bg {
  background-image: url("../imagens/pr3_2024_ft_00901_t02b.jpg");
  background-size: cover;
  background-position: left;
  height: 100vh;
  position: relative;
}
.header-bg::before {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0,0,0,0.80));
  z-index: 1;
}
.overlay {
  position: relative;
  z-index: 2;
}

body {
  min-height: 100%;
  overflow-x: hidden;
  font-family: 'Trebuchet MS', Georgia, serif;
  font-size: clamp(16px, 2vw,20px); /* tam min (cel.), valor fluido % da tela, tam max telas grandes */
  /*background-color: #ccc;*/
  /*color: #333;*/
}
.bg-custom {
  background-color: rgba(0, 0, 0, 0.3); /*--- película semi-transparente */;
  /*border: 2px solid red;*/
}
.navbar {     /* altura da barra de menu */
  height: 80px;
  z-index: 2000;
}
.navbar-nav .nav-link:hover {
  color: rgb(248, 200, 89) !important;
}
/* ===== customização do botão hamburger ===== */
.navbar-toggler-icon-custom {
  display: inline-block;
  cursor: pointer;
}

.navbar-toggler-icon-custom span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 8px;
  background-color: white;
  border-radius: 2px;
  margin-right: 1px;
}
  /* garantia: o botão deve aparecer normalmente */
.navbar-toggler {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  z-index: 2000;
}
  /* para personalizar a cor ao passar o mouse */
.navbar-toggler:hover .navbar-toggler-icon-custom span {
  background-color: rgb(248, 200, 89) !important;
}
  /* =========================================== */
.navbar-brand {
  padding: 0 !important;
  margin: 0 !important;
}
.navbar .navbar-brand,
  .navbar .navbar-text,
  .navbar .nav-link {
  color: white !important;
} 
/* para definir o tamanho do logo à esquerda */
.navbar-brand img {
  height: 70px;
  width: auto;
  object-fit: contain;
}
/* Espaçamento entre os links */
.navbar-nav .nav-link {
  margin-left: -10px !important;   /* ajusta a distância horizontal entre links */
  font-size: 22px;  /* deixa mais visível */
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.foto {
  cursor: pointer;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.foto:hover {
  transform: scale(1.05);
}
.foto:fullscreen,
.foto:-webkit-full-screen {  /* para navegadores WebKit (Safari) */ 
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
  background-color: #000;
}

.logos-redes {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  width: 95%;
  height: 44px;
  gap: 20px;
  /*border: 2px solid white;*/
}
.logos-redes img {
  width: 30px;
  height: auto;
  display: block;
  /*border: 1px solid red;*/
}
.logo-whatsapp, .logo-instagram {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
}
.logo-whatsapp img {
  position: absolute;
  width: 30px;
  height: auto;
  transition: opacity 0.3 ease;
}
.logo-whatsapp .hover {
  opacity: 0;
}
.logo-whatsapp:hover .hover {
  opacity: 1;
}
.logo-whatsapp:hover .normal {
  opacity: 0;
}
.logo-instagram img {
  position: absolute;
  width: 30px;
  height: auto;
  transition: opacity 0.3 ease;
}
.logo-instagram .hover {
  opacity: 0;
}
.logo-instagram:hover .hover {
  opacity: 1;
}
.logo-instagram:hover .normal {
  opacity: 0;
}

.img-ajustada {
  /*display: block;*/
  max-width: 90%;
  height: auto;
  margin: 5px auto;
  border-radius: 15px;
}
.texto-img-paisagem {
  padding-top: 10px;
  max-width: 90%;
  margin: 5px auto;
  hyphens: auto;
  text-align: justify;
  word-break: break-word;
  text-indent: 20px;
  /*border: 2px solid red;*/
}
  
.texto-img-retrato {
  padding-top: 10px;
  max-width: 90%;
  margin: 5px auto;
  hyphens: auto;
  text-align: justify;
  word-break: break-word;
  text-indent: 20px;
  /* border: 2px solid red; */
}
  
/* ========================= TELAS MENORES DO QUE 767.98px ========================= */
@media (max-width: 767.98px) { /* ========== 1111 === T<767,98 === 1111 ========== */
  
  /* para as sections alvo dos links não ficarem sob a barra de menus */
  section {
    scroll-margin-top: 100px;
  }
  .navbar-nav .nav-link {
    padding-left: 1.3em;
  }
  .header-bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .texto-central {    /* === textos centrais, logos de redes e botão sobre a imagem de fundo === */
    position: absolute;
    width: 100%;
    height: 390px;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    top: 42vh;
    text-shadow: #000000 3px 3px 5px;
    color: white;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    font-size: 25px;
    line-height: 5.5vh;  /* espaçamento entre as linhas */
    z-index: 10;
    /* font-family: 'Tangerine', cursive; */
    /* border: 1px solid white; */
  }
  .texto-central-linha1 {
    width: 100%;
    text-align: center;
    /*margin-right: 130px;*/
    font-size: 20px;
    font-family: 'Times New Roman', Helvetica, Times, serif; line-height: 30px;
    /* border: 1px solid whitesmoke; */
  }
  .texto-central-linha2 {
    text-align: center;
    margin-right: 0px;
    /*font-size: 40px;*/
    font-size: clamp(30px, 3vw, 40px); /* nunca menor que 20px, nem maior que 40px */
    font-family: Helvetica, 'Times New Roman', Times, serif;
    font-weight: 700;
    /* border: 2px solid red; */
  }
  .texto-central-linha3 {
    text-align: center;
    margin-right: 0px;
    padding-bottom: 22px;
    font-size: 19px;
    line-height: 18px;
    font-family: Helvetica, 'Times New Roman', Times, serif;
    ;/* border: 2px solid burlywood */
  }
  .texto-central-linha4 {
    margin-top: 70px;
    text-align: center;
    line-height: 19px !important;
    font-size: 15px;
    width: 95%;
    padding: 0px 8px 0px 8px;
    font-family: Helvetica, Times, serif; line-height: 30px;
    /* border: 1px solid white; */
  }
  .texto-central-linha4-menor {
    margin-top: 20px;
    text-align: center;
    line-height: 19px !important;
    font-size: 15px;
    width: 95%;
    padding: 0px 8px 0px 8px;
    font-family: Helvetica, Times, serif; line-height: 25px;
    /* border: 1px solid rgb(255, 2, 2); */
  }
  ul {
    list-style-position: inside;
    text-indent: -2em !important;
    margin-left: 35px;
  }
  .lista-personalizada li {
    position: relative;
    height: 2.8em;
    margin-top: 10px;
    margin-left: 0px !important;
    padding-left: 1.2 !important;
    /*border: 2px dashed red;*/
  }
  li::before {
    position: absolute;
    font-size: 1.5em;
    line-height: 0.7em;
    /*border: 2px solid blue;*/
  }

  .custom-btn {           /* ========= botão "junte-se a nós" ========== */
    position: absolute;
    display: flex;
    margin-top: 80px !important;
    align-items: center;
    justify-content: center;
    /*left: 37%;*/
    height: 35px;
    width: 150px;
    font-size: 19px;
    background-color: rgb(25, 176, 157);  /* Cor verde aproximada do logo */
    color: white;
    border-radius: 8px;
    /*display: flex;*/
    transition: background-color 1.0s ease;  /* Animação suave */
    /*border: 1px solid white;*/
  }
  a {
    text-decoration: none;
  }
  .custom-btn:hover {
    text-decoration: none;
    color: #f8c859;
    font-size: 19px !important;
  }
    
 /* *************************** decoração dos títulos ************************ */
  .linha-titulo {
    display: flex;
    padding-left: 17px;
    margin-top: 1.1em;
    margin-bottom: 0.5em;
    align-items: end;
    padding-bottom: 2px;
    width: 95%;
    gap: 10px;
    overflow: hidden;
    /*border: 2px solid red;*/
  }
  .linha-titulo h3 {
    /*font-family: Tangerine, Helvetica, 'Times New Roman', Times, serif;*/
    font-size: 22px;
    color: #6b6b6b;
    /*background-color: #fff;*/
    /*z-index: 1;*/
    padding-right: 0;
    padding-top: 0px;
    /*border: 2px solid blue;*/
  }
  .linha-titulo::after {   /* animação da linha após o título */
    margin-bottom: 10px;
    content: "";
    flex: 1;
    height: 3px;
    background: linear-gradient(90deg, rgb(21, 141, 125), #1bbbbb, rgb(18, 169, 188));
    background-size: 200% 100%;
    animation: deslizar 10s linear infinite;
    /*width: calc(100vw - 100% - 20px);*/
  }
  /* animação */
  @keyframes deslizar {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }

    /* =====  para eliminar os efeitos de exibição em tela cheia para telas <767px ===== */

    /* Esconde o overlay */
    .lightbox {
      display: none !important;
    }
    /* Remove o link da miniatura para não acionar o :target */
    a[href^="#"] {
     /*  pointer-events: none; */
      cursor: default;
    }
    /* =====  FIM para eliminar os efeitos de exibição em tela cheia para telas <767px ===== */

  .img-ajustada {
    display: block;
    max-width: 90%;
    cursor: pointer;
    height: auto;
    margin: 5px auto;
    border-radius: 15px;
  }
  .texto-img-paisagem {
    padding-top: 10px;
    max-width: 90%;
    margin: 5px auto;
    hyphens: auto;
    text-align: justify;
    word-break: break-word;
    text-indent: 25px;
    /*border: 2px solid red;*/
  }
  .texto-img-retrato {
    padding-top: 10px;
    max-width: 90%;
    margin: 5px auto;
    hyphens: auto;
    text-align: justify;
    word-break: break-word;
    text-indent: 20px;
    /*border: 2px solid red;*/
  }

  .firula {
    display: grid;
    width: 100%;
    place-items: center;
    padding-left: 28vw;
    padding-right: 28vw;
    /*border: 1px solid red;*/
  }
  .firula img {
    width: 10%;  
    height: auto;
    max-width: 10%;
    max-height: 80%;
  }

  footer {
    font-size: 0.8em;
    position: relative;
    width: 100%;
    height: 35px;
    color: #bbb;
    background-color: white;
    align-items: center;
    display: flex;
    justify-content: center;
    border: none;
    /*border: 1px solid rgb(183, 12, 12);*/
  }

}
/* ===================== FIM - TELAS MENORES DO QUE 767,98px ==================== */



/* ========================= TELAS MAIORES DO QUE 768px ========================= */
@media (min-width: 768px) { /* ========== 22222 === T>768px === 22222 ========== */

  /* para as sections alvo dos links não ficarem sob a barra de menus */
  section {
    scroll-margin-top: 100px;
  }
  .navbar-toggler {
    display: none;
  }
  .floating-links {
    position: static;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    background: transparent;
    padding: 0;
    margin-left: auto;
    top: auto;
    right: auto;
    border-radius: 0;
    width: 67%;
    box-shadow: none;
    /* border: 2px solid red; */
  }
  .floating-links a {
    color: #FFFFFF;
  }
  .navbar {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: 0;
    z-index: 3000;
  }
  .navbar {
    height: 75px;
    z-index: 2000;
  }
  .navbar-brand img {
    height: 75px;
    width: auto;
    object-fit: contain;
  }

  .header-bg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
  }

  /* === textos centrais, logos de redes e botão sobre a imagem de fundo === */
  .texto-central {
    position: absolute;
    width: 100%;
    height: 390px;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    top: 42vh;
    text-shadow: #000000 3px 3px 5px;
    color: white;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    font-size: 25px;
    line-height: 5.5vh;  /* espaçamento entre as linhas */
    z-index: 10;
    /*font-family: 'Tangerine', cursive;*/
    /*border: 1px solid white;*/
  }
  .texto-central-linha1 {
    /*width: 100%;*/
    text-align: center;
    /*margin-right: 130px;*/
    font-size: 20px;
    font-family: 'Times New Roman', Helvetica, Times, serif; line-height: 30px;
    /*border: 1px solid whitesmoke;*/
  }
  .texto-central-linha2 {
    text-align: right;
    margin-right: 0px;
    /*font-size: 40px;*/
    font-size: clamp(30px, 3vw, 40px); /* nunca menor que 20px, nem maior que 40px */
    font-family: Helvetica, 'Times New Roman', Times, serif;
    font-weight: 700;
    /*border: 2px solid red;*/
  }
  .texto-central-linha3 {
    text-align: center;
    margin-right: 0px;
    padding-bottom: 22px;
    font-size: 19px;
    line-height: 18px;
    font-family: Helvetica, 'Times New Roman', Times, serif;
    /*border: 2px solid burlywood;*/
  }
  .texto-central-linha4 {
    margin-top: 70px;
    text-align: center;
    font-size: 15px;
    width: 95%;
    padding: 0px 8px 0px 8px;
    font-family: Helvetica, Times, serif; line-height: 30px;
    /*border: 1px solid white;*/
  }
  .texto-central-linha4-menor {
    margin-top: 20px;
    text-align: center;
    font-size: 18px;
    padding: 0px 200px 0px 200px;
    font-family: Helvetica, Times, serif; line-height: 30px;
    /*border: 1px solid white;*/
  }

  /* para criar os ícones de lista personalizados */
  .lista-personalizada {
    list-style: none;
    padding-left: 0;
    text-align: left;
    text-indent: 0em !important;
    /*border: 2px solid blue;*/
  }
   li::before {
    margin-left: 0 !important;
    padding-left: 0 !important;
    /*border: 2px dashed red;*/
  }
  .logos-redes {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 95%;
    height: 44px;
    gap: 20px;
    /*border: 2px solid white;*/
  }
  .logos-redes img {
    width: 30px;
    height: auto;
    /*border: 1px solid red*/
  }

  .custom-btn {           /* ========= botão "junte-se a nós" ========== */
    position: absolute;
    display: flex;
    margin-top: 100px !important;
    align-items: center;
    justify-content: center;
    /*left: 37%;*/
    height: 35px;
    width: 150px;
    font-size: 19px;
    background-color: rgb(25, 176, 157);  /* Cor verde aproximada do logo */
    color: white;
    border-radius: 8px;
    /*display: flex;*/
    transition: background-color 1.0s ease;  /* Animação suave */
    /*border: 1px solid white;*/
  }
  a {
    text-decoration: none;
  }
  .custom-btn:hover {
    text-decoration: none;
    color: #f8c859;
    font-size: 19px !important;
  }

  /* *************************** decoração dos títulos ************************ */
  .linha-titulo {
    display: flex;
    margin-right: auto;
    align-items: end;
    max-width: 95%;
    gap: 15px;
    overflow: hidden;
    margin-bottom: 1em;
    /*border: 2px solid red;*/
  }
  .linha-titulo h3 {
    margin: 0;
    /*font-family: Tangerine, Helvetica, 'Times New Roman', Times, serif;*/
    font-size: 28px;
    color: #6b6b6b;
    /*background-color: #fff;*/
    /*z-index: 1;*/
    padding-left: 2.5vw;
    /*border: 2px solid red;*/
  }
  .linha-titulo::after {
    content: "";
    /*margin-right: calc(40px - .5vw);*/
    flex: 1;
    height: 3px;
    /* animação em tons de cinza */
    /* background: linear-gradient(90deg, #9f9f9f, #636363, #a4a4a4); */

    /* animação em tons de verde claro */
    /* background: linear-gradient(90deg, rgb(25, 176, 157), #97ffb1, rgb(25, 176, 157)); */

    /* animação em tons de verde mais escuro */
    background: linear-gradient(90deg, rgb(21, 141, 125), #1bbbbb, rgb(18, 169, 188));
  

    background-size: 200% 100%;
    animation: deslizar 10s linear infinite;
    /*width: calc(100vw - 100% - 20px);*/
  }
  /* animação */
  @keyframes deslizar {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }
/* ************************** fim decoração títulos ************************** */

 .img-ajustada {
    display: block;
    max-width: 90%;
    height: auto;
    /*margin: 5px auto;*/
    margin-top: 25px;
    border-radius: 15px;
  }
  /* ===== para possibilitar exibição da foto em tela cheia ===== */

  .lightbox {
    position: fixed;
    display: flex;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    animation: abreSuave 0.5s linear;
    z-index: 2000;
  }
  @keyframes abreSuave {
    from {
      opacity: .4;
    }
    to {
      opacity: 1;
    }
  }

  .lightbox:target {
    opacity: 1;
    display: flex;
  }
  .lightbox img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 10px;
    transform: scale(0.8);
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    border: 1px solid #505050;
  }
  .lightbox:target img {
    transform: scale(1);
    opacity: 1;
  }
  .lightbox .fechar {
    position: absolute;
    top: 50px;
    right: 50px;
    color: white;
    text-decoration: none;
    font-size: 2em;
    z-index: 2500;
    font-weight: bold;
  }
  .lightbox .fechar:hover {
    color: rgb(25, 176, 157);
  }
   /* =====  FIM para possibilitar exibição da foto em tela cheia ===== */
   
  .texto-img-paisagem {
    padding-top: 10px;
    max-width: 90%;
    margin: 5px auto;
    hyphens: auto;
    text-align: justify;
    word-break: break-word;
    text-indent: 20px;
    /*border: 2px solid red;*/
  }

  .texto-img-retrato {
    padding-top: 10px;
    max-width: 90%;
    margin: 5px auto;
    hyphens: auto;
    text-align: justify;
    word-break: break-word;
    text-indent: 20px;
    /* border: 2px solid red; */
  }
  .firula {
    display: grid;
    width: 100%;
    place-items: center;
    padding-left: 13vw;
    padding-right: 13vw;
    /*border: 1px solid red;*/
  }

  footer {
    font-size: 0.8em;
    position: relative;
    width: 100%;
    height: 35px;
    color: #bbb;
    background-color: white;
    align-items: center;
    display: flex;
    justify-content: center;
    border: none;
    z-index: 190;
    /*border: 1px solid rgb(183, 12, 12);*/
  }
}
/* ====================== FIM - TELAS MAIORES DO QUE 768px ====================== */


/* ========================== TELAS MAIORES DO QUE 1200px ========================== */
@media (min-width: 1200px) { /* ========== 333333 === T>1200px === 333333 ========== */

/*   .texto-central-linha4-menor {
    margin-top: 20px;
    width: 60%;
  
    font-size: 18px;
    padding: 0px 200px 0px 200px;
    font-family: Helvetica, Times, serif; line-height: 30px;
    border: 1px solid rgb(255, 0, 0);
  } */

  .lista-personalizada {   
    list-style: none;
    margin-left: 50px; /* para aumentar o espaço à esq do ícone de lista */
  }
  .lista-personalizada li {
    margin-left: 0 !important;
    padding-left: 0 !important;
    /*border: 2px solid blue;*/
  }

}