:root{
    --primary:#0dd606;      /* vermelho Malta */
    --bg:#0d0f12;
    --card:rgba(255,255,255,.08);
    --stroke:rgba(255,255,255,.12);
    --text:#e9eef6;
    --muted:#b6c2d0;
    --success:#22c55e;
    --danger:#2ca806;
    --focus:rgba(14, 161, 21, 0.35);
    --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
    --radius:18px;
  }

  /* BG de seção com gradiente sutil */
  .section.bg-default{
    background: radial-gradient(1200px 600px at 10% -10%, rgba(69, 255, 45, 0.12), transparent 60%),
                radial-gradient(1000px 500px at 110% 10%, rgba(104, 255, 45, 0.08), transparent 60%),
                var(--bg);
    color: var(--text);
    padding: 40px 0 92px;
  }

  /* Card */
  .signup-card{
    background: var(--card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
  }

  .signup-card h3{
    font-weight: 700;
    letter-spacing: .2px;
    margin-bottom: 8px;
  }

  .text-decoration-lines{
    position: relative;
    margin: 18px 0 24px;
    color: var(--muted);
  }
  .text-decoration-lines::before,
  .text-decoration-lines::after{
    content:"";
    position:absolute; top:50%; width:38%;
    height:1px; background: var(--stroke);
  }
  .text-decoration-lines::before{left:0;}
  .text-decoration-lines::after{right:0;}
  .text-decoration-lines-content{
    display:inline-block; padding:0 10px; font-size:.9rem;
  }

  /* Form base */
  .rd-form{ text-align:left; }
  .form-wrap{
    position: relative;
    margin-bottom: 18px;
  }

  /* Inputs */
  .form-input{
    width:100%;
    border:1px solid var(--stroke);
    background: rgba(255,255,255,.06);
    color: var(--text);
    border-radius: 14px;
    padding: 16px 44px 16px 14px;
    outline: none;
    transition: border .2s ease, box-shadow .2s ease, background .2s ease, transform .08s ease;
  }
  .form-input::placeholder{ color: transparent; }

  /* Label flutuante */
  .form-label{
    position:absolute; left:14px; top:50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events:none;
    transition: all .18s ease;
    background: transparent;
    padding: 0 6px;
  }
  .form-input:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 6px var(--focus);
    background: rgba(255,255,255,.08);
  }
  .form-input:focus,
  .form-input:not(:placeholder-shown){
    transform: translateZ(0);
  }
  .form-input:focus + .form-label,
  .form-input:not(:placeholder-shown) + .form-label{
    top: -8px;
    transform:none;
    font-size: .75rem;
    color: var(--primary);
    background: var(--bg);
    border-radius: 8px;
  }

  /* Botão mostrar/ocultar senha */
  .button-icon-password{
    position:absolute;
    right:10px; top:50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 6px;
    line-height: 1;
    border-radius: 10px;
    transition: color .2s ease, background .2s ease;
  }
  .button-icon-password:focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
  .button-icon-password:hover{ color: var(--text); background: rgba(255,255,255,.06); }

  /* Botão submit */
  .button.button-primary{
    --btnh: 48px;
    display:inline-flex; align-items:center; justify-content:center;
    height: var(--btnh);
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.12);
    background: linear-gradient(180deg, var(--primary), #187401);
    color: #fff; font-weight: 700; letter-spacing:.3px;
    width:100%;
    box-shadow: 0 8px 18px rgba(2, 211, 30, 0.35);
    transition: transform .08s ease, box-shadow .18s ease, filter .18s ease;
  }
  .button.button-primary:hover{ filter: brightness(1.03); box-shadow: 0 10px 24px rgba(49, 233, 32, 0.42); }
  .button.button-primary:active{ transform: translateY(1px); }

  /* Mensagens */
  #mensagem{ margin-bottom: 12px; color: var(--danger)!important; font-size: .95rem; }

  /* Barra de progresso */
  .progress-container{ display:none; margin:16px 0 6px; }
  .progress{ height: 10px; background: rgba(255,255,255,.07); border-radius: 999px; overflow:hidden; }
  .progress-bar{
    width:0%;
    background: linear-gradient(90deg, var(--primary), #32e010);
    transition: width .25s ease;
  }

  /* Acessibilidade e redução de movimento */
  @media (prefers-reduced-motion: reduce){
    .button.button-primary, .form-input, .form-label, .progress-bar{ transition: none; }
  }

  /* Ajustes responsivos finos */
  @media (max-width: 575.98px){
    .signup-card{ padding: 22px; }
  }


/*btn final*/
.botao-final {
    width: 100%;

    margin-bottom: 1rem;
    color: rgb(28, 224, 10);
    outline: none;
    border: none;
    font-size: 27px;
    padding: 0.6em 1em;
    position: relative;
    background: none;
    cursor: pointer;
    font-size:1.3rem;
    font-weight: 600;
}

.info{
  text-align: center;
}

.botao-final:active {
  transform: scale(.98);
  box-shadow: .1px .1px 2px rgb(48, 212, 7);
}

.botao-final span {
  position: absolute;
  background: rgb(13, 219, 5);
  transition: .5s;
  box-shadow: 1px 1px 20px rgb(74, 216, 9);
}

.botao-final span:nth-child(1) {
  top: 0;
  left: 0;
  width: 3px;
  height: 30%;
}

.botao-final:hover span:nth-child(1) {
  height: 100%;
}

.botao-final span:nth-child(2) {
  top: 0;
  left: 0;
  width: 15%;
  height: 3px;
}

.botao-final:hover span:nth-child(2) {
  width: 100%;
}

.botao-final span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 3px;
  height: 30%;
}

.botao-final:hover span:nth-child(3) {
  height: 100%;
}

.botao-final span:nth-child(4) {
  bottom: 0;
  right: 0;
  width: 15%;
  height: 3px;
}

.botao-final:hover span:nth-child(4) {
  width: 100%;
}


  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.6);
  }

  .modal-content {
    background: #fff;
    color: black;
    margin: 15% auto;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-in-out;
    height: 100px;
    justify-content: center;
  }

  .close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 12px;
  }

  .close:hover {
    color: #000;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }