/* Modelo de bio "Luxo" — inspirado em lauramilitani.com.
   Creme + dourado, serifa editorial, vídeo/foto no topo com moldura. */
:root{
  --gold:#b8935a;                 /* sobrescrito pelo accent inline */
  --cream:#f4ede2;
  --cream-2:#fbf7f0;
  --ink:#2b211a;
  --muted:#8c7d6b;
  --line:rgba(120,96,64,.18);
}
*{box-sizing:border-box}
html,body{margin:0}
body.lx{
  background:#17120d;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:18px 14px 40px;
  min-height:100vh;
}
.lx-wrap{max-width:440px;margin:0 auto}

/* ---------- topo: vídeo/foto ---------- */
.lx-hero{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:4/5;
  border:1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 6px rgba(255,255,255,.04);
  background:#0f0b07;
}
.lx-media{width:100%;height:100%;object-fit:cover;display:block}
.lx-pill{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:2;white-space:nowrap;
  padding:7px 16px;border-radius:999px;
  background:rgba(20,15,10,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  color:#f3e6cf;font-size:11px;font-weight:600;letter-spacing:.18em;
}

/* ---------- cartão creme ---------- */
.lx-card{
  position:relative;
  margin-top:14px;
  background:var(--cream);
  border-radius:24px;
  padding:58px 26px 26px;
  text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.lx-avatar{width:96px;height:96px;margin:0 auto 4px;position:relative}
.lx-avatar--over{margin-top:-70px}
.lx-avatar img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;
  border:3px solid var(--cream);
  box-shadow:0 0 0 2px var(--gold), 0 8px 20px rgba(0,0,0,.35);
}
.lx-check{
  position:absolute;right:-2px;bottom:-2px;
  width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  border:3px solid var(--cream);
}
.lx-name{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:600;font-size:30px;line-height:1.15;margin:10px 0 2px;
  color:var(--ink);letter-spacing:.2px;
}
.lx-handle{margin:0;color:var(--gold);font-weight:500;font-size:14.5px}

.lx-div{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px auto;max-width:200px}
.lx-div::before,.lx-div::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.lx-div span{color:var(--gold);font-size:14px}

.lx-bio{color:#57493b;font-size:15px;line-height:1.62;margin:0 auto 4px;max-width:340px}

.lx-social{display:flex;justify-content:center;gap:10px;margin:18px 0 4px}
.lx-social a{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream-2);border:1px solid var(--line);color:#6a5a47;
  transition:.18s;
}
.lx-social a:hover{color:#fff;background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.lx-social svg{width:18px;height:18px}

/* ---------- links ---------- */
.lx-links{display:flex;flex-direction:column;gap:12px;margin-top:22px;text-align:left}
.lx-link{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;border-radius:16px;
  background:var(--cream-2);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;
  transition:.18s;
}
.lx-link:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(90,66,32,.14);border-color:color-mix(in srgb,var(--gold) 45%,transparent)}
.lx-link--cta{
  background:linear-gradient(135deg, color-mix(in srgb,var(--gold) 16%,var(--cream-2)), var(--cream-2));
  border-color:color-mix(in srgb,var(--gold) 40%,transparent);
}
.lx-link-img{flex:0 0 auto;width:48px;height:48px;border-radius:12px;overflow:hidden;background:#eee}
.lx-link-img img{width:100%;height:100%;object-fit:cover;display:block}
.lx-link-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lx-link-txt strong{font-weight:600;font-size:15.5px;line-height:1.25}
.lx-link-txt span{color:var(--muted);font-size:12.5px;line-height:1.3}
.lx-link-badge{
  align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:var(--gold);margin-bottom:1px;
}
.lx-arrow{color:var(--gold);font-size:26px;line-height:1;font-weight:400;flex:0 0 auto}

/* ---------- rodapé ---------- */
.lx-foot{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:30px;color:var(--muted);font-size:12.5px;
}
.lx-mono{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);
  color:var(--gold);font-family:'Playfair Display',serif;font-size:16px;font-weight:600;
  letter-spacing:.5px;
}
@media (max-width:380px){
  .lx-card{padding:52px 18px 22px}
  .lx-name{font-size:26px}
}