:root {
  --bg1: #1c4bba;
  --bg2: #152c63;

  --card: #ffffff;
  --text: #152c63;
  --muted: rgba(21, 44, 99, 0.7);

  --border: #d7deea;
  --field-bg: #fbfcff;

  --primary: #315dd4;
  --primary-hover: #244fc6;

  --radius: 16px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  background: radial-gradient(1200px 600px at 50% -100px, rgba(255, 255, 255, 0.12), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  margin: 0;
  min-height: 100vh;
  padding: 28px 16px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Container central */
.container {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

/* Cabeçalho / título */
header {
  margin-bottom: 18px;
}

h1 {
  color: #ffffff;
  margin: 0 0 18px;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 750;
  letter-spacing: 0.2px;
}

/* Card do formulário */
form {
  background-color: var(--card);
  padding: 26px 28px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

/* Caso use logo */
.logo {
  display: block;
  margin: 0 auto 14px;
  max-width: 90px;
}

/* ====== ESTRUTURA NOVA (recomendada) ====== */
/* Se o seu form tiver id="tela-formulario" */
#tela-formulario {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text);
}

/* bloco de campo (se você adicionar <div class="field">) */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* label padrão */
#tela-formulario label,
.field label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* label em formato <span class="label"> (pra perguntas de rádio/checkbox) */
.label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* ====== INPUTS GERAIS ====== */
input,
select,
textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  background: var(--field-bg);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Ajuste específico do date para ficar consistente */
input[type="date"] {
  padding-right: 10px;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

/* Focus bonito e acessível */
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(49, 93, 212, 0.75);
  box-shadow: 0 0 0 4px rgba(49, 93, 212, 0.18);
  background: #ffffff;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
  color: rgba(91, 107, 138, 0.75);
}

/* ====== RÁDIO / CHECKBOX ======
   Isso evita ficar “jogado” pro canto e melhora alinhamento */
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  accent-color: var(--primary);
}

/* Grupo de opções (se você usar <div class="options">) */
.options {
  display: grid;
  gap: 10px;
}

/* Cada opção clicável (label envolvendo input) */
.option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field-bg);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.option:hover {
  border-color: rgba(49, 93, 212, 0.45);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

/* Quando o input dentro do label está marcado, realça a opção */
.option:has(input:checked) {
  border-color: rgba(49, 93, 212, 0.75);
  box-shadow: 0 0 0 4px rgba(49, 93, 212, 0.12);
  background: #ffffff;
}

/* ====== COMPATIBILIDADE COM SEU HTML ANTIGO ======
   Caso você ainda esteja com:
   <input type="radio"> <label>Sim</label><br>
   isso melhora um pouco sem precisar mexer no HTML. */
form input[type="radio"] + label,
form input[type="checkbox"] + label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}

/* Espaçamento entre blocos quando tem muitos <br> */
form br {
  line-height: 10px;
}

/* ====== BOTÃO ====== */
#envio {
  width: 50%;
  background-color: var(--primary);
  color: #ffffff;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  margin-top: 6px;
  margin-left: 20%;

  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 10px 20px rgba(49, 93, 212, 0.25);
}

#envio:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
}

#envio:active {
  transform: translateY(0px);
}

#logo-3tc {
  display: block;
  margin: 0 auto 14px;
  max-width: 120px;
}

/* ====== TELA DE SUCESSO ====== */

#titulo-sucesso { 
  color: #152c63;
}
.sucess-card{
  background:#fff;
  border-radius:16px;
  padding:26px 28px;
  max-width:560px;
  margin:0 auto;
  text-align:left;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.sucess-card p{
  color: rgba(21,44,99,.75);
  margin: 10px 0 18px;
}

.btn{
  display:inline-block;
  background:#315dd4;
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  margin-left: 50%;
}
.btn:hover{ background:#244fc6; }

#logo-3tc {
  display: block;
  margin: 0 auto 14px;
  max-width: 120px;
}