@font-face {
  font-family: 'Vareimo';
  src: url('/assets/fonts/Varelmo.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   BASE
========================= */

:root{
  --preto: #000000;
  --preto2: #0b0b0f;
  --preto3: #12121a;
  --branco: #f6f6f6;
  --cinza: #cfcfd6;
  --cinza2: rgba(255,255,255,.72);
  --dourado: #d4af37;
  --dourado2: #b89022;
  --linha: rgba(212,175,55,.28);
  --linha-branca: rgba(255,255,255,.08);
  --vidro: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --vidro-forte: rgba(0,0,0,.55);
  --sombra: 0 1.125rem 2.8125rem rgba(0,0,0,.45);
  --sombra-forte: 0 1.875rem 5rem rgba(0,0,0,.65);
  --raio: 1.125rem;
  --container: 70rem;
  --erro-bg: rgba(255, 90, 90, .10);
  --erro-borda: rgba(255, 90, 90, .28);
  --erro-texto: #ffd0d0;
  --ok-bg: rgba(212,175,55,.10);
  --ok-borda: rgba(212,175,55,.28);
  --ok-texto: #f7e7aa;
}

*{
  box-sizing:border-box;
}

html,
body{
  height:100%;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--branco);
  line-height:1.55;
  background:#000;
  overflow-x:hidden;
}

/* =========================
   FUNDO FULLSCREEN
========================= */

.bg-wallpaper{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:#000;
  background-image:url("/assets/img/fundo.jpeg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.34;
  filter:contrast(1.05) saturate(.95);
}

.bg-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(68.75rem 43.75rem at 50% 15%, rgba(0,0,0,.30), rgba(0,0,0,.74)),
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.82));
}

.bg-glow{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(37.5rem 25rem at 20% 10%, rgba(212,175,55,.06), transparent 60%),
    radial-gradient(43.75rem 31.25rem at 80% 20%, rgba(255,255,255,.03), transparent 60%);
  opacity:.9;
}

/* =========================
   ELEMENTOS GERAIS
========================= */

a{
  color:inherit;
  text-decoration:none;
}

a:hover{
  color:var(--dourado);
}

img{
  max-width:100%;
  display:block;
}

button,
input{
  font:inherit;
}

.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.25rem;
  position:relative;
  z-index:3;
}

.auth-card{
  width:100%;
  max-width:34rem;
  border-radius:1.5rem;
  border:.0625rem solid var(--linha-branca);
  background:rgba(0,0,0,.52);
  backdrop-filter:blur(.75rem);
  box-shadow:var(--sombra-forte);
  padding:2rem 1.75rem;
  position:relative;
  overflow:hidden;
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    radial-gradient(25rem 12rem at 50% 0%, rgba(212,175,55,.06), transparent 70%);
}

.auth-logo{
  position:relative;
  z-index:1;
  text-align:center;
  margin-bottom:1.25rem;
}

.auth-logo h1{
  margin:0;
  font-family:'Vareimo', sans-serif;
  letter-spacing:.28rem;
  text-transform:uppercase;
  font-weight:400;
  font-size:2rem;
  line-height:1.1;
  color:var(--branco);
}

.auth-logo p{
  margin:.45rem 0 0;
  color:rgba(255,255,255,.68);
  font-size:.92rem;
}

.auth-title{
  position:relative;
  z-index:1;
  margin:0 0 1.25rem;
  text-align:center;
  font-size:1.5rem;
  font-weight:700;
  color:var(--branco);
}

.form-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}

.form-group{
  margin-bottom:0;
}

.form-group.full{
  grid-column:1 / -1;
}

label{
  display:block;
  margin:0 0 .45rem;
  font-size:.875rem;
  color:rgba(255,255,255,.88);
}

input{
  width:100%;
  padding:.85rem .95rem;
  border-radius:.875rem;
  border:.0625rem solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:var(--branco);
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

input::placeholder{
  color:rgba(255,255,255,.42);
}

input:focus{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 .25rem rgba(212,175,55,.10);
  background:rgba(0,0,0,.28);
}

button{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.625rem;
  padding:.85rem 1.125rem;
  border-radius:.875rem;
  border:.0625rem solid var(--linha);
  background:linear-gradient(180deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
  color:var(--branco);
  box-shadow:0 .875rem 2.1875rem rgba(0,0,0,.35);
  transition:.2s;
  cursor:pointer;
  font-weight:600;
}

button:hover{
  transform:translateY(-.125rem);
  border-color:rgba(212,175,55,.55);
}

.form-login button{
  margin-top:.9rem;
}

.form-esqueci-senha .form-group:last-child{
  margin-top:1rem;
}

.form-esqueci-senha button{
  margin-top:0;
}

.form-redefinir-senha .form-group:last-child{
  margin-top:1rem;
}

.form-redefinir-senha button{
  margin-top:0;
}

.auth-footer{
  position:relative;
  z-index:1;
  margin-top:1.35rem;
  text-align:center;
  font-size:.95rem;
  color:rgba(255,255,255,.72);
}

.auth-footer a{
  color:var(--dourado);
}

.auth-footer a:hover{
  color:#f0d87a;
}

.alert{
  position:relative;
  z-index:1;
  border-radius:1rem;
  padding:.85rem 1rem;
  margin:0 0 1rem;
  font-size:.92rem;
  border:.0625rem solid transparent;
  backdrop-filter:blur(.35rem);
}

.alert-error{
  background:var(--erro-bg);
  border-color:var(--erro-borda);
  color:var(--erro-texto);
}

.alert-success{
  background:var(--ok-bg);
  border-color:var(--ok-borda);
  color:var(--ok-texto);
  text-align:center;
}

.small{
  position:relative;
  z-index:1;
  font-size:.85rem;
  color:rgba(255,255,255,.72);
  margin-top:1rem;
  text-align:center;
  word-break:break-word;
}

.small a{
  color:var(--dourado);
}

.top-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:1rem;
  color:rgba(255,255,255,.78);
  font-size:.92rem;
}

.top-link:hover{
  color:var(--dourado);
}

/* =========================
   TERMOS / PRIVACIDADE
========================= */

.termos-group{
  margin-top:.35rem;
}

.checkbox-termos{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.9rem 1rem;
  border:.0625rem solid rgba(255,255,255,.10);
  border-radius:.875rem;
  background:rgba(0,0,0,.18);
  cursor:pointer;
  line-height:1.45;
}

.checkbox-termos input[type="checkbox"]{
  width:1rem;
  height:1rem;
  margin-top:.15rem;
  accent-color:var(--dourado);
  flex:0 0 auto;
}

.checkbox-termos span{
  color:rgba(255,255,255,.84);
  font-size:.92rem;
}

.checkbox-termos a{
  color:var(--dourado);
  text-decoration:none;
}

.checkbox-termos a:hover{
  color:#f0d87a;
  text-decoration:underline;
}

/* =========================
   BLOCO AUXILIAR
========================= */

.auth-card .tag{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4375rem .75rem;
  border-radius:62.4375rem;
  border:.0625rem solid rgba(212,175,55,.30);
  background:rgba(212,175,55,.08);
  font-size:.75rem;
  color:rgba(255,255,255,.92);
  margin:0 auto 1rem;
}

.auth-card .tag i{
  width:.4375rem;
  height:.4375rem;
  border-radius:6.1875rem;
  background:var(--dourado);
}

/* =========================
   RESPONSIVO
========================= */

@media (max-width: 40rem){
  .form-grid{
    grid-template-columns:1fr;
  }

  .auth-card{
    padding:1.5rem 1.1rem;
    border-radius:1.25rem;
  }

  .auth-logo h1{
    font-size:1.7rem;
    letter-spacing:.2rem;
  }

  .auth-title{
    font-size:1.3rem;
    margin-bottom:1rem;
  }

  input,
  button{
    padding:.8rem .9rem;
    font-size:1rem;
  }

  .auth-wrap{
    padding:1.25rem .9rem;
  }

  .checkbox-termos{
    padding:.85rem .9rem;
    gap:.65rem;
  }

  .checkbox-termos span{
    font-size:.88rem;
  }
}