/* /cadastro/css/style.css */

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300..900&display=swap");

:root{
  --atria-yellow: #e8e120;

  /* card “glass” */
  --card-bg: rgba(255,255,255,0.18);
  --card-border: rgba(255,255,255,0.25);

  /* fields */
  --field-bg: rgba(0,0,0,0.35);
  --field-border: rgba(232,225,32,0.28);

  /* buttons (radio) */
  --btn-off-bg: rgba(0,0,0,0.32);
  --btn-off-border: rgba(232,225,32,0.18);
  --btn-off-text: rgba(232,225,32,0.60);

  --btn-on-bg: var(--atria-yellow);
  --btn-on-text: #000;
  --btn-on-border: rgba(232,225,32,1);

  /* overlay */
  --overlay: rgba(0,0,0,0.55);
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  padding:40px 15px;
  font-family:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:#000;
  color: var(--atria-yellow);
  position:relative;
  overflow-x:hidden;
}

/* VIDEO BG */
.video-background{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter: brightness(0.7);
  animation: slowMotion 60s linear infinite;
  pointer-events:none;
}

@keyframes slowMotion{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Overlay */
.bg-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* CARD (glass) */
.container{
  max-width:680px;
  margin:auto;
  padding:40px;
  border-radius:14px;

  background: var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Títulos: Work Sans */
h1, h3{
  font-family:"Work Sans","Nunito Sans",system-ui,sans-serif;
  color: var(--atria-yellow);
}

h1{
  margin-top:0;
  font-size:26px;
  text-align:center;
}

.subtitulo{
  text-align:center;
  color: rgba(232,225,32,0.78);
  margin-bottom:30px;
}

/* Labels */
label{
  display:block;
  margin-top:18px;
  margin-bottom:6px;
  font-weight:500;
  color: rgba(232,225,32,0.95);
}

/* Inputs */
input[type="text"],
input[type="email"]{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--field-border);
  font-size:15px;
  transition: border-color .2s, box-shadow .2s, background .2s;
  background: var(--field-bg);
  color:#fff;
}

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

input:focus{
  outline:none;
  border-color: rgba(232,225,32,0.85);
  box-shadow: 0 0 0 3px rgba(232,225,32,0.18);
  background: rgba(0,0,0,0.45);
}

/* Linha separadora PF/PJ */
#formPF,
#formPJ{
  margin-top:20px;
  padding-top:10px;
  border-top:1px solid rgba(232,225,32,0.18);
}

/* Botão submit (amarelo com texto preto) */
button{
  margin-top:35px;
  width:100%;
  padding:15px;
  border-radius:12px;

  background: var(--atria-yellow);
  border:1px solid rgba(232,225,32,0.95);
  color:#000;

  font-size:16px;
  font-weight:900;
  cursor:pointer;

  /* sem neon */
  transition: transform .15s, filter .15s;
}

button:hover{
  transform: translateY(-1px);
  filter: brightness(0.92);
  /* removido box-shadow “neon” */
}

/* =========================
   RADIOS COMO BOTÕES (IGUAL LARGURA)
   ========================= */

/* wrapper do label-botão */
.radio-btn{
  display:block;
  width:100%;
  position:relative;
}

/* Esconde o radio */
.radio-btn > input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* PF/PJ: 2 colunas iguais */
.tipo-pessoa{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:24px;
}

/* Planos: 3 colunas iguais */
.radio-group.plans{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}

/* Vencimento: 3 colunas iguais */
.radio-group.vencimento{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}

/* Remove margens default dos labels dentro do grid */
.tipo-pessoa label,
.radio-group label{
  margin:0;
}

/* aparência do botão (não selecionado = apagado) */
.radio-btn > span{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:11px 14px;
  border-radius:12px;

  background: var(--btn-off-bg);
  border:1px solid var(--btn-off-border);
  color: var(--btn-off-text);

  font-weight:900;
  line-height:1;
  cursor:pointer;

  opacity:.62;
  filter: saturate(.55) brightness(.85);

  /* sem neon */
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease, filter .12s ease;
}

/* hover nos não selecionados (premium, sem brilho) */
.radio-btn > span:hover{
  opacity:.78;
  filter: saturate(.70) brightness(.95);
  border-color: rgba(232,225,32,0.35);
  transform: translateY(-1px);
}

/* SELECIONADO: PREMIUM (sem glow) */
.radio-btn > input[type="radio"]:checked + span{
  background: var(--btn-on-bg);
  color: var(--btn-on-text);

  /* borda mais grossa e definida */
  border: 2px solid rgba(232,225,32,1);

  opacity:1;
  filter:none;

  /* destaque “premium” */
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35); /* sombra preta discreta */
}

/* APAGAR AINDA MAIS OS NÃO SELECIONADOS quando já existe algum escolhido no grupo */
.tipo-pessoa:has(input:checked) .radio-btn > input:not(:checked) + span,
.radio-group:has(input:checked) .radio-btn > input:not(:checked) + span{
  opacity:.48;
  filter: saturate(.40) brightness(.78);
}

/* Acessibilidade: foco teclado (sem neon, só contorno leve) */
.radio-btn > input[type="radio"]:focus-visible + span{
  outline: 2px solid rgba(232,225,32,0.35);
  outline-offset: 2px;
  box-shadow: none;
}

/* Esconde */
.hidden{ display:none !important; }

/* =========================
   BOTÃO FLUTUANTE “X” (fechar/voltar)
   ========================= */
.close-floating{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;

  width: 44px;
  height: 44px;
  border-radius: 12px;

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

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(232,225,32,0.40);
  color: var(--atria-yellow);

  text-decoration: none;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  box-shadow: 0 12px 25px rgba(0,0,0,0.40);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.close-floating:hover{
  transform: translateY(-1px);
  background: rgba(232,225,32,0.12);
  border-color: rgba(232,225,32,0.65);
}

/* Responsivo */
@media (max-width: 600px){
  body{ padding:24px 12px; }
  .container{ padding:20px; }

  /* PF/PJ vira 1 coluna no mobile */
  .tipo-pessoa{ grid-template-columns: 1fr; }

  /* Planos vira 1 coluna no mobile */
  .radio-group.plans{ grid-template-columns: 1fr; }

  /* Vencimento mantém 3 colunas */
  .radio-group.vencimento{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .close-floating{
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}
/* Info sutil no final do formulário */
.info-rodape{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  line-height: 1.45;
}

.info-rodape p{
  margin: 6px 0;
}

.info-rodape .info-titulo{
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}