/* ════════════════════════════════════════════════════════════════
   A PORTA — a tela de criar conta (2026-09-20)

   O login é um PORTÃO de duas folhas que se abrem. Aqui é uma PORTA
   só: gonzos à esquerda, batente à direita, e uma tranca no batente.

   O movimento é o inverso do login. Lá, autorizado, a câmera atravessa
   o vão entre as folhas e some. Aqui ela faz o contrário: ao passar
   para a verificação, ela ENTRA na tranca. A fechadura que era um
   detalhe de 78px vira a tela inteira, e é dentro dela que o código de
   acesso é digitado.

   É a mesma gramática — câmera, não elementos deslizando — aplicada a
   uma peça diferente. Quem entra pelo login vê um portão; quem ainda
   não tem conta vê a porta fechada e a fechadura de perto.

   ─── POR QUE #step2 FICA FORA DE .porta ───────────────────────────

   A porta inteira é AMPLIADA no zoom. Se a verificação estivesse
   dentro dela, seria ampliada junto e o texto sairia borrado e gigante.
   Ela é irmã da porta no DOM e cresce por conta própria, a partir da
   posição exata da tranca — o que dá a leitura de aproximação sem
   custar nitidez.
   ════════════════════════════════════════════════════════════════ */

/* A porta cresce 2,2x ao sair de cena e, por um instante, é mais
   larga que a tela. Sem isto o celular ganha uma barra de rolagem
   horizontal que não leva a lugar nenhum. */
body:has(.wrap-porta) { overflow-x: clip; }

.wrap-porta {
  /* 612 e não 560: a câmara da etapa 2 é uma foto com moldura
     grossa, e o conteúdo vive nos 75% de dentro. Cada pixel de
     largura vale 0,75 de área útil — era o outro caminho que o
     Victor ofereceu, e os dois foram tomados. */
  --porta-larga: min(612px, calc(100vw - 32px));
  width: var(--porta-larga);
  --gonzo-faixa: 30px;
  --batente-faixa: 58px;
  /* Onde a tranca está, em coordenadas do palco. Tudo que precisa
     mirar nela lê daqui — a câmera, o crescimento da verificação e o
     clarão. Um número só, num lugar só. */
  --tranca-x: calc(100% - var(--batente-faixa) / 2);
  --tranca-y: 52%;
  /* A mesma tranca, em coordenadas da CÂMARA: ela é mais estreita
     que a porta e centrada nela, então a fechadura cai FORA do seu
     lado direito — daí o valor passar de 100%. No eixo vertical as
     duas são centradas uma na outra, e 52% continua servindo. */
  --camara-x: calc(50% + (var(--porta-larga) - var(--batente-faixa)) / 2);
}

.porta-cena {
  position: relative;
  isolation: isolate;
  perspective: 1400px;
}

/* ════════════════════════════════════════════════════════════════
   1. A CHAPA
   ════════════════════════════════════════════════════════════════ */

.porta {
  display: grid;
  grid-template-columns: var(--gonzo-faixa) minmax(0, 1fr) var(--batente-faixa);
  align-items: stretch;
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(245, 166, 35, 0.34);

  /* Aço: microescovado, sulco horizontal, especular diagonal e corpo —
     a mesma receita das folhas do portão, para as duas telas lerem como
     o mesmo material saído da mesma oficina. */
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.017) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.11) 0 2px, transparent 2px 5px),
    linear-gradient(118deg,
      rgba(255, 255, 255, 0.05) 0%, transparent 26%,
      transparent 60%, rgba(255, 255, 255, 0.028) 76%, transparent 100%),
    linear-gradient(155deg, #1a1509 0%, #0d0a06 58%, #080705 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 40px rgba(245, 166, 35, 0.07),
    0 34px 70px rgba(0, 0, 0, 0.6);

  /* A câmara precisa de mais altura que o formulário. Crescendo a
     PORTA, e não a câmara, as duas caixas continuam idênticas e o
     transform-origin (52%) segue caindo em cima da fechadura. */
  min-height: min(43rem, 86vh);

  transform-origin: var(--tranca-x) var(--tranca-y);
  transition:
    transform 760ms cubic-bezier(0.5, 0, 0.22, 1),
    opacity 620ms var(--ease-mec, ease),
    filter 620ms var(--ease-mec, ease);
}

/* O grão, ladrilhado, igual ao do portão. */
.porta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("../assets/chapa-grao.png");
  background-size: 320px 180px;
  background-repeat: repeat;
  opacity: 0.28;
}

/* ── Os gonzos ──
   Três barris na faixa da esquerda. É o detalhe que diz de que lado a
   porta abre, e sem ele a peça é só um card com uma fechadura colada. */
.porta-gonzos {
  position: relative;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.porta-gonzos i {
  position: absolute;
  left: 50%;
  width: 17px;
  height: 46px;
  margin-left: -8.5px;
  border-radius: 4px;
  background: linear-gradient(90deg, #0e0b07 0%, #3a3120 38%, #191309 62%, #0b0906 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.porta-gonzos i:nth-child(1) { top: 13%; }
.porta-gonzos i:nth-child(2) { top: 50%; margin-top: -23px; }
.porta-gonzos i:nth-child(3) { bottom: 13%; }

/* O eixo: uma linha contínua ligando os barris, como a haste real. */
.porta-gonzos::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.11), transparent);
}

/* ── O painel ──
   O miolo é rebaixado: uma porta de aço tem a chapa central mais funda
   que as bordas, e é esse degrau que dá espessura à peça. */
.wrap-porta .login-card {
  /* A porta quadrada sobra altura no formulário; o miolo se centra
     em vez de encostar no alto. */
  display: grid;
  align-content: center;
  border: none;
  border-radius: 0;
  background:
    linear-gradient(160deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.16));
  box-shadow:
    inset 2px 2px 7px rgba(0, 0, 0, 0.6),
    inset -1px -1px 0 rgba(255, 255, 255, 0.05);
  margin: 14px 0;
  padding: clamp(18px, 3vh, 28px) clamp(18px, 2.6vw, 28px);
  /* A porta já tem o próprio movimento; a inclinação pelo cursor
     brigaria com ela pelo mesmo transform. */
  --inc-x: 0deg;
  --inc-y: 0deg;
  --inc-z: 0px;
  --abre-x: 0px;
}

/* ── O batente ── */
.porta-batente {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* Rebites ao longo do batente: a peça é parafusada, não desenhada. */
.porta-batente::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 16px;
  bottom: 16px;
  width: 5px;
  margin-left: -2.5px;
  border-radius: 3px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 1.4px, transparent 1.8px);
  background-size: 5px 26px;
  background-repeat: repeat-y;
  opacity: 0.6;
}


/* ════════════════════════════════════════════════════════════════
   2. A TRANCA — a irmã pequena do painel

   Mesma moldura alta da câmara, mesma ferragem, mesmos colchetes —
   só que com o rasgo da chave no meio e do tamanho de um detalhe.
   É por serem a MESMA peça em duas escalas que aproximar-se dela na
   etapa 2 significa alguma coisa.

   Tudo vem pronto de tranca-frente.webp, recortada no alfa: o fundo
   preto do arquivo foi jogado fora lendo a silhueta linha a linha,
   e não adivinhando a geometria. O que continua em CSS é só o que
   muda de estado — o halo que respira e a linha de leitura.
   ════════════════════════════════════════════════════════════════ */

.tranca {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 78px;
  height: 135px;
  margin: -67px 0 0 -39px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 320ms var(--ease-mec, ease), transform 620ms var(--ease-saida, ease);
}

/* O halo âmbar por trás: respira devagar, 4,6s. Presença, não
   alarme. Borrado em vez de recortado — atrás de uma peça
   fotografada, um contorno nítido entregaria a emenda. */
.tranca-halo {
  position: absolute;
  inset: -7px -9px;
  border-radius: 16px;
  background: rgba(245, 166, 35, 0.3);
  filter: blur(7px);
  animation: trancaRespira 4.6s var(--ease-saida, ease) infinite;
}

@keyframes trancaRespira {
  0%, 100% { opacity: 0.16; transform: scale(0.965); }
  50%      { opacity: 0.55; transform: scale(1); }
}

/* A foto. `contain` e não `cover`: a peça tem proporção própria e
   não pode ser cortada — um chanfro comido lê como erro de
   montagem. */
.tranca-corpo {
  position: absolute;
  inset: 0;
  background: url(../assets/tranca-frente.webp) center / contain no-repeat;
}

/* A leitura: uma linha desce pela peça a cada 3,4s. Diz que está
   ligada, sem pedir nada de quem olha. */
.tranca-varredura {
  position: absolute;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2, #FFD166), transparent);
  opacity: 0;
  animation: trancaLe 3.4s var(--ease-mec, ease) infinite;
}

@keyframes trancaLe {
  0%   { top: 12%; opacity: 0; }
  14%  { opacity: 0.65; }
  62%  { opacity: 0.65; }
  75%  { top: 87%; opacity: 0; }
  100% { top: 87%; opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   3. A CÂMARA — a tranca maior, por dentro

   A etapa 2 deixou de ser a mesma peça ampliada: é a peça GRANDE,
   um painel alto que nasce de dentro da fechadura da porta. São dois
   arquivos irmãos — tranca-frente.webp na porta, tranca-camara.webp
   aqui — e a mesma ferragem dourada costura os dois.

   Tudo que a tela precisa dizer mora dentro do painel: marca, etapa,
   código, verificação, as duas teclas e o contato. Por isso a
   página em volta se apaga enquanto ele está aberto — não há duas
   interfaces, há uma que tomou a tela.
   ════════════════════════════════════════════════════════════════ */

.wrap-porta .step {
  display: block;
}

#step2 {
  /* Alta e estreita, como o arquivo: 760 x 1190. A altura manda e a
     largura sai da proporção — numa tela baixa a peça inteira
     encolhe junto, em vez de vazar por baixo. */
  --camara-alt: clamp(33rem, 86vh, 45rem);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: min(100%, calc(var(--camara-alt) * 760 / 1190));
  height: var(--camara-alt);
  translate: 0 -50%;
  z-index: 3;

  background: url(../assets/tranca-camara.webp) center / 100% 100% no-repeat;

  transform-origin: var(--camara-x) var(--tranca-y);
  transform: scale(0.12);
  opacity: 0;
  pointer-events: none;

  transition:
    transform 760ms cubic-bezier(0.5, 0, 0.22, 1),
    opacity 300ms var(--ease-mec, ease);
}

.porta-cena.verificando #step2 {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* -- O MIOLO --
   Recuado por `inset`, e não por padding: padding em porcentagem se
   resolve SEMPRE pela largura, nos quatro lados, e numa peça bem
   mais alta que larga o recuo de cima nunca bateria com a moldura.
   `inset` se resolve por eixo, que é o que a moldura pede. */
.camara-miolo {
  position: absolute;
  /* Medidos na foto: as barras douradas que correm por dentro da
     moldura chegam a 12,8% nas laterais e a 9,7% no topo. O recuo
     passa delas, senão a placa encosta na luz. */
  inset: 10.5% 15.4% 11%;
  display: grid;
  /* minmax(0,1fr), e não a trilha `auto` implícita: com `auto` a
     coluna é dimensionada pelo max-content dos filhos, e oito
     <input> somam 2400px — a placa escapava da moldura. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(6px, 1.1vh, 11px);
}

#step2 .camara-miolo {
  opacity: 0;
  transition: opacity 260ms var(--ease-saida, ease);
}

.porta-cena.verificando #step2 .camara-miolo {
  opacity: 1;
  transition-delay: 420ms;
}

/* -- A câmera entra --
   A porta cresce a partir da tranca e some. Não é a porta que se
   afasta: é o ponto de vista que chega perto. */
.porta-cena.verificando .porta {
  transform: scale(3.1);
  opacity: 0;
  filter: blur(3px);
}

.porta-cena.verificando .tranca {
  opacity: 0;
}

/* Nada mais precisa ser apagado por fora: marca, etapas e rodapés
   moraram para dentro da chapa e viajam com a porta quando a câmera
   entra. O que some, some junto com a peça que os carrega. */

/* -- A MARCA CRAVADA NA CHAPA --
   A mesma receita da marca cravada no portão do login, e por um
   motivo que custou duas tentativas: a arte da águia JÁ TEM relevo
   pintado nela — chanfro, aresta acesa, sombra de dentro. O trabalho
   do filtro é rebaixar esse relevo ao tom do aço, e não substituí-lo.

   `brightness(0)` derrubava tudo a uma silhueta chapada e jogava o
   escultural fora; era por isso que ficava lisa. `grayscale` +
   `brightness(0.62)` + `contrast` mantêm cada sombra da arte, só que
   escuras o bastante para pertencerem à chapa.

   Os dois drop-shadow fazem o resto e a ordem é física: a luz da cena
   vem de cima, então num sulco a parede de CIMA fica na sombra e a
   de BAIXO acende. Inverter os dois vira relevo. */
.porta-marca {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-bottom: clamp(10px, 2vh, 18px);
}

.porta-marca img {
  display: block;
  height: clamp(124px, 21vh, 196px);
  width: auto;
  /* O arquivo tem vazio em volta da águia; as margens negativas
     crescem junto com ela para o respiro não inchar. */
  margin: -24px 0 -27px;
  opacity: 0.92;
  filter:
    grayscale(1)
    brightness(0.62)
    contrast(1.15)
    drop-shadow(0 1px 0 rgba(255, 228, 176, 0.22))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.85));
}

.porta-marca h1 {
  margin: 0;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent, #F5A623);
}

/* -- Os rodapés, dentro da chapa -- */
.porta-rodape {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin-top: clamp(12px, 2.4vh, 20px);
  padding-top: clamp(10px, 2vh, 16px);
  border-top: 1px solid rgba(245, 166, 35, 0.14);
  font-size: 12px;
  color: var(--text-dim, rgba(255, 238, 198, 0.55));
}

.porta-rodape a {
  color: var(--accent, #F5A623);
  text-decoration: none;
}

.porta-rodape a:hover {
  color: var(--accent-2, #FFD166);
}

/* -- A marca, gravada no alto do painel -- */
.camara-marca {
  display: grid;
  justify-items: center;
  gap: 1px;
}

/* O arquivo da logo tem muito vazio em volta da águia — daí as
   margens negativas, as mesmas que o topo da página já usava.
   vh, e não %: altura em porcentagem dentro de uma caixa cuja altura
   vem do conteúdo é referência circular. */
.camara-marca img {
  display: block;
  height: clamp(62px, 10vh, 96px);
  width: auto;
  margin: -10px 0 -13px;
  filter: drop-shadow(0 0 14px rgba(245, 166, 35, 0.3));
}

.camara-marca span {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent, #F5A623);
}

/* -- As etapas, dentro do painel -- */
.camara-passos {
  display: grid;
  grid-template-columns: auto minmax(30px, 64px) auto;
  justify-content: center;
  align-items: center;
  column-gap: 9px;
  row-gap: 5px;
  margin: 3px 0 1px;
}

.cpasso {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-style: normal;
  border: 1.5px solid;
}

.cpasso.feito {
  position: relative;
  border-color: #00e5a0;
  background: rgba(0, 229, 160, 0.1);
}

.cpasso.feito::after {
  content: '';
  width: 8px;
  height: 4.5px;
  border-left: 1.8px solid #00e5a0;
  border-bottom: 1.8px solid #00e5a0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.cpasso.atual {
  border-color: var(--accent, #F5A623);
  color: var(--accent, #F5A623);
  box-shadow: 0 0 14px var(--accent-glow-soft, rgba(245, 166, 35, 0.3));
}

.cpasso-trilho {
  height: 1px;
  background: linear-gradient(90deg, #00e5a0, var(--accent, #F5A623));
}

.camara-passos b {
  grid-row: 2;
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
}

.camara-passos b:first-of-type {
  grid-column: 1;
  color: rgba(0, 229, 160, 0.7);
}

.camara-passos b:last-of-type {
  grid-column: 3;
  color: var(--accent, #F5A623);
}

/* -- O cabecalho da verificacao -- */
.verif-topo {
  text-align: center;
}

.verif-topo strong {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: clamp(11px, 1.5vh, 13px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffeec6;
}

.verif-texto {
  margin: 1px 0 0;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(255, 238, 198, 0.42);
}

/* -- A PLACA DOS DÍGITOS --
   É o rasgo da chave, aberto: mesmo chanfro, mesma borda dourada,
   mesmo brilho — só que agora comporta oito casas.

   O brilho externo sai de `filter: drop-shadow`, e não de
   `box-shadow`: box-shadow externo morre no clip-path, drop-shadow
   é aplicado DEPOIS do recorte e por isso sai chanfrado também. */
#step2 .verif-placa {
  --chanfro: 11px;
  position: relative;
  display: grid;
  /* Mesma armadilha da caixa de fora: um <input> tem max-content de
     ~20 caracteres, e oito deles somam 2400px. */
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 10px 11px 11px;
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0,
    100% var(--chanfro), 100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%,
    0 calc(100% - var(--chanfro)), 0 var(--chanfro)
  );
  background: linear-gradient(165deg, rgba(43, 35, 18, 0.96) 0%, rgba(8, 6, 3, 0.97) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(245, 166, 35, 0.9),
    inset 0 0 0 4px rgba(0, 0, 0, 0.55),
    inset 0 0 26px rgba(0, 0, 0, 0.9);
  filter: drop-shadow(0 0 12px rgba(245, 166, 35, 0.35));
}

#step2 .verif-placa > label {
  font-family: var(--font-mono, monospace);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(245, 190, 110, 0.55);
}

/* -- As casas --
   `flex: 1` com altura FIXA. Com `aspect-ratio` a altura viria do
   esticamento da linha e a largura da altura — circular, e a placa
   inflava até 2400px. */
#step2 .otp {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

#step2 .otp .otp-celula {
  --chanfro: 4px;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: clamp(36px, 5.2vh, 48px);
  padding: 0;
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0,
    100% var(--chanfro), 100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%,
    0 calc(100% - var(--chanfro)), 0 var(--chanfro)
  );
  background: linear-gradient(170deg, #1b1509 0%, #060402 100%);
  box-shadow: inset 0 0 0 1.5px rgba(245, 166, 35, 0.4);
  font-family: var(--font-mono, monospace);
  font-size: clamp(13px, 2vh, 18px);
  font-weight: 500;
  color: var(--accent-2, #FFD166);
  caret-color: var(--accent-2, #FFD166);
  text-shadow: 0 0 9px rgba(245, 166, 35, 0.75);
  transition: box-shadow 180ms var(--ease-mec, ease), background 180ms var(--ease-mec, ease);
}

#step2 .otp .otp-celula.preenchida {
  background: linear-gradient(170deg, #2a2110 0%, #0b0803 100%);
  box-shadow: inset 0 0 0 1.5px rgba(245, 166, 35, 0.95), inset 0 0 14px rgba(245, 166, 35, 0.18);
}

#step2 .otp .otp-celula:focus {
  outline: 0;
  box-shadow:
    inset 0 0 0 1.5px var(--accent-2, #FFD166),
    inset 0 0 18px rgba(245, 166, 35, 0.3);
}

/* -- O aviso de segurança --
   Mesma família da placa, um degrau abaixo: sem borda acesa, porque
   não pede ação nenhuma. */
.camara-nota {
  --chanfro: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0,
    100% var(--chanfro), 100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%,
    0 calc(100% - var(--chanfro)), 0 var(--chanfro)
  );
  background: rgba(0, 0, 0, 0.42);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.2);
}

.camara-nota svg {
  width: 22px;
  height: 22px;
  color: var(--accent, #F5A623);
}

.camara-nota strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #ffeec6;
}

.camara-nota p {
  margin: 1px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255, 238, 198, 0.45);
}

/* -- AS DUAS TECLAS --
   Lado a lado, como um teclado de duas posições. A de voltar é mais
   estreita porque o rótulo é mais curto — a largura acompanha o que
   cada tecla tem a dizer, e não o contrário.

   Mesmo chanfro das casas do código, mesmos colchetes da moldura,
   rótulo em mono. Um botão web arredondado no meio de uma peça
   usinada denunciaria que a ferragem é só papel de parede.

   A tecla de ação é chapa acesa; a de volta é chapa apagada. A
   hierarquia sai do BRILHO, e não do tamanho. */
.toque-par {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.25fr);
  gap: 8px;
}

.wrap-porta .toque {
  --chanfro: 8px;
  --tq: rgba(245, 166, 35, 0.5);
  position: relative;
  margin: 0;
  padding: 0 10px;
  min-height: clamp(38px, 5.4vh, 48px);
  width: 100%;
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0,
    100% var(--chanfro), 100% calc(100% - var(--chanfro)),
    calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%,
    0 calc(100% - var(--chanfro)), 0 var(--chanfro)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: clamp(10px, 1.4vh, 12px);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition:
    box-shadow 200ms var(--ease-mec, ease),
    background 200ms var(--ease-mec, ease),
    filter 120ms linear;
}

/* Os colchetes das quatro quinas, em minúscula: a mesma ferragem da
   peça grande, oito faixas num elemento só. */
.wrap-porta .toque::before {
  content: '';
  position: absolute;
  inset: 4px;
  pointer-events: none;
  background:
    linear-gradient(var(--tq), var(--tq)) 0 0 / 9px 1.5px no-repeat,
    linear-gradient(var(--tq), var(--tq)) 0 0 / 1.5px 9px no-repeat,
    linear-gradient(var(--tq), var(--tq)) 100% 0 / 9px 1.5px no-repeat,
    linear-gradient(var(--tq), var(--tq)) 100% 0 / 1.5px 9px no-repeat,
    linear-gradient(var(--tq), var(--tq)) 0 100% / 9px 1.5px no-repeat,
    linear-gradient(var(--tq), var(--tq)) 0 100% / 1.5px 9px no-repeat,
    linear-gradient(var(--tq), var(--tq)) 100% 100% / 9px 1.5px no-repeat,
    linear-gradient(var(--tq), var(--tq)) 100% 100% / 1.5px 9px no-repeat;
  transition: inset 200ms var(--ease-mec, ease);
}

#btnBack.toque {
  --tq: rgba(245, 166, 35, 0.5);
  background:
    repeating-linear-gradient(0deg, rgba(245, 166, 35, 0.05) 0 1px, transparent 1px 5px),
    linear-gradient(170deg, #1b1509 0%, #060402 100%);
  box-shadow: inset 0 0 0 1.5px rgba(245, 166, 35, 0.34);
  color: rgba(255, 238, 198, 0.66);
}

#btnBack.toque:hover {
  --tq: rgba(245, 166, 35, 0.85);
  box-shadow: inset 0 0 0 1.5px rgba(245, 166, 35, 0.6);
  color: #ffeec6;
}

.wrap-porta .toque-forte {
  --tq: rgba(26, 18, 4, 0.55);
  background: linear-gradient(170deg, #f9bc4b 0%, #e2930f 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 233, 180, 0.9),
    0 0 20px rgba(245, 166, 35, 0.28);
  color: #1a1204;
  font-weight: 600;
}

.wrap-porta .toque-forte:hover {
  background: linear-gradient(170deg, #ffd166 0%, #f0a51c 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 245, 215, 1),
    0 0 30px rgba(245, 166, 35, 0.45);
}

/* O toque: a tecla afunda um fio e os colchetes fecham sobre ela.
   Dura o tempo do dedo, e não um instante fixo — é :active, não
   animação. */
.wrap-porta .toque:active {
  filter: brightness(1.18);
}

.wrap-porta .toque:active::before {
  inset: 2px;
}

.wrap-porta .toque:focus-visible {
  outline: 2px solid var(--accent-2, #FFD166);
  outline-offset: 2px;
}

.wrap-porta .toque .seta {
  letter-spacing: 0;
}

/* -- O rodapé do painel --
   O contato saiu de baixo da página e entrou aqui: é justamente
   nesta tela que faz falta. */
.camara-rodape {
  margin: 1px 0 0;
  text-align: center;
  font-size: 10.5px;
  color: rgba(255, 238, 198, 0.4);
}

.camara-rodape a {
  color: var(--accent, #F5A623);
  text-decoration: none;
}

.camara-rodape a:hover {
  color: var(--accent-2, #FFD166);
}


/* ════════════════════════════════════════════════════════════════
   4. TELAS ESTREITAS

   Gonzo e batente são faixas finas; a porta cabe. O que muda é a
   viagem da câmera, que encolhe — ampliar 3,1x numa tela de 400px
   arremessa a chapa para fora do enquadramento antes de ela sumir.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  .wrap-porta {
    /* --porta-larga, e não `width` direto: é dele que --camara-x
       deriva onde a fechadura cai dentro da câmara. */
    --porta-larga: min(430px, calc(100vw - 24px));
    --gonzo-faixa: 20px;
    --batente-faixa: 44px;
  }

  .tranca {
    width: 62px;
    height: 107px;
    margin: -53px 0 0 -31px;
  }

  /* A câmara encolhe junto: o painel estreito não tem largura para
     a moldura da foto mais o conteúdo. */
  #step2 .otp { gap: 3px; }
  #step2 .verif-placa { padding: 9px 8px 10px; }
  .toque-par { gap: 6px; }

  .porta-cena.verificando .porta {
    transform: scale(2.2);
  }

  .porta-gonzos i {
    width: 12px;
    height: 34px;
    margin-left: -6px;
  }
}


/* ════════════════════════════════════════════════════════════════
   5. MOVIMENTO REDUZIDO

   A troca ainda acontece — ela É a informação de que a etapa mudou.
   O que sai é a viagem: a porta apaga em vez de crescer, e a
   verificação aparece no lugar em vez de vir de longe.
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .porta,
  #step2,
  .tranca,
  #step2 .camara-miolo {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  .porta-cena.verificando .porta {
    transform: none;
    filter: none;
  }

  .tranca-halo,
  .tranca-varredura {
    animation: none;
    opacity: 0.35;
  }

  #step2 {
    transform: scale(1);
  }
}

/* ════════════════════════════════════════════════════════════════
   6. O FORMULÁRIO

   Três acréscimos, todos de LEITURA: dizer onde a pessoa está, o que
   já está certo, e o que ainda falta. Nenhum deles decide nada — quem
   barra continua sendo btnStep1, com as mesmas regras de sempre.
   ════════════════════════════════════════════════════════════════ */

/* ── As etapas, numeradas ──
   Duas bolinhas de 8px não diziam quantas etapas existem nem onde a
   pessoa está. Com número e rótulo, dizem as duas coisas sem custar
   uma linha de texto. */
.wrap-porta .step-indicator {
  /* Fora do palco: #step2 cobre o palco inteiro na etapa 2, e o mapa
     do caminho precisa ficar ACIMA da moldura, nao atras dela. */
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: clamp(16px, 3vh, 26px);
}

.wrap-porta .passo {
  display: grid;
  justify-items: center;
  gap: 7px;
  width: 92px;
}

.wrap-porta .step-dot {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text-mute);
  box-shadow: none;
  transition: all 0.32s var(--ease-mec, ease);
}

.wrap-porta .step-dot.active {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow-soft);
}

/* Cumprida, ela troca o número por um visto: o algarismo já não
   informa nada que a marca não diga melhor. */
.wrap-porta .step-dot.done {
  border-color: #00e5a0;
  color: transparent;
  background: rgba(0, 229, 160, 0.1);
  position: relative;
}

.wrap-porta .step-dot.done::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 5px;
  border-left: 1.8px solid #00e5a0;
  border-bottom: 1.8px solid #00e5a0;
  transform: rotate(-45deg) translate(1px, -1px);
}

.wrap-porta .passo span {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color 0.32s var(--ease-mec, ease);
}

.wrap-porta .passo:has(.active) span { color: var(--accent); }
.wrap-porta .passo:has(.done) span   { color: rgba(0, 229, 160, 0.72); }

.wrap-porta .passo-trilho {
  flex: 0 0 52px;
  height: 1px;
  margin-bottom: 22px;
  background: var(--border-strong);
  position: relative;
  overflow: hidden;
}

/* A energia percorre o trilho quando a etapa avança. */
.wrap-porta .passo-trilho::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #00e5a0, var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.42s var(--ease-mec, ease);
}

.wrap-porta .step-indicator[data-indo="2"] .passo-trilho::after {
  transform: scaleX(1);
}

/* ── A marca de conferido ──
   Verde por campo, do lado direito. Aparece quando aquele campo passa
   na MESMA regra que o botão cobra — ver register.js. Não é validação
   nova; é a validação que já existia, dita antes de ser cobrada. */
.conf-envolve {
  position: relative;
}

.conf-marca {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  border-radius: 50%;
  border: 1.5px solid #00e5a0;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  transition: opacity 0.22s var(--ease-mec, ease), transform 0.22s var(--ease-mec, ease);
}

/* Nas senhas o olho já ocupa a direita; a marca fica antes dele. */
.conf-marca-senha { right: 42px; }

.conf-marca::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4.5px;
  width: 7px;
  height: 3.5px;
  border-left: 1.6px solid #00e5a0;
  border-bottom: 1.6px solid #00e5a0;
  transform: rotate(-45deg);
}

.conf-marca.ok {
  opacity: 1;
  transform: scale(1);
}

.campo-nota {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-mute);
}

/* ── As senhas conferem ── */
.par-senhas {
  position: relative;
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: -4px;
  font-size: 11.5px;
  color: rgba(0, 229, 160, 0.8);
}

.par-senhas.mostra { display: flex; }
.par-senhas.difere { color: rgba(255, 141, 160, 0.85); }

.par-senhas::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1.4px solid currentColor;
}

/* O visto vai no ::after, girado 45 graus. Duas faixas de background no
   ::before nao viram visto: background nao gira, e o resultado e um
   sinal de mais. Anel vazio tambem nao serve — nao diz se conferiu ou
   se ainda esta esperando. */
.par-senhas::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 6px;
  height: 3px;
  margin-top: -2.5px;
  border-left: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg);
}

/* Diferentes: o anel fica vazio de proposito — nao ha o que marcar. */
.par-senhas.difere::after { display: none; }

/* ── O medidor, embutido ──
   No login ele PAIRA sobre o campo, porque ali empurrar o layout faria
   a página crescer e ganhar rolagem. Aqui ele mora na linha, entre a
   senha e a confirmação: nesta tela a pessoa está CONSTRUINDO uma
   senha, e o medidor é parte do trabalho, não um aviso de passagem.

   `display: contents` dissolve os dois invólucros do componente para
   que as peças caiam direto na grade — sem isso seria preciso mexer no
   password-strength.js, que é compartilhado com as outras telas. */
.wrap-porta .forca {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "cadeado barra   rotulo"
    "regras  regras  regras"
    "tempo   tempo   tempo";
  align-items: center;
  gap: 9px 11px;
  margin: 10px 0 2px;
  padding: 11px 12px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: none;
}

/* Sem senha digitada o componente não tem data-nivel: o medidor se
   recolhe sozinho, sem uma linha de JS a mais. */
.wrap-porta .forca:not([data-nivel]) {
  display: none;
}

.wrap-porta .forca-linha,
.wrap-porta .forca-texto { display: contents; }

.wrap-porta .forca-caixa {
  grid-area: cadeado;
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.wrap-porta .forca-caixa svg { width: 30px; height: 30px; }

.wrap-porta .forca-barra {
  grid-area: barra;
  position: relative;
  padding-top: 14px;
}

.wrap-porta .forca-barra::before {
  content: 'Seguran\00e7 a da senha';
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.wrap-porta .forca-rotulo {
  grid-area: rotulo;
  font-size: 11.5px;
  white-space: nowrap;
}

.wrap-porta .forca-regras { grid-area: regras; }
.wrap-porta .forca-tempo {
  grid-area: tempo;
  font-size: 10.5px;
  color: var(--text-mute);
}

/* Os bits saem: nesta tela o espaço é da construção da senha, e o
   número bruto é a informação menos acionável das três. O tempo fica,
   porque é o que faz a pessoa acrescentar mais uma palavra. */
.wrap-porta .forca-bits { display: none; }