/* =========================================================
   Página "Começar um projeto"
   ========================================================= */
.page-project { min-height: 100svh; }
.page-project .nav { grid-template-columns: 1fr auto 1fr; }
.arr.back { transition: transform .4s var(--ease); }
.btn:hover .arr.back { transform: translateX(-4px); }
.btn-lg { min-height: 60px; padding: 0 34px; font-size: 17px; }

.project {
  padding-top: clamp(120px, 16vh, 170px);
  padding-bottom: clamp(60px, 10vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.project-intro { position: sticky; top: 130px; }
.project-title {
  margin-top: 18px;
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -.04em;
}
.project-intro .lead { margin-top: 22px; }
.next-steps { margin-top: 40px; border-top: 1px solid var(--line); }
.next-steps li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.next-steps span { font-size: 12px; color: var(--blue-2); letter-spacing: .08em; }

/* cartão do formulário */
.pform {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px;
  padding: clamp(28px, 4.5vw, 68px);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(59, 116, 255, .22), transparent 55%),
    linear-gradient(160deg, #121216 0%, #070708 100%);
  box-shadow: 0 60px 120px -60px rgba(59, 116, 255, .35);
}
/* reflexo subtil na borda superior esquerda */
.pform::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(140deg, rgba(110, 152, 255, .6), rgba(255, 255, 255, .06) 35%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.pfield { display: flex; flex-direction: column; min-width: 0; margin: 0 0 clamp(26px, 3.4vw, 44px); padding: 0; border: 0; }
.pfield.full, .full { grid-column: 1 / -1; }
.pfield label, .pfield legend { padding: 0; font-size: 18px; font-weight: 500; color: var(--text); }
.pfield small { margin-left: 8px; font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

.pfield input, .pfield textarea {
  width: 100%; margin-top: 12px; padding: 22px 0 14px;
  font: inherit; font-size: 18px; color: #fff;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
  transition: border-color .3s;
}
.pfield textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.pfield textarea::placeholder { color: rgba(255, 255, 255, .32); font-size: 15px; }
.pfield input:focus, .pfield textarea:focus { outline: none; border-bottom-color: var(--blue-2); }
.pfield input:focus-visible, .pfield textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--blue-2); }
.pfield [aria-invalid="true"] { border-bottom-color: #ff6b6b; }

/* caixas de seleção */
.checks-grid { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.check {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: 18px; color: rgba(255, 255, 255, .82); cursor: pointer; transition: color .25s;
}
.pfield .check { padding: 20px 0; font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, .82); }
.check:hover { color: #fff; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check .box {
  flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .45);
  display: grid; place-items: center; transition: background-color .25s, border-color .25s, transform .3s var(--ease);
}
.check .box::after { content: "✓"; font-size: 14px; color: #000; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease); }
.check input:checked + .box { background: #fff; border-color: #fff; }
.check input:checked + .box::after { opacity: 1; transform: none; }
.pfield .check:has(input:checked) { color: #fff; }
.check input:focus-visible + .box { outline: 2px solid var(--blue-2); outline-offset: 3px; }
.check:active .box { transform: scale(.9); }
.pfield.invalid .check { border-bottom-color: rgba(255, 107, 107, .45); }

.pactions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.perror { margin: -10px 0 18px; color: #ff8a8a; font-size: 15px; }
.pnote { margin-top: 26px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.pnote + .pnote { margin-top: 18px; }
.pnote a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .4); }
.pnote a:hover { text-decoration-color: var(--blue-2); }

/* estado de sucesso */
.pdone {
  grid-column: 2; padding: clamp(32px, 5vw, 68px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .12);
  background: radial-gradient(120% 70% at 0% 0%, rgba(59, 116, 255, .25), transparent 55%), #0b0b0d;
  animation: rise .7s var(--ease);
}
.pdone-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--blue); font-size: 26px; box-shadow: 0 0 50px -6px rgba(59, 116, 255, .8); }
.pdone h2 { margin-top: 26px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; letter-spacing: -.035em; }
.pdone .lead { margin-top: 14px; }
.pdone .pactions { margin-top: 30px; }

@media (max-width: 960px) {
  .project { grid-template-columns: 1fr; }
  .project-intro { position: static; }
  .pdone { grid-column: 1; }
}
@media (max-width: 640px) {
  .pform { grid-template-columns: 1fr; border-radius: 22px; }
  .checks-grid { grid-template-columns: 1fr; }
  .pfield label, .pfield legend, .pfield .check, .pfield input, .pfield textarea { font-size: 17px; }
  .pactions .btn { width: 100%; }
  .page-project .nav .btn-sm { display: inline-flex; }
}
@media (max-width: 760px) {
  .pnote a { display: inline-block; padding-block: 12px; }
}

/* campo armadilha anti-spam: fora do ecrã */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pform button[type="submit"][disabled] { opacity: .6; pointer-events: none; }