/* ═══════════════════════════════════════════════════════════════════════
   NEXO — escolha de portal.
   Mesma linguagem da landing (css/landing.css): monocromia #181818 × #FFF ×
   #E0E0E0, acento tonal, Bricolage display · Barlow texto · Mono dados.
   Ficheiro próprio e não a landing.css inteira: esta página são dois links
   e não precisa de 2500 linhas para os desenhar.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#181818; --bg-2:#1F1F1F; --bg-3:#242424;
  --txt:#FFFFFF; --txt-soft:rgba(255,255,255,.64); --txt-faint:rgba(255,255,255,.44);
  --hair:rgba(255,255,255,.12); --hair-soft:rgba(255,255,255,.07);
  --disp:'Bricolage Grotesque',Georgia,serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;background:var(--bg);color:var(--txt);
  font-family:var(--body);font-size:16px;line-height:1.6;
  display:flex;flex-direction:column;
  padding:max(20px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
.brand{
  font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.03em;
  color:var(--txt);text-decoration:none;align-self:flex-start;
}
.wrap{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  width:100%;max-width:620px;margin:0 auto;padding:40px 0;
}
.eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-faint);margin-bottom:14px;
}
h1{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(30px,7vw,44px);line-height:1.04;letter-spacing:-.025em;
  text-wrap:balance;
}
.sub{margin-top:14px;color:var(--txt-soft);font-size:15px;text-wrap:pretty;max-width:46ch}
.head{margin-bottom:36px}

/* Os dois cartões têm exactamente o mesmo peso: não há produto "principal"
   e sugerir um com destaque mandava metade das pessoas ao portal errado. */
.choices{display:grid;gap:12px}
.choice{
  display:flex;align-items:flex-start;gap:16px;
  padding:22px;border:1px solid var(--hair);border-radius:4px;
  background:var(--bg-2);text-decoration:none;color:inherit;
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--ease);
}
.choice:hover,.choice:focus-visible{
  border-color:rgba(255,255,255,.28);background:var(--bg-3);transform:translateY(-1px);
}
.choice:active{transform:scale(.995)}
.choice:focus-visible{outline:2px solid #fff;outline-offset:3px}
.choice-n{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--txt-faint);padding-top:5px;flex-shrink:0;
}
.choice-body{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.choice-title{
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.015em;
}
.choice-desc{font-size:13.5px;line-height:1.5;color:var(--txt-soft);text-wrap:pretty}
.choice-go{
  width:18px;height:18px;flex-shrink:0;margin-top:6px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  color:var(--txt-faint);
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.choice:hover .choice-go{color:var(--txt);transform:translateX(3px)}

/* A escolha guardada sobe para primeiro e diz-se porquê — um cartão que
   muda de sítio sem explicação lê-se como bug. */
/* Sem `order`: a reordenação é feita no DOM (ver entrar.js) para a ordem
   de tabulação acompanhar a visual. Fica só a marca. */
.choice-last-tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-faint);border:1px solid var(--hair);border-radius:2px;
  padding:2px 6px;align-self:flex-start;margin-top:6px;
}
.foot{
  margin-top:30px;font-size:13.5px;color:var(--txt-faint);text-wrap:pretty;
}
.foot a{color:var(--txt-soft);text-underline-offset:3px}
.foot a:hover{color:var(--txt)}

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