body {
  overflow-x: hidden;
  background: #F5E9DC;
  background: linear-gradient(106deg,rgba(245, 233, 220, 1) 12%, rgba(247, 236, 235, 1) 25%, rgba(235, 206, 206, 0.64) 38%, rgba(128, 52, 52, 0.38) 51%, rgba(128, 17, 17, 0.64) 66%, rgba(128, 5, 5, 0.92) 100%);
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

html{
  overflow-x: hidden;

}

/* Header logo */
.logo-header {
  top: 0;
  left: 0;
  z-index: 1000;
}

.logo-img {
  padding-top: 10px;
  max-width: 380px;
  height: auto;
}

/* Ajuste da imagem */
.img-fluid {
  width: 110%;
  max-width: 130%;
  height: auto;
}

.img.img-fluid{
  margin-top: 30px;
}

.faixa-vermelha {
  width: 100%;
  height: 40px; /* altura da faixa, ajuste conforme necessário */
  background-color: #880000; /* vermelho escuro, igual ao do footer */
  margin-top:0px; /* espaço entre a imagem e a faixa */
  border-radius: 0 0 8px 8px; /* opcional: cantos arredondados na parte inferior */
}

.faixa-vermelha h5 {
  color: #fff;
  font-size: 18px;
  margin: 0;
  padding: 10px;
  font-family: 'Playfair Display', serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.faixa-vermelha h5 i {
  color: #ffd900c0; /* Dourado para dar destaque */
  font-size: 20px;
  margin-right: 2px;
  margin-left: 20px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* Títulos */
h1{
  font-family: 'Playfair Display', serif;
  color: #661923;
  font-size: 44px;
}

.bloco-direito h2 {
  margin-bottom: 5px; /* Ajuste o valor conforme necessário */
}

.bloco-direito h1,
.bloco-direito h2,
.bloco-direito p {
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.bloco-direito {
  padding: 10px;
  border-radius: 8px;
  backdrop-filter: blur(1px);
}


/* Textos */
body, p {
  font-family: 'Lato', sans-serif;
  font-size: 23px;
}

/* Main */
main {
  position: relative;
  z-index: 2;
  max-width: 5px;
  margin: 0;
  flex: 1; /* Faz o main ocupar todo o espaço possível */
}

/* Flexbox para organizar os blocos */
.conteudo-principal {
  display: flex;
  align-items: center;
  justify-content: center; /* <- Alterado aqui */
  flex-wrap: wrap;
  gap: 10px; /* <- Novo: cria espaçamento sem colar na borda */
  max-width: 1090px;
  min-height: 100px; /* ou qualquer valor que quiser */
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Cada bloco */
.bloco {
  flex: 1 1 33%; /* <- Reduzido um pouco pra compensar o 'gap' */
  text-align:justify;
  box-sizing: border-box; /* <- Garante que padding/margin não quebre o layout */
}

/* Bloco da imagem central */
.bloco-centro {
  flex: 2 1 30%; /* <- O meio continua maior */
  display: flex;
  padding-top: 5px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 300px; /* ou qualquer valor que quiser */
  flex-direction: column; /* <- Isso empilha verticalmente */
}

/*footer*/
.footer-personalizado {
  background-color: #880000;
  width: 100%;
  height: auto;
  min-height: 92px; /* ou qualquer valor que preferir */
}

/* Responsividade (celular) */
@media (max-width: 768px) {
  .conteudo-principal {
    flex-direction: column;
    align-items: center;
  }
  
  .bloco, .bloco-centro {
    flex: 1 1 100%;
  }

  img.logo-img{
    width: 40%;
  }

  h1.fw-bold{
    padding: 30px;
    font-size: 40px;
  }
}

main p {
  text-align: center;
}

/* Animações */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow {
  0% { box-shadow: 0 0 5px #A97C50; }
  50% { box-shadow: 0 0 20px #b47a41; }
  100% { box-shadow: 0 0 5px #A97C50; }
}

/* Botão */
.btn-personalizado {
  background: linear-gradient(270deg, #910d0d, #cf2020c9, #8b0303);
  background-size: 600% 600%;
  color: white;
  border: none;
  padding: 10px 20px;
  font-family: 'Lato', sans-serif;
  font-size: 100%;
  font-weight: bold;
  border-radius: 20px;
  animation: gradientMove 10s ease infinite, glow 2s ease-in-out infinite;
  transition: 0.3s ease;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.btn-personalizado:hover {
  background: #5e0c0c;
  background-size: 400% 400%;
  animation: gradient-glow 4s ease infinite;
  color: rgb(255, 251, 251);
  text-shadow: 1px 1px 4px rgba(247, 233, 111, 0.7);
  transform: scale(1.08);
}

/* Ajustes específicos de espaçamento */
.bloco-esquerdo {
  margin-top: 12%;
}

.bloco-direito {
  padding-top: 10%;
  padding-bottom: 3%;
}

div.container{
  text-align: center;
}

/* Responsividade (iPad / Tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  .conteudo-principal {
    flex-direction: column;
    align-items: center;
  }

  .bloco, .bloco-centro {
    flex: 1 1 100%;
    max-width: 80%;
  }

  img.logo-img {
    max-width: 250px;
  }

  img.img-fluid{
    max-width: 300px;
  }

  h1 {
    margin-top: 30px;
    font-size: 38px;
    text-align: center;
  }

  .bloco-direito h2 {
    font-size: 28px;
    text-align: center;
  }

  body, p {
    font-size: 20px;
  }

  .btn-personalizado {
    padding: 10px 16px;
    font-size: 95%;
  }

  .bloco-esquerdo{
    padding-top: 6%;
    padding-bottom: 3%;
    margin-top: 10%;
  }

  .bloco-direito{
    padding-top: 6%;
    padding-bottom: 3%;
  }
}