/* =========================================================
   Links da bio — Nova Magnitude
   Mesma identidade do site e da vitrine: fundo #070B14, índigo + céu,
   Plus Jakarta Sans (títulos) e Inter (texto).
   ========================================================= */

@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"); size-adjust: 104.2%; ascent-override: 99.6%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 104.3%; ascent-override: 92.9%; descent-override: 23.1%; line-gap-override: 0%; }

:root {
  --bg: #070B14;
  --ink-2: #0D1324;
  --line-d: rgba(148, 163, 184, .16);
  --text-d: #F8FAFC;
  --muted-d: #A5B0C4;
  --indigo: #4F46E5;
  --indigo-2: #6366F1;
  --indigo-3: #818CF8;
  --sky: #38BDF8;
  --f-head: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, sans-serif;
  --f-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: clip; font-family: var(--f-body); font-size: 1rem; line-height: 1.55; color: var(--text-d); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 22px; height: 22px; flex: none; }
.mono { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .14em; }

/* ---------- Fundo ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg__glow { position: absolute; inset: -10% -30% auto; height: 80%;
  background: radial-gradient(ellipse 50% 45% at 50% 10%, rgba(99,102,241,.42), transparent 70%), radial-gradient(ellipse 35% 30% at 85% 55%, rgba(56,189,248,.14), transparent 70%), radial-gradient(ellipse 35% 30% at 10% 70%, rgba(79,70,229,.14), transparent 70%); }
.bg__dots { position: absolute; inset: 0; opacity: .45;
  background-image: radial-gradient(rgba(148,163,184,.28) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000, transparent 75%); }
.bg__arcs { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 45%; opacity: .35; }

/* ---------- Página ---------- */
.page { position: relative; width: min(100% - 2rem, 30rem); margin-inline: auto; padding: calc(2.25rem + env(safe-area-inset-top)) 0 calc(2rem + env(safe-area-inset-bottom)); display: grid; gap: 1.4rem; }

.share { position: absolute; top: calc(.9rem + env(safe-area-inset-top)); right: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-d); background: rgba(255,255,255,.04); color: var(--muted-d); cursor: pointer; transition: color .2s, background-color .2s, transform .2s var(--ease); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.share .i { width: 19px; height: 19px; }
.share:hover { color: #fff; background: rgba(255,255,255,.09); }
.share:active { transform: scale(.94); }

/* ---------- Perfil ---------- */
.profile { display: grid; justify-items: center; text-align: center; gap: .4rem; }
.profile__mark { position: relative; width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: .45rem; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #161E3A, #0B1020 70%); box-shadow: 0 0 0 1px rgba(129,140,248,.25), 0 20px 50px -12px rgba(79,70,229,.6); }
.profile__mark img { width: 54px; height: 54px; }
/* anel em gradiente girando devagar */
.profile__ring { position: absolute; inset: -5px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 30%, var(--sky) 45%, var(--indigo-2) 60%, transparent 75% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: girar 6s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }
.profile__name { font-family: var(--f-head); font-weight: 800; font-size: 1.6rem; letter-spacing: .06em; line-height: 1.1; }
.profile__magnitude { background: linear-gradient(90deg, var(--indigo-3), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.profile__tag { font-size: .72rem; color: var(--muted-d); }
.profile__bio { max-width: 24rem; margin-top: .2rem; color: var(--muted-d); font-size: 1rem; }

/* ---------- Cards de link ---------- */
.links { display: grid; gap: .75rem; }
.card { --x: 50%; --y: 50%; position: relative; display: block; isolation: isolate; overflow: hidden; border-radius: 22px; text-decoration: none; color: var(--text-d);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); border: 1px solid var(--line-d);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background-color .25s; -webkit-tap-highlight-color: transparent; }
/* brilho que segue o dedo/mouse */
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--x) var(--y), rgba(129,140,248,.22), transparent 70%); }
.card:hover { transform: translateY(-2px); border-color: rgba(129,140,248,.45); box-shadow: 0 18px 40px -18px rgba(79,70,229,.55); }
.card:hover::before, .card:focus-visible::before { opacity: 1; }
.card:active { transform: scale(.985); }
.card__body { display: flex; align-items: center; gap: .9rem; min-height: 72px; padding: .8rem 1.1rem .8rem .85rem; }
.card__icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--indigo-3);
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(56,189,248,.1)); border: 1px solid rgba(129,140,248,.3); }
.card__text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.card__title { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.card__sub { color: var(--muted-d); font-size: .88rem; line-height: 1.4; }
.card__go { width: 20px; height: 20px; color: var(--muted-d); transition: transform .25s var(--ease), color .25s; }
.card:hover .card__go { transform: translateX(3px); color: #fff; }
.card[target="_blank"]:hover .card__go { transform: translate(2px, -2px); }

/* Destaque: vitrine de modelos */
.card--feature { border-color: transparent; background:
  linear-gradient(180deg, #111834, #0C1226) padding-box,
  linear-gradient(135deg, rgba(56,189,248,.8), rgba(99,102,241,.55) 40%, rgba(148,163,184,.15) 75%) border-box; border: 1px solid transparent; }
.card__badge { position: absolute; top: 1rem; right: 1rem; z-index: 2; font-size: .68rem; padding: .3rem .6rem; border-radius: 999px; color: #0B1220; background: var(--sky); font-weight: 700; letter-spacing: .12em; }
.fan { position: relative; display: block; height: 104px; margin: 0 1rem; order: -1; }
.card--feature { display: flex; flex-direction: column; padding-top: .75rem; }
.fan__card { position: absolute; left: 50%; bottom: -34px; width: 44%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); background: #1B2234;
  transform-origin: 50% 120%; transition: transform .5s var(--ease); }
.fan__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fan__card--1 { transform: translateX(-50%) rotate(-24deg) translateY(6px); }
.fan__card--2 { transform: translateX(-50%) rotate(-12deg) translateY(2px); }
.fan__card--3 { transform: translateX(-50%) rotate(0deg); z-index: 1; }
.fan__card--4 { transform: translateX(-50%) rotate(12deg) translateY(2px); }
.fan__card--5 { transform: translateX(-50%) rotate(24deg) translateY(6px); }
.card--feature:hover .fan__card--1 { transform: translateX(-50%) rotate(-30deg) translateY(2px); }
.card--feature:hover .fan__card--2 { transform: translateX(-50%) rotate(-15deg) translateY(-2px); }
.card--feature:hover .fan__card--3 { transform: translateX(-50%) rotate(0deg) translateY(-6px); }
.card--feature:hover .fan__card--4 { transform: translateX(-50%) rotate(15deg) translateY(-2px); }
.card--feature:hover .fan__card--5 { transform: translateX(-50%) rotate(30deg) translateY(2px); }
.card--feature .card__body { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(12,18,38,0), #0C1226 30%); padding-top: 1.1rem; }
.card--feature .card__title { font-size: 1.15rem; }

/* WhatsApp: ação principal */
.card--wa { border-color: transparent; background: linear-gradient(135deg, #5A52F0, var(--indigo) 55%, #4338CA); box-shadow: 0 16px 40px -14px rgba(79,70,229,.75), inset 0 1px 0 rgba(255,255,255,.18); }
.card--wa::before { background: radial-gradient(240px circle at var(--x) var(--y), rgba(255,255,255,.2), transparent 70%); }
.card--wa:hover { border-color: transparent; box-shadow: 0 22px 48px -14px rgba(79,70,229,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.card--wa .card__icon { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.25); }
.card--wa .card__sub, .card--wa .card__go { color: rgba(255,255,255,.82); }

/* ---------- Destaques e rodapé ---------- */
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-d); }
.facts li { display: inline-flex; align-items: center; gap: .4rem; }
.facts .i { width: 14px; height: 14px; color: var(--sky); }

.foot { display: grid; justify-items: center; gap: .35rem; text-align: center; padding-top: 1.25rem; border-top: 1px solid var(--line-d); }
.foot__mail { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .5rem; color: var(--text-d); text-decoration: none; font-weight: 500; }
.foot__mail .i { width: 18px; height: 18px; color: var(--indigo-3); }
.foot__mail:hover { color: var(--sky); }
.foot__slogan { font-family: var(--f-head); font-weight: 700; color: var(--indigo-3); }
.foot__legal { font-size: .78rem; color: #8892A8; }

/* ---------- Aviso (link copiado) ---------- */
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 10; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  padding: .7rem 1.1rem; border-radius: 999px; background: #F8FAFC; color: #0B1220; font-weight: 600; font-size: .92rem; box-shadow: 0 16px 40px -10px rgba(0,0,0,.6); transition: opacity .25s, transform .3s var(--ease); white-space: nowrap; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Entrada ---------- */
.rise { animation: subir .7s var(--ease) both; }
.rise--1 { animation-delay: .08s; } .rise--2 { animation-delay: .16s; } .rise--3 { animation-delay: .24s; } .rise--4 { animation-delay: .32s; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Telas ---------- */
@media (max-width: 22em) {
  .page { width: calc(100% - 1.5rem); }
  .card__body { gap: .75rem; padding-right: .8rem; }
  .card__icon { width: 40px; height: 40px; border-radius: 12px; }
  .card__title { font-size: .98rem; }
  .card__sub { font-size: .82rem; }
  .profile__name { font-size: 1.35rem; }
  .fan { height: 92px; }
}
@media (min-width: 40em) {
  .page { padding-top: 5rem; gap: 2rem; }
  .profile__name { font-size: 1.8rem; }
  .fan { height: 130px; }
}
/* telas mais baixas (a maioria dos iPhones com o navegador do Instagram): os 3 links cabem sem rolar */
@media (max-height: 46em) and (orientation: portrait) {
  .page { padding-top: calc(1.25rem + env(safe-area-inset-top)); gap: 1.1rem; }
  .share { top: calc(.6rem + env(safe-area-inset-top)); }
  .profile__mark { width: 72px; height: 72px; margin-bottom: .3rem; }
  .profile__mark img { width: 44px; height: 44px; }
  .profile__name { font-size: 1.4rem; }
  .fan { height: 80px; }
  .fan__card { width: 40%; bottom: -30px; }
}
/* celular deitado: menos espaço no topo */
@media (orientation: landscape) and (max-height: 32em) {
  .page { padding-top: 1.5rem; }
  .profile__mark { width: 76px; height: 76px; }
  .profile__mark img { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}