/* =========================================================
   Imersão Projetos Aprovados — fluxo de compra
   (checkout.php e obrigado.php)
   Carregado depois de style.css: reaproveita os tokens, o
   .btn, o .section-title, o .check e o rodapé da landing.
   ========================================================= */

:root{
  --danger:      #ff7a6b;
  --danger-bg:   rgba(255,122,107,.08);
  --field-bg:    #0f110f;
}

.flow{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------------------------------------------------------
   TOPO
   --------------------------------------------------------- */
.topbar{
  position:relative;
  z-index:2;
  border-bottom:1px solid var(--line);
  background:rgba(5,6,5,.85);
  backdrop-filter:blur(8px);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:16px;
  padding-bottom:16px;
}

.brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  line-height:1;
}
.brand .logo__top{ font-size:9px; letter-spacing:5px; padding-left:0; }
.brand .logo__main{ font-size:20px; margin-top:3px; white-space:nowrap; }
.nowrap{ white-space:nowrap; }

.secure-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(47,232,107,.28);
  background:rgba(47,232,107,.06);
  font-size:11px;
  font-weight:500;
  color:#9fe8b8;
  white-space:nowrap;
}

/* cadeado desenhado em CSS, no mesmo espírito dos ícones da landing */
.lock{
  position:relative;
  flex:0 0 auto;
  width:10px; height:8px;
  margin-top:4px;
  border-radius:2px;
  background:var(--green);
}
.lock::before{
  content:"";
  position:absolute; left:50%; bottom:100%;
  width:6px; height:5px;
  transform:translateX(-50%);
  border:1.6px solid var(--green);
  border-bottom:none;
  border-radius:4px 4px 0 0;
}
.lock--dark{ background:var(--green-deep); }
.lock--dark::before{ border-color:var(--green-deep); }

/* ---------------------------------------------------------
   PALCO
   --------------------------------------------------------- */
.flow__main{
  position:relative;
  flex:1;
  padding:44px 0 90px;
  overflow:hidden;
}
.flow__main > .container{ position:relative; z-index:1; }

.flow__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(50% 40% at 15% 20%, rgba(23,120,58,.22), transparent 70%),
    radial-gradient(45% 45% at 90% 70%, rgba(23,120,58,.14), transparent 70%);
  pointer-events:none;
}
.flow__glow--strong{
  background:
    radial-gradient(55% 45% at 50% 18%, rgba(47,232,107,.20), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(23,120,58,.26), transparent 70%);
}

.flow__title{ margin-bottom:44px; }

/* ---------------------------------------------------------
   ETAPAS
   --------------------------------------------------------- */
.steps{
  list-style:none;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin:0 auto 40px;
  counter-reset:none;
}
.steps__item{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:500;
  color:var(--txt-mute);
  white-space:nowrap;
}
.steps__item + .steps__item::before{        /* fio que liga as etapas */
  content:"";
  width:34px; height:1px;
  margin-right:3px;
  background:var(--line);
}
.steps__item span{
  display:grid; place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#0b0d0b;
  font-size:11px;
  font-weight:700;
  color:var(--txt-mute);
}
.steps__item.is-current{ color:#eef0ee; }
.steps__item.is-current span{
  border-color:var(--green);
  color:var(--green);
  box-shadow:0 0 18px rgba(47,232,107,.28);
}
.steps__item.is-done{ color:var(--txt-dim); }
.steps__item.is-done span{
  border-color:var(--green-2);
  background:var(--green-2);
  color:transparent;                        /* o número dá lugar ao check */
  position:relative;
}
.steps__item.is-done span::after{
  content:"";
  position:absolute; left:9px; top:6px;
  width:5px; height:10px;
  border:solid #062a12;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.steps__item.is-done + .steps__item::before{ background:var(--green-2); }

/* ---------------------------------------------------------
   CHECKOUT
   --------------------------------------------------------- */
.checkout__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
  align-items:start;
}

.form-card{
  background:#1a1c1a;
  border:1px solid rgba(255,255,255,.05);
  border-radius:18px;
  padding:34px 32px 30px;
}
.form-card .eyebrow{ margin-bottom:22px; }

.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.field label{
  font-size:12px;
  font-weight:600;
  color:var(--txt-dim);
}
.field label small{ font-weight:400; color:var(--txt-mute); }

.field input{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--field-bg);
  color:var(--txt);
  font:inherit;
  font-size:14px;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.field input::placeholder{ color:#5d625d; }
.field input:hover{ border-color:#3a3e3a; }
.field input:focus{
  outline:none;
  border-color:var(--green);
  background:#0b0d0b;
  box-shadow:0 0 0 3px rgba(47,232,107,.14);
}

.field.has-error input{ border-color:var(--danger); }
.field.has-error input:focus{ box-shadow:0 0 0 3px rgba(255,122,107,.16); }
.field__error{ font-size:12px; color:var(--danger); }

/* campo-isca: fora da tela, mas não display:none (alguns robôs pulam esses) */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert{
  margin-bottom:22px;
  padding:13px 16px;
  border-radius:10px;
  border:1px solid rgba(255,122,107,.35);
  background:var(--danger-bg);
  font-size:13px;
  line-height:1.5;
  color:#ffd2cc;
}
.alert code{ font-size:12px; color:#fff; }

button.btn{ border:0; cursor:pointer; font-family:inherit; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; filter:none; }

.form-card__submit{ margin-top:8px; }
.form-card__hint{ margin-top:12px; font-size:11px; text-align:center; color:var(--txt-mute); }
.form-card__help,
.status-card__help{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:12px;
  text-align:center;
  color:var(--txt-mute);
}
.form-card__help a,
.status-card__help a{ color:var(--green); font-weight:500; text-decoration:none; }
.form-card__help a:hover,
.status-card__help a:hover{ text-decoration:underline; }

/* estado de envio: o JS troca o rótulo e mostra o spinner */
.btn.is-loading{ pointer-events:none; }
.btn.is-loading .btn__label::before{
  content:"";
  display:inline-block;
  width:13px; height:13px;
  margin:-2px 10px 0 0;
  vertical-align:middle;
  border-radius:50%;
  border:2px solid rgba(6,42,18,.3);
  border-top-color:#062a12;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- resumo: mesmo card claro da oferta na landing ---- */
.summary-card{
  position:sticky;
  top:24px;
  background:#dfe1df;
  color:#1a1c1a;
  border-radius:18px;
  padding:34px 32px 30px;
}
.summary-card .offer-card__label{ margin-top:0; }
.summary-card__title{
  margin-top:8px;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.4px;
  line-height:1.2;
  color:#0d0f0d;
}
.summary-card__desc{
  margin-top:8px;
  font-size:13px;
  font-weight:300;
  line-height:1.6;
  color:#3c403c;
}

.summary-card__items{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
  margin:22px 0 24px;
  padding:20px 0;
  border-top:1px solid #c6c9c6;
  border-bottom:1px solid #c6c9c6;
}
.summary-card__items li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  font-weight:500;
  color:#2a2d2a;
}

.summary-card__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.summary-card__total span{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#5a5e5a;
}
.summary-card__total strong{
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px;
  color:#0d0f0d;
}
.summary-card__installments{ margin-top:2px; text-align:right; font-size:12px; color:#4c504c; }

.pay-methods{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.pay-methods li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:#eceeec;
  border:1px solid #c6c9c6;
  font-size:12px;
  font-weight:600;
  color:#2a2d2a;
}
/* losango do Pix e cartão com tarja, no traço da casa */
.pay-methods__icon{ position:relative; display:inline-block; flex:0 0 auto; }
.pay-methods__icon--pix{
  width:9px; height:9px;
  border:2px solid var(--green-deep);
  border-radius:2px;
  transform:rotate(45deg);
}
.pay-methods__icon--card{
  width:15px; height:11px;
  border:2px solid var(--green-deep);
  border-radius:2px;
}
.pay-methods__icon--card::after{
  content:"";
  position:absolute; left:0; right:0; top:2px;
  height:2px;
  background:var(--green-deep);
}

.summary-card__secure{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:18px;
  font-size:11px;
  line-height:1.5;
  color:#5a5e5a;
}

/* ---------------------------------------------------------
   RETORNO (obrigado.php)
   --------------------------------------------------------- */
.status-card{
  max-width:720px;
  margin:0 auto;
  padding:46px 44px 36px;
  border-radius:18px;
  background:#141614;
  border:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.status-card--pago{
  border-color:rgba(47,232,107,.28);
  box-shadow:0 0 60px rgba(47,232,107,.08);
}

.status-card .eyebrow{ margin-bottom:10px; }
.eyebrow--muted{ color:var(--danger); }

.status-card__title{
  font-size:34px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.5px;
  color:#e9ebe9;
}
.status-card__lead{
  max-width:52ch;
  margin:14px auto 0;
  font-size:15px;
  font-weight:300;
  line-height:1.6;
  color:#c8ccc8;
}

/* ---- ícone de estado ---- */
.status-icon{
  position:relative;
  display:block;
  width:76px; height:76px;
  margin:0 auto 26px;
  border-radius:50%;
}
.status-icon--ok{
  background:linear-gradient(140deg, #45f07e, #0fa348);
  box-shadow:0 0 0 8px rgba(47,232,107,.10), 0 0 50px rgba(47,232,107,.40);
  animation:popIn .8s var(--ease-out-expo) both, ringPulse 2.8s ease-in-out infinite 1s;
}
.status-icon--ok::after{
  content:"";
  position:absolute; left:28px; top:17px;
  width:16px; height:32px;
  border:solid #062a12;
  border-width:0 5px 5px 0;
  transform:rotate(45deg);
}
.status-icon--wait{
  border:3px solid rgba(47,232,107,.16);
  border-top-color:var(--green);
  animation:spin 1.1s linear infinite;
}
.status-icon--err{
  border:2px solid var(--danger);
  background:var(--danger-bg);
}
.status-icon--err::before,
.status-icon--err::after{
  content:"";
  position:absolute; left:50%;
  width:4px;
  border-radius:2px;
  background:var(--danger);
  transform:translateX(-50%);
}
.status-icon--err::before{ top:18px; height:26px; }
.status-icon--err::after{ top:50px; height:5px; }

@keyframes popIn{
  from{ opacity:0; transform:scale(.4); }
  70% { transform:scale(1.08); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes ringPulse{
  0%,100%{ box-shadow:0 0 0 8px rgba(47,232,107,.10), 0 0 50px rgba(47,232,107,.40); }
  50%    { box-shadow:0 0 0 14px rgba(47,232,107,.05), 0 0 64px rgba(47,232,107,.50); }
}

/* ---- detalhes do pedido ---- */
.details{
  margin:30px 0 0;
  padding:6px 22px;
  border-radius:var(--radius);
  background:#1a1c1a;
  border:1px solid rgba(255,255,255,.05);
  text-align:left;
}
.details__row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
}
.details__row:last-child{ border-bottom:none; }
.details dt{ font-size:12px; font-weight:500; color:var(--txt-mute); }
.details dd{
  font-size:14px;
  font-weight:600;
  color:#eef0ee;
  text-align:right;
  overflow-wrap:anywhere;
}

/* ---- próximos passos: mesmos cards numerados da landing ---- */
.next__title{
  margin:38px 0 16px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--green);
}
.next{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  text-align:left;
}
.next__item{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px 18px 20px;
  border-radius:var(--radius);
  background:#1a1c1a;
  border:1px solid rgba(255,255,255,.05);
  overflow:hidden;
}
.next__item::before{
  content:"";
  position:absolute; left:0; top:0;
  width:40px; height:2px;
  background:var(--green);
}
.next__item p{ font-size:13px; font-weight:300; line-height:1.55; color:#c8ccc8; }
.next__item p strong{ font-weight:600; color:#eef0ee; }

/* ---- verificação automática ---- */
.pulse-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  padding:8px 15px;
  border-radius:999px;
  background:rgba(47,232,107,.06);
  border:1px solid rgba(47,232,107,.22);
  font-size:12px;
  font-weight:500;
  color:#9fe8b8;
}
.pulse-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--green);
  animation:dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(47,232,107,.6); }
  50%    { box-shadow:0 0 0 6px rgba(47,232,107,0); }
}
.pulse-line.is-stopped .pulse-dot{ animation:none; background:var(--txt-mute); }

/* ---- ações ---- */
.status-card__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:30px;
}
.status-card__actions .btn{ min-width:220px; }

.btn--ghost{
  background:transparent;
  color:var(--green);
  border:1px solid rgba(47,232,107,.45);
  box-shadow:none;
}
.btn.btn--ghost{ animation:none; }
.btn--ghost:hover{
  background:rgba(47,232,107,.08);
  box-shadow:0 0 30px rgba(47,232,107,.18);
}
.btn--ghost::after{ display:none; }

/* ---- confete verde do sucesso (criado pelo JS) ---- */
.confetti{
  position:fixed; inset:0;
  z-index:50;
  pointer-events:none;
  overflow:hidden;
}
.confetti i{
  position:absolute; top:-12px;
  width:7px; height:12px;
  border-radius:1px;
  opacity:0;
  animation:confettiFall var(--t,3s) cubic-bezier(.25,.6,.4,1) var(--d,0s) forwards;
}
@keyframes confettiFall{
  0%  { opacity:1; transform:translate3d(0,0,0) rotate(0); }
  100%{ opacity:0; transform:translate3d(var(--x,0), 100vh, 0) rotate(var(--r,540deg)); }
}


/* ---------------------------------------------------------
   TELAS DE ACESSO (gestão e área do aluno)
   --------------------------------------------------------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

.login{ display:flex; align-items:center; }
.login .container{ width:100%; }
.login__card{ max-width:400px; margin:0 auto; }
.login__brand{ margin-bottom:28px; }
.login__brand .logo__top{ font-size:9px; letter-spacing:5px; }
.login__brand .logo__main{ font-size:22px; margin-top:3px; }
.login .alert code{ display:inline-block; margin-top:6px; word-break:break-all; }

.login__card .btn{ margin-top:6px; }
.login__links{ margin-top:18px; font-size:12px; text-align:center; color:var(--txt-mute); }
.login__links a{ color:var(--green); text-decoration:none; font-weight:500; }
.login__links a:hover{ text-decoration:underline; }
.login__lead{ margin:-10px 0 22px; font-size:13px; line-height:1.6; color:var(--txt-dim); }

/* aviso de sucesso/erro depois de uma ação */
.flash{
  margin-bottom:20px;
  padding:13px 16px;
  border-radius:10px;
  font-size:13px;
  line-height:1.5;
}
.flash--ok{ border:1px solid rgba(47,232,107,.35); background:rgba(47,232,107,.08); color:#c9f5d9; }
.flash--erro{ border:1px solid rgba(255,122,107,.35); background:var(--danger-bg); color:#ffd2cc; }

/* ---------------------------------------------------------
   ENTRADA
   --------------------------------------------------------- */
.js .flow .steps,
.js .flow .flow__title,
.js .flow .section-sub,
.js .flow .form-card,
.js .flow .summary-card,
.js .flow .status-card{
  animation:flowIn .9s var(--ease-out-expo) both;
}
.js .flow .flow__title  { animation-delay:.06s; }
.js .flow .section-sub  { animation-delay:.12s; }
.js .flow .form-card    { animation-delay:.18s; }
.js .flow .summary-card { animation-delay:.26s; }
.js .flow .status-card  { animation-delay:.08s; }
@keyframes flowIn{
  from{ opacity:0; transform:translateY(22px); }
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */
@media (max-width:900px){
  .checkout__grid{ grid-template-columns:1fr; }
  .summary-card{ position:static; order:-1; }  /* no celular, o que se compra vem antes */
  .next{ grid-template-columns:1fr; }
  .status-card__title{ font-size:28px; }
}

@media (max-width:640px){
  .topbar__inner{ padding-top:12px; padding-bottom:12px; }
  .brand .logo__main{ font-size:16px; }
  .brand .logo__top{ font-size:8px; letter-spacing:4px; }
  .secure-badge{ padding:6px 10px; font-size:10px; }

  .flow__main{ padding:28px 0 60px; }
  .steps{ gap:8px; margin-bottom:28px; }
  .steps__item{ font-size:0; gap:0; }          /* só os números no celular */
  .steps__item.is-current{ font-size:11px; gap:7px; }
  .steps__item + .steps__item::before{ width:18px; margin-right:8px; }

  .form-card,
  .summary-card{ padding:26px 20px 24px; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .summary-card__total strong{ font-size:28px; }

  .status-card{ padding:36px 20px 28px; }
  .status-card__title{ font-size:24px; }
  .status-card__lead{ font-size:14px; }
  .details{ padding:4px 16px; }
  .details__row{ flex-direction:column; align-items:flex-start; gap:2px; }
  .details dd{ text-align:left; }
  .status-card__actions .btn{ min-width:0; width:100%; }
}

/* no celular estreito o logo precisa da largura: fica só o cadeado */
@media (max-width:420px){
  .secure-badge{ padding:8px 10px; }
  .secure-badge__txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

@media (prefers-reduced-motion: reduce){
  .confetti{ display:none; }
}

.status-card__note{ margin-top:16px; font-size:12px; color:var(--txt-mute); }
.status-card__note a{ color:var(--green); text-decoration:none; font-weight:500; }
.status-card__note a:hover{ text-decoration:underline; }