@charset "utf-8";
/* CSS Document */

    :root {
      --purple: #6A509d;
      --offWHite: #f9fafa;
    }
main {
  flex: 1;                          /* ocupa o espaço entre header e footer */
  display: flex;                    /* <-- FALTAVA */
  align-items: center;              /* centraliza na vertical */
  justify-content: center;          /* centraliza na horizontal */
  padding: 20px 45px;               /* se quiser o respiro lateral */
}

    .flex {
      display: flex;
		flex-direction: column;
    }
    .form-container {
      max-width: 600px;
      margin: auto;
      padding: 30px;
      background-color: #f9fafa;
      border-radius: 16px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		justify-content: center; 
    }
    .form-container img {
      display: block;
      margin: 0 auto 0px auto;
      max-width: 400px;
    }

    .font-lg {
      font-size: 1.5rem;
    }

    .font-md {
      font-size: 1.2rem;
    }

    .font-sm {
      font-size: 1rem;
    }

    .font-xs {
      font-size: 1.2rem;
    }

    .bold {
      font-weight: bold;
    }

    .purple {
      color: var(--purple);
    }

    .purple-bg {
      background-color: var(--purple);
    }

    input::placeholder {
      font-size: 0.8rem;
      font-weight: 600;
      opacity: 0.9;
    }

    input {
      width: 100%;
      padding: 0px;
      border-radius: 12px;
      border: 1px solid #cacaca;
		margin-top:0px;
      font-size: 16px;
      max-width: 18rem;
    }
input:focus {
  outline: none;                 /* remove o contorno preto/azul padrão */
  border-color: #6A509D;         /* roxo da marca */
  box-shadow: 0 0 0 1px rgba(106,80,157,.20);  
}

/* acessibilidade (tab/teclado) */
input:focus-visible {
  outline: 2px solid #4B2C82;    /* roxo escuro */
  outline-offset: 2px;
}

    .errorText {
      margin-top: 20px;
      margin-left: 8px;
      margin-bottom: 20px;
      min-height: 1em;
      color: black;
      font-size: 0.9rem;
    }

    .seguir-btn {
      background-color: var(--purple);
      color: white;
      border: none;
      padding: 8px 40px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 10px;
      transition: background-color 0.3s ease;
 		margin-top: 0px;
		font-size: 18px;
    }
.captcha-block{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.captcha-block .custom-placeholder{
  width: min(360px, 100%);
  text-align: center;
}
    .seguir-btn:hover {
  background-color: #C0E1D7;
  color: #6A509D;
    }

    .seguir-btn:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    .seguir-btn:hover:disabled {
      background-color: #ccc;
    }

    form {
      display: flex;
      flex-direction: column;
	  align-content: center;
	  align-items: center;
      width: 450px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Montserrat", sans-serif;
    }

    .container {
 		 display: flex;
 		 flex-direction: column;
 		 align-items: center;
		  justify-content: center;   
 		 flex: 1; /* <--- ESSENCIAL */
 		 padding: 20px 45px;
 		 background-color: var(--offWHite);
}
    html,
    body {
  		height: 100%;
  		margin: 0;
  		display: flex;
  		flex-direction: column;
		align-content: center;
  		font-family: Montserrat, sans-serif;
  		background-color: #f9fafa;
}

    h1 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
      text-align: left;
    }

    label {
      font-size: 20px;
      font-weight: 600;
      color: #6A509D;
      margin-bottom: 0px;
		margin-top: 10px;
      display: block;
    }

.titulo   {font-size: 20px;
      font-weight: 600;
      color: #6A509D;
      margin-bottom: 10px;
		margin-top: 50px;
      display: block;
    }

.sub {   font-size: 20px;
      font-weight: 600;
      color: #6A509D;
      margin-bottom: 10px;
		margin-top: 0px;
      display: block;
    }
.nota   {font-size: 16px;
      font-weight: 500;
      color: #4B2C82;
      margin-bottom: 10px;
		margin-top: 0px;
      display: block;
    }

.nota a {
  color: #4B2C82;           /* ou #6A509D, se preferir */
  font-weight: 600;
  text-decoration: none;    /* sem sublinhado por padrão */
}

.nota a:hover,
.nota a:focus-visible {     /* acessível no teclado */
  text-decoration: underline;
  text-underline-offset: 3px;
}

    .header-title {
      font-weight: 600;
      margin: auto;
      margin-left: 10px;
    }

    .header {
      width: 100%;
      height: 30px;
      display: flex;
      margin-bottom: 30px;
      align-content: center;
    }

    .close-btn {
      margin-left: auto;
      font-size: 20px;
      cursor: pointer;
      font-weight: 500;
      margin: auto 0px;
    }

    .form-class {
      align-items: center;
    }

    .message {
      margin-top: 20px;
	  margin-bottom: 20px;
      font-size: 20px;
      color: #555;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 10px;
      font-size: 1rem;
      margin-bottom: 30px;
		margin-top: 0px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-sizing: border-box;
}