/* Página pública de links — GoOn */
:root {
  --lp-fundo: #a3a3a3;
  --lp-texto: #111;
  --lp-botao: #dcdcdc;
  --lp-botao-texto: #111;
  --lp-head: 'Montserrat', system-ui, sans-serif;
  --lp-body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--lp-fundo);
  background-image: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  background-attachment: fixed;
  color: var(--lp-texto);
  font-family: var(--lp-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body.lp-lock { overflow: hidden; }

.lp { max-width: 600px; margin: 0 auto; padding: 18px 16px 56px; }

.lp-top { display: flex; justify-content: space-between; }
.lp-round {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.85); color: #111; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: background .15s, transform .15s;
}
.lp-round:hover { background: #fff; transform: scale(1.05); }

.lp-head { text-align: center; margin-top: -14px; }
.lp-avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; overflow: hidden;
  background: #000; display: grid; place-items: center;
}
.lp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-avatar .lp-logo { width: 74%; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.lp-title { font: 700 20px var(--lp-head); margin: 0 0 6px; letter-spacing: .01em; }
.lp-bio { font-size: 14px; line-height: 1.45; margin: 0 auto; max-width: 440px; opacity: .9; }

.lp-list { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.lp-sec {
  font: 700 13px var(--lp-head); text-transform: uppercase; letter-spacing: .04em;
  text-align: center; margin: 14px 0 0;
}
.lp-sec:first-child { margin-top: 0; }

.lp-item { position: relative; }
.lp-btn {
  display: flex; align-items: center; min-height: 56px; padding: 8px 52px; border-radius: 999px;
  background: var(--lp-botao); color: var(--lp-botao-texto); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .15s, box-shadow .15s, filter .15s;
  position: relative;
}
.lp-btn:hover { transform: scale(1.015); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.lp-btn:active { transform: scale(.99); }
.lp-btn:focus-visible, .lp-more:focus-visible, .lp-round:focus-visible, .lp-act:focus-visible, .lp-x:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.lp-btn-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; }
.lp-btn-ic img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.lp-btn-t { flex: 1; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.3; }
.lp-more {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--lp-botao-texto);
  display: grid; place-items: center; cursor: pointer; opacity: .65;
}
.lp-more:hover { background: rgba(0,0,0,.07); opacity: 1; }

/* Janela de compartilhar / QR code */
.lp-modal {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: lpFade .15s ease-out;
}
.lp-modal[hidden] { display: none; }
.lp-sheet {
  position: relative; width: 100%; max-width: 380px; background: #fff; color: #111;
  border-radius: 22px; padding: 26px 22px 20px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: lpUp .18s ease-out;
}
.lp-x { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f1f1; color: #111; display: grid; place-items: center; cursor: pointer; }
.lp-x:hover { background: #e4e4e4; }
.lp-modal-t { font: 700 17px var(--lp-head); margin: 4px 44px 16px; overflow-wrap: anywhere; }
.lp-qr { width: 220px; height: 220px; margin: 0 auto; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid #ececec; }
.lp-qr svg { width: 100%; height: 100%; display: block; }
.lp-modal-url { font-size: 13px; color: #555; margin: 12px 0 16px; overflow-wrap: anywhere; }
.lp-modal-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.lp-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px;
  border: 1px solid #e6e6e6; background: #fafafa; color: #111; font: 500 12px var(--lp-body); cursor: pointer;
}
.lp-act:hover { background: #f0f0f0; }
.lp-act[hidden] { display: none; }

@keyframes lpFade { from { opacity: 0; } }
@keyframes lpUp { from { transform: translateY(14px); opacity: 0; } }

@media (max-width: 420px) {
  .lp-btn { padding: 8px 48px; }
  .lp-btn-t { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-round, .lp-modal, .lp-sheet { transition: none; animation: none; }
}