/* ════════════════════════════════════════════════════════════════
   Lista de espera da THE MAISON ACADEMY.

   ⚠️ Irmão do prive.css, não filho. Partilham a aparência mas não o
   ficheiro, para que mexer aqui nunca possa partir o formulário do
   Privé — esse fica exatamente como está.

   As variáveis de cor vêm do membros.css, carregado antes deste.
   ════════════════════════════════════════════════════════════════ */

body{display:block}

/* ── Página: coluna centrada, com a fita de luz por trás ─────── */
.topo-p{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(18px,5vw,40px);background:rgba(7,11,20,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.envelope{position:relative;overflow:hidden;isolation:isolate}
.luz{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.luz svg{position:absolute;inset:0;width:100%;height:100%}
.luz .halo{filter:blur(70px);opacity:.42}
.luz .nucleo{filter:blur(5px);opacity:.7}
.luz::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(7,11,20,.4) 26%,rgba(7,11,20,.2) 55%,rgba(7,11,20,.75) 85%,var(--bg) 100%)}
.coluna{max-width:1040px;margin:0 auto;padding:clamp(44px,8vw,92px) clamp(18px,5vw,40px) 100px}
.centro{text-align:center}
.centro .sub{margin-left:auto;margin-right:auto}
.pe-p{border-top:1px solid var(--line);padding:32px clamp(18px,5vw,40px);text-align:center;font-size:13px;color:var(--faint);background:var(--bg-2)}
.pe-p a{color:var(--faint)}
.pe-p a:hover{color:var(--gold)}
.topo-p .lang{display:flex;gap:6px}
.topo-p .lang button{border:1px solid var(--line);background:transparent;color:var(--faint);border-radius:7px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:7px 12px;min-height:36px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.topo-p .lang button.on{background:var(--gold);border-color:var(--gold);color:#070B14}
.topo-p .lang button:hover:not(.on){color:var(--bone);border-color:var(--line-2)}
.marca .txt-marca{display:none}
@media(min-width:520px){.marca .txt-marca{display:inline}}

/* ── Título do formulário ─────────────────────────────────────
   Uma linha só, no lugar do antigo ecrã de apresentação. Alinha à
   esquerda e à mesma largura do cartão do formulário, para os dois
   lerem-se como um bloco e não como duas peças soltas. */
.titulo-form{max-width:720px;margin:0 auto clamp(16px,2.6vw,24px);
  font-family:var(--display);font-variation-settings:'wght' 800;font-weight:800;
  font-size:clamp(26px,4.6vw,40px);line-height:1.12;letter-spacing:-.03em;
  text-wrap:balance}

/* ── O formulário ────────────────────────────────────────────── */
.formulario{max-width:720px;margin:0 auto;border:1px solid var(--line);border-radius:20px;background:linear-gradient(170deg,rgba(201,169,106,.06),var(--card) 55%);padding:clamp(26px,4.5vw,44px);position:relative;overflow:hidden}

.barra{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:10px}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-lite));width:0;transition:width .35s cubic-bezier(.4,0,.2,1)}
.conta-passos{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 30px}

.pergunta{animation:entra .32s ease}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pergunta h3{font-family:var(--display);font-variation-settings:'wght' 800;font-weight:800;font-size:clamp(21px,3.6vw,31px);letter-spacing:-.025em;line-height:1.16;margin:0 0 10px;text-wrap:balance}
.pergunta .ajuda{color:var(--faint);font-size:14px;margin:0 0 24px;line-height:1.55}

.campo{width:100%;background:rgba(7,11,20,.55);border:1px solid var(--line);border-radius:12px;color:var(--bone);font-family:var(--body);font-size:17px;padding:16px 18px;outline:none;transition:border-color .15s,background .15s}
.campo::placeholder{color:var(--faint)}
.campo:focus{border-color:var(--gold);background:rgba(7,11,20,.75)}

/* Telefone: indicativo à esquerda, número à direita. O indicativo não
   encolhe, para o "+351" nunca ficar cortado a meio. */
.tel-linha{display:flex;gap:10px}
.campo--ind{width:auto;flex:none;min-width:104px;font-family:var(--mono);font-size:15px;padding-right:12px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.campo--ind option{background:var(--card);color:var(--bone)}

.opcoes{display:flex;flex-direction:column;gap:10px}
.opcao{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:rgba(7,11,20,.45);border:1px solid var(--line);border-radius:12px;color:var(--bone);font-family:var(--body);font-size:16px;line-height:1.4;padding:16px 18px;min-height:56px;cursor:pointer;transition:border-color .15s,background .15s}
.opcao:hover{border-color:var(--line-2);background:rgba(7,11,20,.7)}
.opcao.on{border-color:var(--gold);background:var(--gold-tint)}
.opcao .marca-op{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.opcao.on .marca-op{border-color:var(--gold)}
.opcao.on .marca-op::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}

.navf{display:flex;align-items:center;gap:12px;margin-top:28px}
.navf .atras{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);background:none;border:0;cursor:pointer;padding:10px 4px;min-height:44px;transition:color .15s}
.navf .atras:hover{color:var(--gold)}
.navf .avancar{margin-left:auto}
.erro-campo{color:#FF8080;font-size:13px;margin:12px 0 0;min-height:18px}

/* Campo-armadilha: invisível para pessoas, irresistível para robôs. */
.armadilha{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ── Ecrã final ──────────────────────────────────────────────── */
.final{text-align:center;animation:entra .4s ease}
.final .selo{width:78px;height:78px;margin:0 auto 26px;border-radius:50%;border:1px solid var(--line-2);background:var(--gold-tint);display:flex;align-items:center;justify-content:center;color:var(--gold);box-shadow:0 0 50px rgba(201,169,106,.18)}
.final .selo svg{width:32px;height:32px}
.final h3{font-family:var(--display);font-variation-settings:'wght' 800;font-weight:800;font-size:clamp(24px,4.2vw,36px);letter-spacing:-.025em;margin:0 0 14px}
.final p{color:var(--dim);font-size:16px;line-height:1.6;max-width:44ch;margin:0 auto}
.posicao{margin:30px auto 0;display:inline-flex;flex-direction:column;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:16px;background:rgba(7,11,20,.5);padding:22px 40px}
.posicao .num{font-family:var(--display);font-variation-settings:'wght' 900;font-weight:900;font-size:clamp(38px,7vw,54px);line-height:1;letter-spacing:-.04em;color:var(--gold)}
.posicao .rot{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

.turnstile-caixa{margin-top:20px}

/* ════════════════════════════════════════════════════════════════
   MINI-CARTÕES DOS PLANOS — o contexto por baixo do formulário.

   O markup em inscricao/index.html já existia (.planos-mini, .pm-*),
   mas não havia regra nenhuma para estas classes em lado nenhum: era
   por isso que a secção saía como texto corrido branco.

   Isto é SECUNDÁRIO ao formulário. Nada aqui pode competir com o CTA
   principal: sem fundo forte, sem sombra, preço em dourado discreto.
   ════════════════════════════════════════════════════════════════ */

.planos-mini{margin-top:clamp(38px,6vw,56px)}
.planos-mini-tit{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);text-align:center;margin:0 0 16px}

/* Telemóvel: os três empilhados. A partir dos 900px, três colunas
   iguais — 1fr e não auto, para os cartões ficarem todos da mesma
   altura mesmo com descrições de comprimentos diferentes. */
.pm-lista{display:grid;grid-template-columns:1fr;gap:12px;max-width:420px;margin:0 auto}
@media(min-width:900px){
  .pm-lista{grid-template-columns:repeat(3,1fr);gap:16px;max-width:none}
}

.pm{display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:18px 20px;color:inherit;text-decoration:none;
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.pm:hover{border-color:var(--line-2);background:var(--card-2);transform:translateY(-2px)}
.pm:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px}

.pm-nome{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}

/* text-wrap:pretty evita a última linha com uma palavra só. O min-height
   alinha os preços entre os três cartões quando uma descrição ocupa duas
   linhas e as outras só uma. */
.pm-desc{font-size:13px;line-height:1.45;color:var(--dim);text-wrap:pretty}
@media(min-width:900px){.pm-desc{min-height:2.9em}}

.pm-preco{margin-top:auto;font-family:var(--display);font-variation-settings:'wght' 700;
  font-weight:700;font-size:19px;letter-spacing:-.015em;color:var(--gold)}
/* O sufixo (/mês, /ano, uma vez) não é ênfase — é unidade. */
.pm-preco i{font-family:var(--mono);font-style:normal;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

@media(prefers-reduced-motion:reduce){.pm,.pm:hover{transform:none}}