/* =========================================================
   JORNADA — tela de entrada, envelope, carta, mensagem final e criação da senha
   ========================================================= */

/* ===== 1. Senha ===== */
.cartao-senha {
  width: 100%;
  max-width: 360px;
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 28px;
  padding: 36px 26px 28px;
  text-align: center;
  box-shadow: var(--sombra);
}

.cartao-senha h1 { font-size: 3rem; margin: 4px 0 6px; line-height: 1.1; }
.cartao-senha p { margin: 0 0 22px; color: var(--texto-suave); }
#form-senha, #form-nova-senha { display: flex; flex-direction: column; gap: 14px; }

.cartao-senha .dica { font-size: 0.85rem; margin: 14px 0 0; }

/* Criar a própria senha */
#secao-nova-senha .cartao-senha { margin: 0 auto; }
#secao-nova-senha .titulo-secao { font-size: clamp(2rem, 9vw, 2.6rem); margin-top: 6px; }

/* ===== 2. Envelope ===== */
.dica-envelope {
  color: var(--texto-suave);
  font-style: italic;
  margin: 0 0 28px;
  animation: piscar 2s ease-in-out infinite;
}
@keyframes piscar { 50% { opacity: 0.45; } }

.envelope {
  --largura: min(84vw, 340px);
  position: relative;
  width: var(--largura);
  height: calc(var(--largura) * 0.66);
  cursor: pointer;
  margin-top: 40px;
  filter: drop-shadow(0 14px 22px rgba(122, 31, 61, 0.25));
  animation: flutuar 3s ease-in-out infinite;
  outline: none;
}
@keyframes flutuar { 50% { transform: translateY(-8px); } }
.envelope.aberto { animation: none; cursor: default; }

.envelope-fundo {
  position: absolute; inset: 0;
  background: var(--vinho-escuro);
  border-radius: 10px;
}
.carta-espiando {
  position: absolute;
  left: 7%; right: 7%; top: 8%; height: 85%;
  background: var(--papel);
  border-radius: 6px;
  padding: 14% 10% 0;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform 0.8s cubic-bezier(.2,.8,.3,1) 0.5s;
  z-index: 2;
}
.carta-espiando span { height: 6px; border-radius: 3px; background: var(--rosa-claro); }
.carta-espiando span:nth-child(2) { width: 80%; }
.carta-espiando span:nth-child(3) { width: 60%; }
.envelope.aberto .carta-espiando { transform: translateY(-62%); }

.envelope-frente {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #c94a6b, var(--vinho));
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
  border-radius: 10px;
  z-index: 3;
}
.envelope-aba {
  position: absolute; left: 0; right: 0; top: 0; height: 58%;
  background: linear-gradient(180deg, #d8607f, #a8304f);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.6s ease, z-index 0s linear 0.3s;
  z-index: 4;
  border-radius: 10px 10px 0 0;
}
.envelope.aberto .envelope-aba { transform: rotateX(180deg); z-index: 1; }
.selo {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3a3b5, #c23a5d);
  color: #fff; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  z-index: 5;
  transition: opacity 0.3s, transform 0.3s;
}
.envelope.aberto .selo { opacity: 0; transform: scale(0.4); }
.envelope.guardado { animation: sumir 0.6s ease forwards; }

/* Tudo na carta usa múltiplos de --linha, assim o texto sempre cai em cima das linhas */
.carta {
  --linha: 30px;
  width: 100%;
  max-width: 440px;
  background: var(--papel);
  line-height: var(--linha);
  border-radius: 8px;
  padding: 28px 26px 24px;
  box-shadow: var(--sombra);
  box-shadow: var(--sombra);
  text-align: left;
  animation: cartaSobe 0.9s cubic-bezier(.2,.8,.3,1);
}
@keyframes cartaSobe {
  from { opacity: 0; transform: translateY(60px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
/* Título e assinatura ficam no papel liso; só o texto do meio é pautado */
.carta h2 { font-size: 2.4rem; margin: 0 0 14px; line-height: 1.2; }
#carta-texto {
  background-image: linear-gradient(transparent calc(var(--linha) - 1px), rgba(232,135,156,0.3) calc(var(--linha) - 1px));
  background-size: 100% var(--linha);
  border-top: 1px solid rgba(232,135,156,0.3);
}
.carta p { margin: 0 0 var(--linha); }
.carta p:last-child { margin-bottom: 0; }
.carta .assinatura { font-size: 2rem; text-align: right; margin: 16px 0 0; line-height: 1.3; }
#botao-continuar { margin-top: 28px; animation: cartaSobe 0.8s ease 0.6s both; }

/* ===== 7. Final ===== */
.final { animation: cartaSobe 1s ease; }
.final-foto { max-width: 320px; margin: 0 auto 28px; transform: rotate(-2deg); }
.final p { margin: 0 0 14px; font-size: 1.08rem; }
.assinatura-final { font-size: 2.4rem; margin-top: 18px !important; }

/* Tela de entrada: "entrando como alana · trocar" */
.entrando-como { margin: 10px 0 0 !important; font-size: 0.85rem; color: var(--texto-suave); }
.entrando-como .link { margin: 0; padding: 0 2px; font-size: inherit; }

/* "mostrar senha" na tela de entrada */
.link-ver-senha { margin: -6px auto 0; padding: 2px 6px; }

/* Fim da surpresa: escolher manter a senha ou criar uma nova */
.escolha-senha { display: flex; flex-direction: column; gap: 12px; }
#secao-nova-senha #voltar-escolha { display: block; margin: 8px auto 0; }