/* =====================================================================
   JurisTCC — checkout, pagamento, briefing e confirmação
   Prioridade absoluta: um polegar, uma mão, tela pequena.
   ===================================================================== */

.fluxo {
  padding-block: 1.6rem 4rem;
  min-height: 70vh;
  position: relative;
}

.fluxo__envelope { max-width: 1080px; }

/* ------------------------------------------------------------- Passos */
.passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem;
  counter-reset: passo;
}

.passo {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .5rem;
  border: var(--traco-fino) solid var(--preto);
  background: var(--branco);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #8c877c;
}

.passo span {
  flex: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  background: var(--papel-escuro);
  font-family: var(--display);
  font-size: .72rem;
  color: var(--preto);
}

.passo--ativo { color: var(--preto); border-color: var(--preto); background: var(--amarelo); }
.passo--ativo span { background: var(--preto); color: var(--amarelo); }
.passo--pronto { color: var(--preto); background: var(--verde); border-color: var(--preto); color: #fff; }
.passo--pronto span { background: #fff; color: var(--verde); }

/* ------------------------------------------------------------- Grade */
.fluxo__grade { display: grid; gap: 1.4rem; }

.cartao-fluxo { position: relative; overflow: hidden; }

.cartao-fluxo__canto {
  position: absolute;
  top: calc(var(--traco) * -1);
  right: calc(var(--traco) * -1);
  width: 74px; height: 74px;
  background: var(--vermelho);
  border-radius: 0 0 0 100%;
  pointer-events: none;
}

.fluxo__titulo {
  font-size: clamp(1.85rem, 8vw, 2.7rem);
  margin-bottom: .45em;
  max-width: 13ch;
  position: relative;
  z-index: 1;
}

.fluxo__sub {
  font-size: 1.02rem;
  color: var(--tinta-suave);
  max-width: 44ch;
  margin-bottom: 1.6rem;
}

.fluxo__sigilo {
  margin: 1rem 0 0;
  font-size: .82rem;
  text-align: center;
  color: var(--tinta-suave);
}

.fluxo__ajuda {
  display: block;
  margin-top: 1rem;
  padding: .9rem 1rem;
  border: var(--traco-fino) dashed var(--preto);
  background: transparent;
  color: var(--preto);
  text-align: center;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}
.fluxo__ajuda:hover { background: var(--amarelo); }

.voltar {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--tinta-suave);
  font-size: .9rem;
  text-decoration: none;
}
.voltar:hover { color: var(--preto); text-decoration: underline; }

#formDados .btn, #formPagamento .btn { width: 100%; }
#voltarDados { margin-top: .7rem; }

/* ------------------------------------------------------------- Resumo */
.resumo { position: relative; }

.resumo__nome {
  color: var(--branco);
  font-size: 1.35rem;
  margin: .8rem 0 .3rem;
}

.resumo__valor {
  font-family: var(--display);
  font-size: 2.5rem;
  color: var(--amarelo);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.resumo__itens {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: .55rem;
  font-size: .93rem;
  color: #c9c4b8;
}

.resumo__itens li { display: flex; gap: .55rem; align-items: flex-start; }
.resumo__itens li::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin-top: .48em;
  background: var(--amarelo);
}

.resumo__rodape {
  margin: 0;
  padding-top: .9rem;
  border-top: 2px solid #333;
  font-size: .8rem;
  color: #8d887d;
}
.resumo__rodape b { color: var(--branco); }

/* ------------------------------------------------------- Formas de pagto */
.formas {
  border: 0;
  padding: 0;
  margin: 0 0 1.3rem;
  display: grid;
  gap: .7rem;
}

.formas legend { padding: 0; margin-bottom: .5rem; }

.opcao-pgto {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border: var(--traco) solid var(--preto);
  background: var(--branco);
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}

/* O rádio some da vista, mas continua sendo o que o rótulo aciona. */
.opcao-pgto input { position: absolute; opacity: 0; pointer-events: none; }

.opcao-pgto__icone {
  width: 28px; height: 28px;
  border: var(--traco-fino) solid var(--preto);
}

.opcao-pgto__texto b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  margin-bottom: .1rem;
}
.opcao-pgto__texto small {
  display: block;
  font-size: .85rem;
  color: var(--tinta-suave);
  line-height: 1.35;
}

.opcao-pgto__selo {
  position: absolute;
  top: -1px; right: -1px;
  padding: .18rem .45rem;
  background: var(--verde);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.opcao-pgto--selecionada {
  background: var(--amarelo);
  box-shadow: var(--sombra-pequena);
  transform: translate(-2px, -2px);
}

.opcao-pgto:focus-within { outline: 3px solid var(--azul); outline-offset: 3px; }

/* ------------------------------------------------------------- PIX */
.pix__estado {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  margin-bottom: 1rem;
  border: var(--traco-fino) solid var(--preto);
  background: var(--branco);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pix__estado--pago { background: var(--verde); color: #fff; }

.pix__pulso {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--verde);
  animation: pulsar 1.4s ease-in-out infinite;
}
.pix__estado--pago .pix__pulso { background: #fff; animation: none; }

@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

.pix__qr {
  display: grid;
  place-items: center;
  padding: 1rem;
  margin-bottom: 1.3rem;
  background: var(--branco);
  border: var(--traco) solid var(--preto);
  box-shadow: var(--sombra-pequena);
}

.pix__qr img { width: min(260px, 68vw); height: auto; image-rendering: pixelated; }

.pix__codigo { margin-bottom: .8rem; }

.pix__codigo textarea {
  width: 100%;
  padding: .8rem;
  border: var(--traco-fino) solid var(--preto);
  background: var(--papel-fundo);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  resize: none;
  word-break: break-all;
}

.pix__passos {
  margin: 1.4rem 0 0;
  padding-left: 1.2rem;
  font-size: .93rem;
  color: var(--tinta-suave);
  display: grid;
  gap: .35rem;
}

/* ------------------------------------------------------- Briefing */
.deslizante {
  width: 100%;
  height: 44px;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.deslizante::-webkit-slider-runnable-track {
  height: 12px;
  background: var(--branco);
  border: var(--traco-fino) solid var(--preto);
}
.deslizante::-moz-range-track {
  height: 12px;
  background: var(--branco);
  border: var(--traco-fino) solid var(--preto);
}

.deslizante::-webkit-slider-thumb {
  appearance: none;
  width: 34px; height: 34px;
  margin-top: -13px;
  background: var(--amarelo);
  border: var(--traco) solid var(--preto);
  border-radius: 0;
  cursor: grab;
}
.deslizante::-moz-range-thumb {
  width: 34px; height: 34px;
  background: var(--amarelo);
  border: var(--traco) solid var(--preto);
  border-radius: 0;
  cursor: grab;
}

.deslizante__extremos {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--tinta-suave);
  margin-top: -.2rem;
}

/* ------------------------------------------------------- Obrigado */
.obrigado { overflow: hidden; text-align: center; }
.obrigado__interno { position: relative; z-index: 1; max-width: 640px; }

.obrigado__selo {
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 0;
  justify-content: center;
  margin: 0 auto 1.6rem;
  border: var(--traco) solid var(--preto);
  width: max-content;
}
.obrigado__selo i { display: block; width: 34px; height: 34px; }
.obrigado__selo i:nth-child(1) { border-radius: 100% 0 0 0; }
.obrigado__selo i:nth-child(2) { border-radius: 0 100% 0 0; }
.obrigado__selo i:nth-child(3) { border-radius: 0 0 0 100%; }
.obrigado__selo i:nth-child(4) { border-radius: 0 0 100% 0; }

.obrigado__titulo { font-size: clamp(2.2rem, 10vw, 3.6rem); margin-bottom: .35em; }
.obrigado__sub {
  font-size: 1.08rem;
  color: var(--tinta-suave);
  max-width: 42ch;
  margin: 0 auto 2rem;
}

.obrigado__cartao { text-align: left; margin-bottom: 2rem; }

.obrigado__dados { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.obrigado__dados li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 2px solid var(--papel-escuro);
  font-size: .95rem;
}
.obrigado__dados li:last-child { border-bottom: 0; }
.obrigado__dados span { color: var(--tinta-suave); }
.obrigado__dados b {
  font-family: var(--display);
  font-weight: 400;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Em telas estreitas, rótulo e valor empilham — e-mail longo não quebra no meio. */
@media (max-width: 480px) {
  .obrigado__dados li { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .obrigado__dados b { text-align: left; }
}

.obrigado__proximos { text-align: left; margin-bottom: 2rem; }
.obrigado__proximos h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.obrigado__proximos ol { padding-left: 1.2rem; display: grid; gap: .55rem; color: var(--tinta-suave); }

.obrigado__acoes { display: grid; gap: .8rem; }

.obrigado__forma { position: absolute; opacity: .5; pointer-events: none; }
.obrigado__forma--1 {
  width: 200px; height: 100px;
  background: var(--amarelo);
  border-radius: 999px 999px 0 0;
  top: 8%; left: -70px;
  transform: rotate(90deg);
}
.obrigado__forma--2 {
  width: 160px; height: 160px;
  background: var(--azul);
  border-radius: 0 0 0 100%;
  bottom: 4%; right: -60px;
  opacity: .22;
}

/* ------------------------------------------------------- Erro genérico */
.pagina-erro {
  min-height: 66vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 3rem;
}
.pagina-erro__codigo {
  font-family: var(--display);
  font-size: clamp(4.5rem, 26vw, 10rem);
  line-height: .85;
  color: var(--vermelho);
  letter-spacing: -0.05em;
}

/* ------------------------------------------------------- Legal */
.legal { padding-block: 2.5rem 4rem; }
.legal__conteudo { max-width: 72ch; }
.legal__conteudo h2 { font-size: 1.45rem; margin-top: 2.2rem; }
.legal__conteudo h3 { font-size: 1.1rem; margin-top: 1.6rem; }
.legal__conteudo p, .legal__conteudo li { color: var(--tinta-suave); }
.legal__data {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: .3rem .6rem;
  background: var(--amarelo);
  border: var(--traco-fino) solid var(--preto);
  font-size: .78rem;
  font-weight: 600;
}

/* =====================================================================
   Telas maiores
   ===================================================================== */
@media (min-width: 700px) {
  .passo { font-size: .8rem; padding: .7rem .8rem; }
  .obrigado__acoes { grid-auto-flow: column; justify-content: center; }
  .obrigado__acoes .btn { width: auto; }
}

@media (min-width: 960px) {
  .fluxo { padding-block: 2.6rem 5rem; }
  .fluxo__grade { grid-template-columns: 1.35fr .8fr; gap: 2.2rem; align-items: start; }
  .fluxo__resumo { position: sticky; top: 100px; }
  #formDados .btn, #formPagamento .btn { width: 100%; }
}