/* ===== Porta de entrada: escolha do painel ===== */
.porta{min-height:100dvh;display:grid;place-items:center;background:var(--bg);
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));padding-block:40px}
.porta-in{width:100%;max-width:860px;text-align:center}
.porta-marca{font-size:17px;margin-bottom:30px;color:var(--texto)}
.porta-marca span{color:var(--marca)}
.porta-marca small{color:var(--suave)}
.porta h1{font-family:var(--display);font-size:clamp(26px,4vw,34px);margin:0 0 8px;letter-spacing:-.015em}
.porta-sub{margin:0 0 30px;font-size:15px;color:var(--suave)}

.porta-op{display:grid;grid-template-columns:1fr;gap:16px;text-align:left}
@media (min-width:720px){ .porta-op{grid-template-columns:1fr 1fr} }

.porta-cartao{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:var(--superficie);border:1px solid var(--linha);border-radius:16px;
  padding:26px 24px;cursor:pointer;color:inherit;text-align:left;
  box-shadow:0 1px 2px rgba(11,15,25,.05), 0 10px 28px rgba(11,15,25,.07);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.porta-cartao:hover{border-color:var(--marca);transform:translateY(-2px);
  box-shadow:0 0 0 2px var(--marca-fraca), 0 16px 36px rgba(37,99,235,.14)}
.porta-cartao:focus-visible{outline:2px solid var(--marca);outline-offset:3px}
.pc-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--marca-fraca);color:var(--marca);margin-bottom:5px}
.pc-ic svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.porta-cartao b{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.01em}
.pc-txt{font-size:13.5px;color:var(--suave);line-height:1.55}
.pc-nota{font-size:12.5px;color:var(--marca);background:var(--marca-fraca);
  padding:6px 11px;border-radius:9px;line-height:1.45}
.pc-seta{margin-top:7px;font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--marca)}

.porta-pe{margin:26px 0 0;font-size:13px;color:var(--suave)}
.porta-sair{margin-top:14px}

/* botão de trocar de lado dentro do aplicativo */
.btn-trocar{width:100%;margin-bottom:10px;background:rgba(255,255,255,.10);
  border-color:var(--menu-linha);color:var(--menu-forte)}
.btn-trocar:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34)}