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

    :root {
      --purple: #67509d;
      --offWHite: #f9fafa;
    }


    .flex {
      display: flex;
    }

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

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

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

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

    label {
      margin-left: 1rem;
    }

    .bold {
      font-weight: bold;
    }

    .purple {
      color: #4B2C82;
    }

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

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


input,
select,
textarea {
  width: 100%;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid #cacaca;
  font-size: 16px;
  color: #4B2C82;
  margin-bottom: 15px;
  max-width: 600px;
}

.captcha-block{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
	  width: 100%;
	  max-width: 600px;    
}

.captcha-block .custom-placeholder{
  width: 100%;
  max-width: none;        /* evita competir com o global */
  text-align: center;
}
.errorText {
  margin-top: 6px;       /* estava 6pxpx */
  margin-bottom: 4px;    /* você tinha dois margin-bottom, keep 1 */
  line-height: 1.3;
  color: #b4232b;
  font-size: 14px;
}

.errorText:empty {
  display: none;           /* não ocupa espaço se estiver vazio */
}

.field-error{
  margin-top: 6px;
  margin-bottom: 4px;
  font-size: 14px;
  color: #b4232b;   /* vermelho agradável */
  line-height: 1.3;
}

    .seguir-btn {
      background-color: var(--purple);
      color: white;
      border: none;
      padding: 10px 15px;
      font-weight: 600;
		font-size: 16px;
      cursor: pointer;
      border-radius: 10px;
      transition: background-color 0.3s ease;
      margin: 0px auto;
		  text-decoration: none;
	 
    }

    .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;
      width: 100%;
    }

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

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

.msg-sucesso {
  color: #4B2C82;
  font-size: 20px;
  text-align: center;
  max-width: 400px;
}
    h1 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
      text-align: left;
    }

    label {
      font-size: 16px;
      margin-bottom: 10px;
      display: block;
      text-align: left;
    }

    .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 {
          /* habilita flexbox */
  align-items: center;        /* centraliza na vertical */
  justify-content: center;    /* centraliza na horizontal */
  font-size: 20px;
  color: #4B2C82;
  margin: 0;                  /* tira os margins antigos */
}

/* ===== Estilo de inputs desta página (SMS) ===== */
.form-class input,
.form-class select,
.form-class textarea {
  border: 2px solid #E6E2F2;        /* base igual à outra página */
  border-radius: 12px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* Hover (sem foco) */
.form-class input:hover:not(:focus),
.form-class select:hover:not(:focus),
.form-class textarea:hover:not(:focus) {
  border-color: #CBBEF7;            /* um pouco mais forte no hover */
}

/* Foco – roxo do projeto */
.form-class input:focus,
.form-class select:focus,
.form-class textarea:focus {
  border-color: #6A509D;
  box-shadow: 0 0 0 2px rgba(91,59,118,.20);
}

/* Foco por teclado (opcional, um pouco mais forte) */
.form-class input:focus-visible,
.form-class select:focus-visible,
.form-class textarea:focus-visible {
  border-color: #6A509D;
  box-shadow: 0 0 0 3px rgba(91,59,118,.28);
}

/* Inválido (só depois que o usuário digitar algo) */
.form-class input:not(:placeholder-shown):invalid,
.form-class textarea:not(:placeholder-shown):invalid,
.form-class select:invalid {
  border-color: #C62828;
  box-shadow: 0 0 0 3px rgba(216,75,99,.15);
}

/* Readonly/disabled */
.form-class input[readonly],
.form-class input:disabled,
.form-class select:disabled,
.form-class textarea:disabled {
  background: #F7F6FB;
  border-color: #CBBEF7;
  color: #777;
  cursor: not-allowed;
}

/* Ajuste do autofill do Chrome (evita amarelão) */
.form-class input:-webkit-autofill,
.form-class select:-webkit-autofill,
.form-class textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #333 !important;
}

/* Padroniza telefone e captcha para o mesmo tamanho maior no desktop */
#telefone,
.captcha-block .custom-placeholder {
  width: 100%;
  max-width: 600px;   /* mesmo do global */
  box-sizing: border-box;
}

.btn-link {
      background-color: #444;
      color: white;
      border: none;
      padding: 10px 15px;
      font-weight: 600;
		font-size: 16px;
      cursor: pointer;
      border-radius: 10px;
      transition: background-color 0.3s ease;
	text-decoration: none;
	  display: inline-block;
	min-width: 180px;
	 
    }

    .btn-link:hover {
background-color: #C0E1D7; color: #6A509D;
    }


/* Centraliza apenas o input do CAPTCHA */
.form-class input[name="captcha"] {
  text-align: center;
}

/* --- Globais --- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Título base no desktop */
h1{ font-size:24px; }

/* ====== ≤ 800px ====== */
@media (max-width: 800px){
  html, body{
    display:block;
    min-height:100dvh;
    background:#f9fafa;
  }
  body{
    margin:0;
    padding-top:max(12px, env(safe-area-inset-top));
  }

  .container{
    width:100%;
    max-width:none;
     margin: 2px auto 14px!important;  
    padding:20px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left));
    align-items:center;
    background:#f9fafa;
  }

  /* título/labels centralizados e tamanho confortável */
  h1{ font-size:clamp(20px, 5vw, 24px); text-align:center;  margin-top: 0;  }
  label{ text-align:center; margin-left:0; }

  /* logo fluida */
  img[alt="Logo"], .logo{
    display:block;
   margin: 2px auto 8px;;
    max-width:70vw;
    height:auto;
  }

  .form-class{ align-items:center; gap:12px; }

  /* largura padrão para campos */
  #telefone,
  .captcha-block,
  .captcha-block .custom-placeholder{
    width:100%;
    max-width:360px;
    margin-left:auto;
    margin-right:auto;
  }

  /* centralizar texto do captcha */
  .form-class input[name="captcha"]{ text-align:center; }

  /* botões */
  .seguir-btn, btn-link{
    width:auto;
    min-width:150px;
    padding:14px 20px;
    font-size:1.05rem;
    border-radius:12px;
    align-self:center;
  }

  .field-error{ font-size:13px; margin-top:4px; text-align:center; }
}

/* ====== ≤ 400px ====== */
@media (max-width: 400px){
  /* título um pouco menor */
  h1{ font-size:clamp(18px, 6vw, 22px); }
  .container{
    margin: 8px auto 24px !important;      /* força vencer o inline */
    padding-top: max(4px, env(safe-area-inset-top));
  }
  /* inputs/captcha um pouco mais estreitos */
  #telefone,
  .captcha-block,
  .captcha-block .custom-placeholder{
    max-width:320px;
  }

  /* botões um pouco mais compactos */
  .seguir-btn{
    min-width:200px;
    padding:12px 16px;
    font-size:.98rem;
  }

  img[alt="Logo"], .logo{ max-width:70vw; }
}

/* iOS (autofill e tamanho de fonte) */
@supports (-webkit-touch-callout: none){
  input, select, textarea{ font-size:16px; }
  input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color:#333 !important;
  }
}