/* .btn_reuniao{
    background-color: var(--azul_claro);
    color: var(--cor_btn) !important;
    display: grid;
    width: fit-content;
    height: fit-content;
    border-radius: 20px;
    justify-content: center;
    align-content: center;
    align-self: end;
    padding: 7px 5% 7px 5%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
  } */
.btn_reuniao:hover{
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.popup{
  max-height: 450px;
  max-width:1000px;
  background-image: url(../images/pagina_principal/imagem_popup.svg);
  background-size: cover  ;
  border-radius: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  gap: 2em;
  grid-row-gap: 0px;
  overflow: hidden;
  /* Para o deslizar do card */
  max-height: 0;
  padding: 0;
  position: relative;
  transition: all 0.3s ease;
  margin-top: 3%;
  animation: fadeIn 0.3s ease;
  
  
  & .texto_popup{
    grid-area: 1 / 1 / 2 / 2;

    & h1{
      font-family: 'Novecento slab Book', sans-serif;
      font-size: clamp(1.8rem,2.333vw,3rem);
      font-weight: 100;
    }

    & p{
      margin-top: 5%;
      font-family: "NeueKabel Book";
      font-size: clamp(1.3rem,2vw,2.8rem);
      font-weight: 50;
    }
  }

  & form{
    display: grid;
    gap:20px;
    
    & input, textarea{
      background-color: var(--bege);
      color: var(--azul_escuro);
      border-radius: 15px;
      font-family: "NeueKabel Extra Light";
      font-size: clamp(1rem,1.167vw,2rem);
      padding: 2%;
      border: none;
      scrollbar-track-color: transparent;
    }
    & input::placeholder{
      color: var(--azul_escuro);
    }

    & .descricao{
      padding-bottom:8% !important;
    }
    & button{
      font-family: "NeueKabel Extra Light";
      font-size: 1.2rem;
      border: none;
      font-weight: 100;

    }


  }

}

.cortina{
  position:fixed;
  display: none;
  z-index: 100;
  height: 100%;
  width: 100%;
  top:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-content: center;
  & .popup{
    max-height: 500px;
    padding: 4%;

    & .btn_sair{
      border: none;
      background-color: transparent;
      position: absolute;
      margin: 2% 2% 4% 0;
      right:0;
      top:0;
      transition: transform 0.3s ease-in-out;
    }

    & .btn_sair:hover{
      transform: scale(1.1);
    }
  }
}

@keyframes fadeIn{
  from { opacity: 0; transform: scale(0.9);}
  to { opacity: 1; transform: scale(1); }
}

@media(max-width:768px){
    .cortina {

    & .popup {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, 1fr);
      padding: 10%;
      height: fit-content !important;
      gap: 10px;
      align-self: center;

      & h1 {
        font-size: 2rem;
      }
      & p {
        font-size: 1.5rem;
        margin: 2% 0%;
      }

      & form {
        gap: 15px;
        & input, textarea {
          font-size: 0.8rem;
          padding: 2%;
          border-radius: 10px;
        }

        & button {
          font-size: 1rem;
          border-radius: 10px;
        }
        
      }

      & .btn_sair {
        margin: 5% 5% 0 0;
      }
    }
  }
}