/* Página de parceiros (oseusoftware.pt/parceiros), v2 13-Out-2026: uma ideia por ecrã.
   Topo com os 3 passos em imagem, exemplos de ganhos, um cartão de inscrição, letra pequena.
   O formulário e as perguntas reaproveitam .pd-form e .faq-list do styles.css. */

.pc-main { display: grid; gap: clamp(5rem, 11vw, 9rem); padding-bottom: 6rem; }
.pc-h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; }

/* ---------- topo ---------- */
.pc-topo { display: grid; justify-items: center; text-align: center; padding-top: clamp(1rem, 3vw, 2.5rem); }
.pc-topo .sub-crumb { justify-content: center; }
.pc-topo h1 { margin-top: 0.4rem; font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.05; letter-spacing: -0.03em; }
.pc-lead { margin-top: 1.2rem; max-width: 34rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--ink-soft); }
.pc-cta { margin-top: 2rem; }

/* os 3 passos: dois cartões com imagem e o terceiro com o ganho, ligados por um fio que se desenha */
.pc-fluxo { --img-h: clamp(9rem, 15vw, 12.5rem); list-style: none; position: relative; width: 100%; max-width: 68rem; margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); --gap: clamp(1rem, 2.5vw, 2rem); gap: var(--gap); text-align: left; }
.pc-fluxo::before { content: ""; position: absolute; z-index: 0; left: 1.35rem; right: calc((100% - 2 * var(--gap)) / 3 - 1.35rem); top: calc(var(--img-h) + 2.2rem); height: 1px; background: linear-gradient(90deg, var(--line), var(--accent) 60%, #cdd6ff); transform-origin: left; }
.pc-passo { position: relative; z-index: 1; display: grid; align-content: start; gap: 0.5rem; }
.pc-passo figure, .pc-ganho { margin: 0; height: var(--img-h); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-raised); }
.pc-passo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-ganho { display: grid; place-content: center; justify-items: center; gap: 0.2rem; background: radial-gradient(90% 90% at 50% 100%, rgb(90 120 255 / 0.32), transparent 70%), var(--bg-raised); border-color: rgb(90 120 255 / 0.35); }
.pc-ganho strong { font-family: var(--display); font-weight: 600; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; color: #e3e8ff; }
.pc-ganho span { font-size: 0.9rem; color: var(--ink-soft); }
.pc-n { width: 2.7rem; height: 2.7rem; margin-top: 0.85rem; display: grid; place-items: center; border-radius: 999px; background: var(--bg); border: 1px solid var(--accent-soft); color: #cdd6ff; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-passo-fim .pc-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.pc-passo h2 { margin-top: 0.4rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.pc-passo p { color: var(--ink-soft); font-size: 0.95rem; max-width: 20rem; }

/* ---------- quanto pode ganhar ---------- */
.pc-bloco { width: 100%; max-width: 68rem; justify-self: center; }
.pc-ganhos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.pc-ganhos li { display: grid; gap: 0.35rem; padding: 1.6rem 1.5rem; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-raised); }
.pc-ganhos li:last-child { background: radial-gradient(120% 100% at 100% 0%, rgb(90 120 255 / 0.16), transparent 60%), var(--bg-raised); border-color: rgb(90 120 255 / 0.3); }
.pc-ganhos span { font-size: 0.85rem; color: var(--ink-soft); }
.pc-ganhos b { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pc-ganhos em { font-style: normal; margin-top: 0.6rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 1.05rem; font-weight: 600; color: #cdd6ff; font-variant-numeric: tabular-nums; }
.pc-nota { margin-top: 1rem; font-size: 0.85rem; color: #85858f; }

/* ---------- inscrição: um cartão só, que passa a mostrar o link ---------- */
.pc-inscricao { display: grid; justify-items: center; }
.pc-cartao-form { width: 100%; max-width: 32rem; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(120% 60% at 50% 0%, rgb(90 120 255 / 0.1), transparent 60%), var(--bg-raised); box-shadow: 0 30px 80px rgb(0 0 0 / 0.35); }
.pd-form label small { color: #85858f; font-size: 0.8rem; }
.pd-form .pc-check { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; color: var(--ink-soft); cursor: pointer; }
.pd-form .pc-check input { margin-top: 0.15rem; accent-color: var(--accent); width: 1.15rem; height: 1.15rem; flex: none; padding: 0; }
.pd-form .pc-check a { color: #cdd6ff; }
.pc-feito { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.6rem, 3.5vw, 2.6rem); }
.pc-feito[hidden], .pc-indicar[hidden], .pd-form[hidden] { display: none; }
.pc-feito-ico { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border-radius: 999px; background: rgb(76 195 138 / 0.14); color: #7ee0ad; }
.pc-feito-ico .ec-i { width: 1.3rem; height: 1.3rem; }
.pc-feito p { color: var(--ink-soft); }
.pc-link { width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.45rem 0.45rem 0.95rem; border-radius: 14px; border: 1px solid rgb(90 120 255 / 0.35); background: var(--bg); font-size: 0.95rem; overflow: hidden; }
.pc-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e3e8ff; }
.pc-copiar { flex: none; min-height: 44px; padding: 0 1rem; border-radius: 10px; border: 1px solid #34343d; background: #23232a; color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: transform 0.15s ease; }
.pc-copiar:active { transform: scale(0.97); }
.pc-feito-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pc-ja { margin-top: 1.2rem; font-size: 0.92rem; color: var(--ink-soft); }
.pc-ja[hidden] { display: none; }
.pc-linkbtn { background: none; border: 0; padding: 0.6rem 0.2rem; font: inherit; color: #cdd6ff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pc-feito + .pc-indicar { border-top: 1px solid var(--line); }

/* ---------- letra pequena ---------- */
#letra-pequena .faq-list { margin-top: 1.6rem; }

/* ---------- telemóvel: passos na vertical, imagem pequena à esquerda ---------- */
@media (max-width: 760px) {
  .pc-topo { text-align: left; justify-items: start; }
  .pc-topo .sub-crumb { justify-content: flex-start; }
  .pc-cta { width: 100%; text-align: center; }
  .pc-fluxo { grid-template-columns: 1fr; gap: 1.6rem; --img-h: 5.5rem; }
  .pc-fluxo::before { left: 1.35rem; right: auto; top: 2.75rem; bottom: 2.75rem; width: 1px; height: auto; background: linear-gradient(180deg, var(--line), var(--accent) 60%, #cdd6ff); transform-origin: top; }
  .pc-passo { grid-template-columns: 2.7rem 5.5rem 1fr; column-gap: 0.9rem; row-gap: 0.15rem; align-items: center; }
  .pc-passo .pc-n { grid-row: 1 / span 2; grid-column: 1; margin-top: 0; }
  .pc-passo figure, .pc-ganho { grid-row: 1 / span 2; grid-column: 2; width: 5.5rem; height: 5.5rem; border-radius: 14px; }
  .pc-ganho strong { font-size: 1.7rem; }
  .pc-ganho span { display: none; }
  .pc-passo h2 { grid-column: 3; grid-row: 1; margin-top: 0; font-size: 1.05rem; align-self: end; }
  .pc-passo p { grid-column: 3; grid-row: 2; font-size: 0.9rem; align-self: start; }
  .pc-ganhos { grid-template-columns: 1fr; }
  .pc-ganhos li { grid-template-columns: 1fr auto; align-items: baseline; }
  .pc-ganhos span { grid-column: 1 / -1; }
  .pc-ganhos em { margin: 0; padding: 0; border: 0; }
  .pc-feito-acoes .btn { width: 100%; text-align: center; }
}

/* ---------- movimento: o fio desenha-se e os passos acendem por ordem (conta a história do 1 ao 3) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .mov .pc-fluxo::before { animation: pc-fio-x 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both; }
  .mov .pc-passo { animation: pc-sobe 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .mov .pc-passo:nth-child(1) { animation-delay: 0.25s; }
  .mov .pc-passo:nth-child(2) { animation-delay: 0.7s; }
  .mov .pc-passo:nth-child(3) { animation-delay: 1.15s; }
  .mov .pc-passo-fim .pc-ganho strong { animation: pc-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both; }
  .pc-ganhos li { transition: transform 0.25s ease, border-color 0.25s ease; }
  .pc-ganhos li:hover { transform: translateY(-3px); border-color: rgb(90 120 255 / 0.4); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .mov .pc-fluxo::before { animation-name: pc-fio-y; }
}
@keyframes pc-fio-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pc-fio-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes pc-sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pc-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.pd-form label[hidden] { display: none; }

/* passo 1: o link pessoal, como o parceiro o vê (nome a mudar = é pessoal) e por onde se partilha */
.pc-link-vis { height: var(--img-h); display: grid; align-content: center; gap: 0.75rem; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(100% 80% at 50% 0%, rgb(90 120 255 / 0.12), transparent 70%), var(--bg-raised); overflow: hidden; }
.pc-lv-eti { font-size: 0.78rem; color: var(--ink-soft); }
.pc-lv-url { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.35rem 0.35rem 0.8rem; border-radius: 12px; border: 1px solid rgb(90 120 255 / 0.4); background: var(--bg); box-shadow: 0 0 0 4px rgb(90 120 255 / 0.07); }
.pc-lv-url span { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-lv-url b { color: #e3e8ff; font-weight: 500; }
.pc-lv-url i { flex: none; font-style: normal; font-size: 0.74rem; font-weight: 500; padding: 0.38rem 0.6rem; border-radius: 8px; background: #23232a; border: 1px solid #34343d; color: var(--ink); }
.pc-lv-redes { display: flex; align-items: center; gap: 0.45rem; }
.pc-lv-redes small { margin-right: auto; font-size: 0.78rem; color: var(--ink-soft); }
.pc-rede { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #17171c); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); color: var(--c); }
.pc-rede svg { width: 1.05rem; height: 1.05rem; }
.pc-lv-nome-sai { opacity: 0; transform: translateY(-4px); }
[data-pc-nome] { display: inline-block; transition: opacity 0.25s ease, transform 0.25s ease; }
@media (prefers-reduced-motion: no-preference) {
  .mov .pc-rede { animation: pc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
  .mov .pc-rede:nth-of-type(1) { animation-delay: 0.9s; }
  .mov .pc-rede:nth-of-type(2) { animation-delay: 1s; }
  .mov .pc-rede:nth-of-type(3) { animation-delay: 1.1s; }
}
@media (max-width: 760px) {
  .pc-link-vis { grid-row: 1 / span 2; grid-column: 2; width: 5.5rem; height: 5.5rem; padding: 0; border-radius: 14px; place-content: center; justify-items: center; }
  .pc-lv-eti, .pc-lv-url, .pc-lv-redes small, .pc-rede:not(:first-of-type) { display: none; }
  .pc-rede { width: 2.6rem; height: 2.6rem; }
  .pc-rede svg { width: 1.3rem; height: 1.3rem; }
}