/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 10px;
  overflow-x: hidden; /* Impede rolagem horizontal causada por imagens que vazam */
    scroll-behavior: smooth;
}

@font-face {
  font-family: 'CSBoline';
  src: url('./csb.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Candara';
  src: url('./Candara.ttf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


body {
  font-family: 'Candara', sans-serif;
   margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  background-color: #e3bb7d;
}

h2 {
   font-family: 'CSBoline', sans-serif;
}

/* Seções */
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90rem; /* 90% da altura do viewport */
  background-color: #f0f0f0;
  border: 0.2 solid #333;
  margin: 0 auto;
  position: relative;  /* contexto para imagens posicionadas absolutamente */
  overflow: visible;   /* permite que imagens ultrapassem a seção (mas não o body) */
}

.content {
  width: 80%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative; /* mantém contexto para filhos */
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7F3D1D;
  position: relative;
  z-index: 1000;
  width: 100%;
  padding: 0;
}

/* Container de conteúdo da navbar */
.navbar-content {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

/* Logo da navbar */
.navbar-logo a {
  display: inline-block;
  position: relative;
}

.navbar-logo #logo-hover {
  display: none;
}

.navbar-logo a:hover .logo-img {
  transform: scale(1.1);
}

.navbar-logo img {
  max-width: 12rem;
  height: auto;
  padding: 0.5rem 0;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Ícone Instagram */
.navbar .fab {
  font-size: 6rem;
  color: #E3BF87;
  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.navbar .fab:hover {
  transform: scale(1.3);
  color: #f1b63e;
  text-shadow: 0 0 0.8rem rgba(241, 182, 62, 0.5);
}

/* Links da navbar */
.navbar-links {
  list-style: none;
  display: flex;
  gap: 8rem;
}

.navbar-links li {
  font-size: 4rem;
}

.navbar-links a {
  text-decoration: none;
  color: #E3BF87;
  position: relative;
  display: inline-block;
  padding-bottom: 0.2rem;
  transition: color 0.3s ease, transform 0.3s ease;
   font-family: 'CSBoline', sans-serif;
}

/* Linha de destaque animada */
.navbar-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background-color: #f1b63e;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

.navbar-links a:hover {
  color: #f1b63e;
  transform: translateY(-0.2rem) scale(1.2);
}

.navbar-links a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.navbar-links a:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(241, 182, 62, 0.5);
}

/* Estilo do botão do menu (hamburger) */
.menu-toggle {
  display: none; /* Oculta no desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 4rem;
  height: 3rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

.menu-toggle .bar {
  height: 0.4rem;
  width: 100%;
  background-color: #E3BF87;
  border-radius: 1rem;
  transition: all 0.3s ease;
}


/* Seções - Capa */
.capa {
  background-color: #e3bf87;
  position: relative;
  overflow: visible;
  height: 110rem; 
}

/* Imagens posicionadas dentro da seção Capa */
.capa .fixed-img {
  position: absolute;
  z-index: 10;
  max-width: 400rem; /* limite fixo para desktop */
  height: auto;
  object-fit: contain;
}

.capa .logo-animada {
  top: -5rem;
  left: 130rem;    /* distância da esquerda */
  width: clamp(135rem, 1vw, 140rem);
  max-width: 90%;  /* nunca ultrapassa a tela */
animation: pulseSwing 3s infinite ease-in-out; /* animação combinada de pulsação e balanço */
}

/* Animação combinada de pulsação e balanço */
@keyframes pulseSwing {
  0% {
    transform: scale(1) rotate(0deg); /* Inicial, sem escalamento e rotação */
  }
  25% {
    transform: scale(1.05) rotate(-2deg); /* Pulsação + Balanço para a esquerda */
  }
  50% {
    transform: scale(1) rotate(2deg); /* Pulsação normal + Balanço para a direita */
  }
  75% {
    transform: scale(1.05) rotate(-1deg); /* Pulsação + Balanço mais suave para a esquerda */
  }
  100% {
    transform: scale(1) rotate(0deg); /* Finaliza com a escala normal e sem rotação */
  }
}

/* Imagem 1 */
.capa .img1 {
  top: -28rem;    /* 15rem = 150px acima */
  left: 90%;    /* distância da esquerda */
  width: 80rem;   /* largura fixa */
}

/* Imagem 2 */
.capa .img2 {
  bottom: -28rem; /* 25rem = 250px abaixo */
  right: 90%;   /* distância da direita */
  transform: scale(-1, -1);
  width: 80rem;
    max-width: 80%;
}

/* Seção Projeto */
.Projeto {
  background-color: #e3bf87;
  position: relative;
  overflow: visible;
   height: 110rem; 
}

/* Conteúdo textual */
.Projeto p {
  font-size: 3.5rem; /* 40px */
  margin-top: 2rem; /* 20px */
  text-align: justify !important;
  color: #354524;
}

.Projeto .content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 80%;
  height: 100%;
  padding: 2rem; /* 20px */
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.Projeto .content > * {
  width: 50%;
  text-align: left;
}

/* Texto invasor */
.Projeto .texto-invasor {
  position: relative;
  transform: translateY(-15rem); /* -150px */
  z-index: 5;
}

/* Imagens fixas */
.Projeto .fixed-img {
  position: absolute;
  z-index: 10;
  max-width: 400rem; /* limite grande para desktop */
  height: auto;
  object-fit: contain;
}

/* Imagem 1 */
.Projeto .img1 {
  top: -12rem;       /* posição fixa */
  left: 20%;
  width: 40rem;     /* tamanho fixo */
    animation: girar 60s linear infinite; /* animação de rotação contínua */
}

/* Animação de rotação */
@keyframes girar {
  0% {
    transform: rotate(0deg); /* Começa com a imagem na posição original */
  }
  100% {
    transform: rotate(360deg); /* Gira até 360 graus */
  }
}

/* Imagem 2 */
.Projeto .img2 {
  bottom: -7rem;    /* distância fixa da base */
  right: 70%;
  width: 60rem;
}

/* Imagem 3 */
.Projeto .img3 {
  bottom: -0.1rem;
  left: 45%;
  width: 120rem;
  clip-path: inset(0 0% 0 0); /* corta parte direita para evitar overflow */
}

/* Seção Ameaça */
.ameaca {
  background-color: #7F3D1D;
  position: relative;
  overflow: visible;
  min-height: clamp(80rem, 90vh, 110rem); 
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4)),
    url("./terra.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ameaca h2 {
  padding-top: 3rem; /* 30px */
  padding-bottom: 3rem;
  text-align: left;
  font-size: 8rem;
  margin: 0;
  color: #e3bf87;
}

.ameaca p {
  font-size: 3.5rem;
  margin-top: 1.5rem;
  text-align: justify !important;
  color: #e3bf87;
}

.ameaca .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 80%;
  height: 100%;
  padding: 2rem 1.25rem; /* 20px 20px */
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.ameaca .content > * {
  width: 60%;
  text-align: left;
}

.ameaca .content h2 {
  width: 95%; /* ou 100% se quiser ocupar tudo */
}

.meia-elipse {
  position: absolute;
  top: 20%;
  right: 0;
  transform: translateY(-50%);
  width: 50rem;
  height: 30rem;
  background-color: #e3bb7d; /* bege */
  border: 1.2rem solid #2f3e1e; /* verde escuro */
  border-right: none;
  border-top-left-radius: 100rem;
  border-bottom-left-radius: 100rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* garante que nada saia da elipse */
}

.meia-elipse {
  /* ... já está com seu CSS atual */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* garante que nada saia da elipse */
}

.img-na-elipse {
  position: absolute;
  width: 25rem; /* ou o tamanho desejado */
  height: auto;
  object-fit: contain;

  top: 10%;
  left: 10%;
}

/* Imagens posicionadas dentro da seção Ameaça */
.ameaca .fixed-img {
  position: absolute;
  z-index: 10;
  max-width: 400rem; /* tamanho fixo */
  height: auto;
  object-fit: contain;
}

.ameaca .img1 {
  top: 35%;
  left: 60%;
  width: clamp(65rem, 1vw, 65rem);
  position: absolute;
  object-fit: contain;
  animation: tremorRealista 3s ease-in-out infinite; /* Tremor mais fluido e dinâmico */
}

/* Animação de tremor realista */
@keyframes tremorRealista {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg); /* Posição inicial */
  }
  10% {
    transform: translateX(-5px) translateY(5px) rotate(-3deg); /* Move para a esquerda e para cima, girando */
  }
  20% {
    transform: translateX(5px) translateY(-5px) rotate(3deg); /* Move para a direita e para baixo, girando */
  }
  30% {
    transform: translateX(-7px) translateY(3px) rotate(-5deg); /* Move para a esquerda com mais rotação */
  }
  40% {
    transform: translateX(7px) translateY(-3px) rotate(5deg); /* Move para a direita com rotação */
  }
  50% {
    transform: translateX(0) translateY(0) rotate(0deg); /* Retorna à posição original */
  }
  60% {
    transform: translateX(-5px) translateY(2px) rotate(-2deg); /* Move para a esquerda e para cima */
  }
  70% {
    transform: translateX(5px) translateY(-2px) rotate(2deg); /* Move para a direita e para baixo */
  }
  80% {
    transform: translateX(-3px) translateY(1px) rotate(-1deg); /* Movimento pequeno para a esquerda e cima */
  }
  90% {
    transform: translateX(3px) translateY(-1px) rotate(1deg); /* Movimento pequeno para a direita e baixo */
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0deg); /* Retorna à posição original */
  }
}


.divisor {
  height: 8rem; /* espessura da linha */
  background-color: #7F3D1D; /* cor da linha */
  width: 100%;
   overflow: hidden; /* Ou auto, se for necessário ter rolagem interna */
}

/* Seção Cultura */
.cultura {
  min-height: clamp(80rem, 90vh, 110rem); 
  position: relative;
  background-color: #000; /* cor fallback */
  background-image: url('./burru.png'); /* substitua pelo caminho da imagem */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 4rem 0;
   overflow: hidden; /* Ou auto, se for necessário ter rolagem interna */
}


.cultura .content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 90%;
  min-height: clamp(80rem, 90vh, 110rem); 
  padding: 2rem;
  box-sizing: border-box;
  gap: 2rem;
}

/* Imagem ocupa a esquerda e todo o espaço possível */
.cultura-img {
  width: 60%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.cultura-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0.8rem;
}

/* Texto fica à direita, com largura limitada */
.cultura-texto {
  width: 60%;
  text-align: justify; /* texto justificado */
  font-size: 3.5rem; /* reduz um pouco para melhorar legibilidade */
  line-height: 1.6; /* espaçamento entre linhas para melhor leitura */
  color: #fff; /* cor branca para contraste com fundo escuro */
  background-color: rgba(139, 69, 19, 0.8); /* exemplo */
  padding: 3rem; /* espaçamento interno */
  border-radius: 2rem; /* bordas arredondadas */
  letter-spacing: 0.05em; /* espaçamento entre letras */
  box-sizing: border-box; /* garantir que padding não aumente a largura */
}




/* Seção Assinatura */
.assinatura {
  background-color: #E3BF87;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;   /* 🔑 referência para as imagens */
  overflow: hidden;    /* permite que as imagens vazem */
  z-index: 1;
  padding-bottom: 7rem;
  height: 140rem;
}

.assinatura h2 {
  padding-top: 1rem;
  text-align: center;
  font-size: 8rem;   /* 4rem é grande, mas legível, pode aumentar se quiser */
  margin: 0 0 5rem 0; /* margem embaixo para dar espaçamento */
  color: #354524;
}

.assinatura p {
  padding-top: 1rem;
  text-align: center;
  font-size: 3.5rem;   /* 4rem é grande, mas legível, pode aumentar se quiser */
  margin: 0 0 5rem 0; /* margem embaixo para dar espaçamento */
  color: #354524;
}

.assinatura .container {
  max-width: 60rem;   /* limita largura do formulário */
  width: 100%;
  padding: 2rem 4rem;
  box-sizing: border-box;
}

.assinatura label {
  font-weight: bold;
  font-size: 3rem;
  color: #5a3a21;
  display: block;
  margin-bottom: 0.8rem;
  margin-top: 2rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: left;    /* garante que o texto do label fique alinhado à esquerda */
  width: 100%;
}

.assinatura input[type="text"],
.assinatura input[type="email"],
.assinatura textarea {
   width: 70rem; /* largura fixa em pixels */
  max-width: 100%;      /* garante que não ultrapasse */
  padding: 1.5rem 2rem;
  font-size: 3rem;
  border: 0.5rem solid #7f5732;
  border-radius: 3rem;
  outline: none;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  resize: none;
  
  height: 6rem;         /* controla a altura dos inputs */
}

.assinatura textarea {
  min-height: 12rem;    /* altura maior para o campo de texto */
  height: 10rem;         /* permite expandir conforme conteúdo */
}



/* animação de pulso contínua */
@keyframes pulse-slow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 201, 112, 0.4);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 1.5rem 0.5rem rgba(244, 201, 112, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 201, 112, 0.4);
  }
}

/* Patterns da Assinatura */
.assinatura .fixed-img {
  position: absolute;   /* 🔑 não interfere no fluxo */
  z-index: 10;
  height: auto;
  object-fit: contain;
}

/* Imagem 1 direita*/
.assinatura .img1 {
   bottom: -35rem;  /* desce da borda da seção */
  left: 75%;
  width: 90rem;
}

/* Imagem 2 */
.assinatura .img2 {
  bottom: -35rem;  /* desce da borda da seção */
  right: 75%;
 transform: scaleX(-1);
width: 90rem;
}

   .form-group {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
    }

    label {
      font-weight: bold;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
      padding: 10px;
      font-size: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }

    button.btn-submit {
  margin-top: 5rem;
  margin-bottom: 5rem;
  background-color: #34401e;
  color: #F4C970;
  border: none;
  padding: 2.5rem 3.5rem;
  font-size: 4rem;
  border-radius: 30rem;
  cursor: pointer;
  text-transform: none;
  font-weight: bold;
  width: max-content;
  transition: background-color 0.3s ease, transform 0.3s ease;
   font-family: 'CSBoline', sans-serif;
  animation: pulse-slow 2.5s ease-in-out infinite;
}

.assinatura button:hover {
  background-color: #7F3D1D; /* NOVA cor ao hover */
  transform: scale(1.08);
  box-shadow: 0 0 2rem rgba(244, 201, 112, 0.5);
}

    button.btn-submit:disabled {
      background-color: #7F3D1D;
      cursor: not-allowed;
    }

    /* Loader (spinner) básico */
    .loader {
      border: 3px solid #f3f3f3; /* cinza claro */
      border-top: 3px solid #3498db; /* azul */
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: spin 1s linear infinite;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

.footer {
  background-color: #7F3D1D;
  color: #E3BF87;
  height: 8rem;               /* mesma altura do header/nav */
  display: flex;
  align-items: center;
  position: relative;         /* referência para a ferradura */
  overflow: visible;          /* deixa a ferradura vazar pra cima */
}

.footer-content {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative; /* garante que textos fiquem normais */
}

.footer-left,
.footer-right {
  flex: 1;
  font-size: 3.5rem;
  color: #E3BF87;
   font-family: 'CSBoline', sans-serif;
}

.footer-left a,
.footer-right a {
  color: #E3BF87;
  text-decoration: none;
  transition: color 0.3s ease;
   font-family: 'CSBoline', sans-serif;
}

.footer-left a:hover,
.footer-right a:hover {
  color: #f1b63e;
}

.footer-left { text-align: left; }
.footer-right { text-align: right; }

/* ferradura solta no meio */
.scroll-image {
  position: absolute;
  top: -150%;
  left: 50%;
  transform: translateX(-50%);
  height: 20rem;
  width: auto;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  z-index: 100;
}

/* Efeito ao passar o mouse */
.scroll-image:hover {
  transform: translateX(-50%) translateY(-2.5rem) scale(1.1);
  filter: brightness(1.4) drop-shadow(0 0 2rem #f1b63e) drop-shadow(0 0 4rem #f1b63e);
}

   #resposta {
      margin-top: 1.5rem;
      padding-bottom: 0.5;
      font-size: 4rem;
      font-weight: bold;
      min-height: 40px;
    }


@media (max-width: 1750px) { 
    html {
        font-size: clamp(8px, 1vw, 9.5px)
    }
}


@media (max-width: 1600px) { 
    html {
        font-size: clamp(7.5px, 1vw, 8px)
    }
}



@media (max-width: 1440px) { 
    html {
        font-size: clamp(7px, 1vw, 7.5px)
    }
}


@media (max-width: 1366px) { 
    html {
        font-size: clamp(6.7px, 1vw, 7.1px)
    }
}


@media (max-width: 1280px) { 
    html {
        font-size: 6.8px
    }
}


/* ============================= */
/* VERSÃO MOBILE - TELAS PEQUENAS */
/* ============================= */



/* MEDIA QUERY MOBILE */
  /* Mobile */
@media (max-width: 768px) {
  html {
        font-size: 6px
    }

  .navbar-links,
  .menu-toggle {
    display: none;
  }

  /* Mantém a navbar como flex com espaço entre, logo à esquerda e insta à direita */
  .navbar {
    padding: 0 1rem;
    height: 10rem;
  }

  .navbar-social .instagram-icon {
    font-size: 6rem; /* menor no mobile */
  }

.capa {
  height: 80rem; 
}

.content {
  width: 90%;
  margin-top: -10rem;
}

/* Imagem 1 */
.capa .img1 {
  top: -10rem;    /* 15rem = 150px acima */
  left: 85%;    /* distância da esquerda */
  width: 40rem;   /* largura fixa */
}

/* Imagem 2 */
.capa .img2 {
  bottom: -10rem; /* 25rem = 250px abaixo */
  right: 85%;   /* distância da direita */
  transform: scale(-1, -1);
  width: 40rem;
}


/* Seção Projeto */
.Projeto {
  background-color: #e3bf87;
  position: relative;
  overflow: visible;
   height: 110rem; 
}

/* Conteúdo textual */
.Projeto p {
  font-size: 3.5rem; /* 40px */
  margin-top: 2rem; /* 20px */
  text-align: justify !important;
  color: #354524;
}

.Projeto .content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 90%;
  height: 100%;
  padding: 2rem; /* 20px */
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.Projeto .content > * {
  width: 60%;
  text-align: left;
}

/* Texto invasor */
.Projeto .texto-invasor {
  position: relative;
  transform: translateY(-15rem); /* -150px */
  z-index: 5;
}

/* Imagens fixas */
.Projeto .fixed-img {
  position: absolute;
  z-index: 10;
  max-width: 400rem; /* limite grande para desktop */
  height: auto;
  object-fit: contain;
}

/* Imagem 1 */
.Projeto .img1 {
  top: 5rem;       /* posição fixa */
  left: 4%;
  width: 40rem;     /* tamanho fixo */
    animation: girar 60s linear infinite; /* animação de rotação contínua */
}


/* Imagem 2 */
.Projeto .img2 {
  bottom: -12rem;    /* distância fixa da base */
  right: 60%;
  width: 60rem;
}

/* Imagem 3 */
.Projeto .img3 {
  bottom: -5rem;
  left: 40%;
  width: 120rem;
  clip-path: inset(0 0% 0 0); /* corta parte direita para evitar overflow */
}



/* Seção Ameaça */
.ameaca {
  background-color: #7F3D1D;
  position: relative;
  overflow: visible;
  min-height: clamp(80rem, 90vh, 110rem); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ameaca h2 {
  padding-top: 9rem; /* 30px */
  padding-bottom: 3rem;
  text-align: left;
  font-size: 6rem;
  margin: 0;
  color: #e3bf87;
}

.ameaca p {
  font-size: 3.5rem;
  margin-top: 1.5rem;
  text-align: justify !important;
  color: #e3bf87;
}

.ameaca .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 90%;
  height: 100%;
  padding: 2rem 1.25rem; /* 20px 20px */
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.ameaca .content > * {
  width: 50%;
  text-align: left;
}

.ameaca .content h2 {
  width: 80%; /* ou 100% se quiser ocupar tudo */
}

.meia-elipse {
  position: absolute;
  top: 20%;
  right: 0;
  transform: translateY(-50%);
  width: 40rem;
  height: 30rem;
  background-color: #e3bb7d; /* bege */
  border: 1.2rem solid #2f3e1e; /* verde escuro */
  border-right: none;
  border-top-left-radius: 100rem;
  border-bottom-left-radius: 100rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* garante que nada saia da elipse */
}

.meia-elipse {
  /* ... já está com seu CSS atual */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* garante que nada saia da elipse */
}

.img-na-elipse {
  position: absolute;
  width: 25rem; /* ou o tamanho desejado */
  height: auto;
  object-fit: contain;

  top: 10%;
  left: 10%;
}

/* Imagens posicionadas dentro da seção Ameaça */
.ameaca .fixed-img {
  position: absolute;
  z-index: 10;
  max-width: 400rem; /* tamanho fixo */
  height: auto;
  object-fit: contain;
}

.ameaca .img1 {
  top: 45%;
  left: 55%;
  width: 55rem;
  position: absolute;
  object-fit: contain;
  animation: tremorRealista 3s ease-in-out infinite; /* Tremor mais fluido e dinâmico */
}

/* Seção Cultura */
.cultura {
  min-height: clamp(80rem, 90vh, 110rem); 
  position: relative;
  background-color: #000; /* cor fallback */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 4rem 0;
   overflow: hidden; /* Ou auto, se for necessário ter rolagem interna */
}


.cultura .content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 95%;
  min-height: clamp(80rem, 90vh, 110rem); 
  padding: 2rem;
  box-sizing: border-box;
  gap: 2rem;
}

/* Imagem ocupa a esquerda e todo o espaço possível */

/* Texto fica à direita, com largura limitada */
.cultura-texto {
  width: 55%;
  text-align: justify; /* texto justificado */
  font-size: 3rem; /* reduz um pouco para melhorar legibilidade */
  line-height: 1.6; /* espaçamento entre linhas para melhor leitura */
  color: #fff; /* cor branca para contraste com fundo escuro */
  background-color: rgba(139, 69, 19, 0.8); /* exemplo */
  padding: 3rem; /* espaçamento interno */
  border-radius: 2rem; /* bordas arredondadas */
  letter-spacing: 0.05em; /* espaçamento entre letras */
  box-sizing: border-box; /* garantir que padding não aumente a largura */
  margin-top: 10rem;
}



/* Seção Assinatura */
.assinatura {
  background-color: #E3BF87;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;   /* 🔑 referência para as imagens */
  overflow: hidden;    /* permite que as imagens vazem */
  z-index: 1;
  padding-bottom: 7rem;
  height: 135rem;
}

.assinatura .content{
  width: 90%;
  margin: 0;
}



.assinatura h2 {
  padding-top: 1rem;
  text-align: center;
  font-size: 6rem;   /* 4rem é grande, mas legível, pode aumentar se quiser */
  margin: 0 0 5rem 0; /* margem embaixo para dar espaçamento */
  color: #354524;
}

.assinatura p {
  padding-top: 1rem;
  text-align: center;
  font-size: 3rem;   /* 4rem é grande, mas legível, pode aumentar se quiser */
  margin: 0 0 5rem 0; /* margem embaixo para dar espaçamento */
  color: #354524;
}

.assinatura .container {
  max-width: 60rem;   /* limita largura do formulário */
  width: 100%;
  padding: 2rem 40rem;
  box-sizing: border-box;
}

.assinatura label {
  font-weight: bold;
  font-size: 3rem;
  color: #5a3a21;
  display: block;
  margin-bottom: 0.8rem;
  margin-top: 2rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-align: left;    /* garante que o texto do label fique alinhado à esquerda */
  width: 100%;
}

.assinatura input[type="text"],
.assinatura input[type="email"],
.assinatura textarea {
   width: 70rem; /* largura fixa em pixels */
  max-width: 100%;      /* garante que não ultrapasse */
  padding: 1.5rem 2rem;
  font-size: 2rem;
  border: 0.5rem solid #7f5732;
  border-radius: 3rem;
  outline: none;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  resize: none;
  
  height: 6rem;         /* controla a altura dos inputs */
}

.assinatura textarea {
  min-height: 12rem;    /* altura maior para o campo de texto */
  height: 10rem;         /* permite expandir conforme conteúdo */
}


/* Patterns da Assinatura */
.assinatura .fixed-img {
  position: absolute;   /* 🔑 não interfere no fluxo */
  z-index: 10;
  height: auto;
  object-fit: contain;
}

/* Imagem 1 direita*/
.assinatura .img1 {
   bottom: -35rem;  /* desce da borda da seção */
  left: 75%;
  width: 90rem;
}

/* Imagem 2 */
.assinatura .img2 {
  bottom: -35rem;  /* desce da borda da seção */
  right: 75%;
 transform: scaleX(-1);
width: 90rem;
}

   .form-group {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
    }

    label {
      font-weight: bold;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
      padding: 10px;
      font-size: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: vertical;
    }

    button.btn-submit {
  margin-top: 5rem;
  margin-bottom: 5rem;
  background-color: #34401e;
  color: #F4C970;
  border: none;
  padding: 2.5rem 3.5rem;
  font-size: 4rem;
  border-radius: 30rem;
  cursor: pointer;
  text-transform: none;
  font-weight: bold;
  width: max-content;
  transition: background-color 0.3s ease, transform 0.3s ease;
   font-family: 'CSBoline', sans-serif;
  animation: pulse-slow 2.5s ease-in-out infinite;
}

.assinatura button:hover {
  background-color: #7F3D1D; /* NOVA cor ao hover */
  transform: scale(1.08);
  box-shadow: 0 0 2rem rgba(244, 201, 112, 0.5);
}

    button.btn-submit:disabled {
      background-color: #7F3D1D;
      cursor: not-allowed;
    }

    /* Loader (spinner) básico */
    .loader {
      border: 3px solid #f3f3f3; /* cinza claro */
      border-top: 3px solid #3498db; /* azul */
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: spin 1s linear infinite;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

.footer {
  background-color: #7F3D1D;
  color: #E3BF87;
  height: 8rem;               /* mesma altura do header/nav */
  display: flex;
  align-items: center;
  position: relative;         /* referência para a ferradura */
  overflow: visible;          /* deixa a ferradura vazar pra cima */
}

.footer-content {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative; /* garante que textos fiquem normais */
}

.footer-left,
.footer-right {
  flex: 1;
  font-size: 3rem;
  color: #E3BF87;
   font-family: 'CSBoline', sans-serif;
}

.footer-left a,
.footer-right a {
  color: #E3BF87;
  text-decoration: none;
  transition: color 0.3s ease;
   font-family: 'CSBoline', sans-serif;
}

.footer-left a:hover,
.footer-right a:hover {
  color: #f1b63e;
}

.footer-left { text-align: left; }
.footer-right { text-align: right; }

/* ferradura solta no meio */
.scroll-image {
  position: absolute;
  top: -90%;
  left: 50%;
  transform: translateX(-50%);
  height: 15rem;
  width: auto;
  cursor: pointer;
  transition: transform 0.25s ease, filter 0.25s ease;
  z-index: 100;
}

/* Efeito ao passar o mouse */
.scroll-image:hover {
  transform: translateX(-50%) translateY(-2.5rem) scale(1.1);
  filter: brightness(1.4) drop-shadow(0 0 2rem #f1b63e) drop-shadow(0 0 4rem #f1b63e);
}

   #resposta {
      margin-top: 1.5rem;
      padding-bottom: 0.5;
      font-size: 4rem;
      font-weight: bold;
      min-height: 40px;
    }








}

@media (max-width: 650px) {
  html {
        font-size: 5px
    }
  }

  @media (max-width: 550px) {
  html {
        font-size: 4px
    }
  }

   @media (max-width: 460px) {
  html {
        font-size: 3px
    }

    .assinatura {
  background-color: #E3BF87;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  position: relative;   /* 🔑 referência para as imagens */
  overflow: hidden;    /* permite que as imagens vazem */
  z-index: 1;
  padding-top: 15rem;
}
    .assinatura .content{
  width: 90%;
  margin: 0;
}

  }