/* ============================================================
   PRÉ-INSCRIÇÃO — formulário, cartão e carta
   ============================================================ */
/* ================= Pré-inscrição ================= */
#preinsc{ display:none; flex-direction:column; height:100vh; background:#f8f7f4;
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif; position:relative; }
#preinsc.ativo{ display:flex; }
[data-bs-theme="dark"] #preinsc{ background:#0e1420; }
#preinsc .barra-topo{
  background:#fff; border-bottom:1px solid rgba(0,0,0,.08); height:4.5vw; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
[data-bs-theme="dark"] #preinsc .barra-topo{ background:#141c2b; border-color:rgba(255,255,255,.08); }
#preinsc .barra-titulo{
  font-family:'Barlow Condensed','Oswald',sans-serif;
  font-size:2vw; font-weight:800; color:var(--cor-primaria);
}
[data-bs-theme="dark"] #preinsc .barra-titulo{ color:#e8f1ff; }
#preinsc .flutuantes-esq{ position:absolute; top:0.8vw; left:1.2vw; display:flex; gap:.5vw; z-index:20; }
#preinsc .preinsc-corpo{
  flex-grow:1; overflow-y:auto; padding:3vw 10vw;
  display:flex; flex-direction:column; align-items:center;
}
.preinsc-passo{ width:100%; max-width:900px; animation:balaoIn .35s ease-out both;
  margin-top:auto; margin-bottom:auto; padding:2vw 0; }
.preinsc-passo.escondida{ display:none; }
.preinsc-titulo{
  font-family:'Barlow Condensed','Oswald',sans-serif;
  font-size:2.6vw; font-weight:800; color:var(--cor-primaria); text-align:center; margin-bottom:1vw;
}
[data-bs-theme="dark"] .preinsc-titulo{ color:#e8f1ff; }
.preinsc-sub{ font-size:1.5vw; color:#666; text-align:center; margin-bottom:2.5vw; }
[data-bs-theme="dark"] .preinsc-sub{ color:#9fb0c8; }
.preinsc-sms-sub{
  font-size:2vw; line-height:1.5; color:#444; text-align:center;
  max-width:38ch; margin:0 auto 2vw;
}
[data-bs-theme="dark"] .preinsc-sms-sub{ color:#cdd8ea; }
.preinsc-sms-botao{
  display:flex; flex-direction:column; align-items:center; gap:1vw; margin-top:1.5vw;
}
.preinsc-sms-botao .btn-preinsc-prim{ font-size:2vw; padding:1.2vw 4vw; }

/* Câmara de leitura do cartão */
.cartao-camara{
  position:relative; width:100%; max-width:60vw; margin:1.5vw auto;
  aspect-ratio:16/10; background:#000; border-radius:1.2vw; overflow:hidden;
}
.cartao-camara video{ width:100%; height:100%; object-fit:cover; }
.cartao-congelado{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:5;
}
.cartao-congelado.escondida{ display:none; }

/* Spinner a rolar sobre a imagem enquanto o P3 responde */
.cartao-spinner{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:6vw; height:6vw; z-index:8;
  border:.7vw solid rgba(255,255,255,.35);
  border-top-color:#2e9e5b; border-radius:50%;
  animation:cartaoSpin .8s linear infinite;
}
.cartao-spinner.escondida{ display:none; }
@keyframes cartaoSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* Etiqueta FRENTE / VERSO a verde sobre a moldura da carta */
.carta-etiqueta{
  position:absolute; top:6%; left:50%; transform:translateX(-50%);
  z-index:8; background:#2e9e5b; color:#fff; font-weight:800;
  font-size:1.6vw; padding:.5vw 2vw; border-radius:.6vw; letter-spacing:.1vw;
}
.carta-etiqueta.escondida{ display:none; }

/* Proporção real do cartão/carta: 85.6 x 54 mm = 1.586:1 */
.cartao-moldura{
  position:absolute; left:8%; right:8%; bottom:10%; height:26%;
  border:.35vw dashed rgba(255,255,255,.9); border-radius:.6vw;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35);
  pointer-events:none;
}
/* Moldura da CARTA (retângulo completo, proporção de cartão), com
   especificidade forte para vencer a .cartao-moldura base acima. */
#pInscCarta .cartao-moldura.cartao-moldura-cheia{
  left:12%; right:12%; top:12%; bottom:12%; height:auto;
  transform:none; border-radius:1.5vw;
}
#pInscCartao.a-processar .cartao-moldura{ border-color:#2e9e5b; }
#pInscCartao.cartao-detetado .cartao-moldura{
  border-color:#2e9e5b; border-style:solid;
  box-shadow:0 0 0 100vmax rgba(46,158,91,.25);
}
#pInscCartao.a-processar .cartao-moldura{
  border-color:#2e9e5b; border-style:solid;
  animation:cartaoPulse .8s ease-in-out infinite;
}
@keyframes cartaoPulse{ 0%,100%{opacity:1} 50%{opacity:.5} }

/* Carta de condução: progresso 2 fotos */
.carta-progresso{ display:flex; justify-content:center; gap:1.5vw; margin:1vw 0; }
.carta-bola{
  width:2.8vw; height:2.8vw; border-radius:50%; background:#ddd; color:#888;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.4vw;
}
.carta-bola.ativa{ background:var(--cor-primaria); color:#fff; }
.carta-bola.feita{ background:#2e9e5b; color:#fff; }
#pInscCarta.a-processar .cartao-moldura{ border-color:#2e9e5b; }

.preinsc-metodos{ display:flex; gap:2vw; justify-content:center; }
.preinsc-metodo{
  flex:1; max-width:22vw; aspect-ratio:1/.9;
  background:#fff; border:.2vw solid transparent; border-radius:1.5vw;
  box-shadow:0 .3vw .8vw rgba(0,0,0,.06);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5vw;
  cursor:pointer; transition:transform .12s, border-color .12s;
}
.preinsc-metodo:active{ transform:scale(.97); }
.preinsc-metodo:hover{ border-color:var(--cor-secundaria); }
.preinsc-metodo i{ font-size:5vw; color:var(--cor-primaria); }