/* =========================
   CTA
========================= */

/* SEÇÃO */
.cta {
  position: relative;
  width: 100%;
  height: 700px; /* Altura fixa conforme especificado */
  overflow: hidden; /* Garante que a imagem não vaze */
  margin-top: 3.5rem;
}

/* IMAGEM DE FUNDO - O contêiner <div> */
.cta-bg {
  position: absolute;
  inset: 0; /* Equivalente a top: 0; left: 0; right: 0; bottom: 0; */
  width: 100%;
  height: 100%;
}

/* A imagem <img> dentro da div */
.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Corta a imagem para preencher a área, mantendo a proporção */
  max-width: none; /* Garante que a regra global de max-width não interfira */
}

/* CONTEÚDO (BOTÃO) */
.cta-content {
  position: relative; /* Para ficar acima da imagem */
  z-index: 1;
  
  /* Layout flex para alinhamento */
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: flex-end;   /* Alinha o item filho (botão) na base */
  
  width: 100%;
  height: 100%;
  
  /* Afasta o botão da base, controlando o alinhamento vertical */
  padding-bottom: 155px;
}

/* BOTÃO */
.cta-button {
  /* Dimensões */
  width: 220px;
  height: 60px;

  /* Cores */
  background: #FFF1CF;
  color: #1D0C03;

  /* Alinhamento do texto interno */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Tipografia */
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;

  /* Estilos adicionais */
  text-decoration: none; /* Remove sublinhado do link */
  border: none;
  cursor: pointer;
  
  /* Transição suave para o hover */
  transition: all 0.3s ease-out;
}

/* EFEITO HOVER NO BOTÃO */
.cta-button:hover {
  opacity: 0.9;
  transform: translateY(-3  px); /* Move o botão levemente para cima */
}

/* =========================
   CTA (MOBILE)
========================= */
@media (max-width: 768px) {
  /* SEÇÃO */
  .cta {
    height: 527px; /* Altura para mobile, conforme Figma */
    margin-top: 0px;
  }

  /* CONTEÚDO (BOTÃO) */
  .cta-content {
    padding-bottom: 70px; /* Reduz o espaçamento inferior para mobile */
  }

  /* BOTÃO */
  .cta-button {
    width: 144px; /* Largura do botão, conforme Figma */
    height: 48px; /* Altura do botão, conforme Figma */
    font-size: 18px; /* Tamanho de fonte ajustado para o botão mobile */
  }

  /* TROCA DE IMAGEM PARA MOBILE */
  .cta-bg {
    background-image: url('images/fotoctamobile.webp');
    background-size: cover;
    background-position: center;
  }

  .cta-bg img {
    display: none; /* Esconde a imagem original do HTML */
  }
}