/* Página de links — layout de 566px no computador, tela cheia no celular (até 767px). */

@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin-ext.woff2) format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/inter-latin.woff2) format("woff2-variations");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--icon:40px;--gradient-card:linear-gradient(180deg,#23062300 0%,#060d1299 128.76%)}
@media (max-width:767px){:root{--icon:calc((100vw - 4vw) / 9)}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-family:"Inter Variable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji",sans-serif;overflow-y:scroll;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{background:#fff}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
input,button{font:inherit;color:inherit;background:transparent}

/* fundo desfocado (só no computador) */
.bg{position:fixed;top:0;width:100vw;height:100%;filter:blur(50px);z-index:-2;pointer-events:none}
.bg img{position:absolute;inset:0;width:100%;height:100%}

/* folha central */
.sheet{display:flex;flex-direction:column;width:100%;max-width:566px;margin:34px auto 0;padding-bottom:1px;border-radius:30px;box-shadow:0 1px 10px 2px rgba(0,0,0,.5)}

/* foto do topo (fica parada enquanto o conteúdo sobe por cima) */
.photo-wrap{position:sticky;top:0;left:0;margin-bottom:26px}
.photo{position:relative;width:566px;max-width:100%;height:546px;margin:0 auto;border-radius:30px 30px 0 0;overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.content{position:relative;top:-165px;margin-bottom:-165px;flex:1 1 0%;display:flex;flex-direction:column}

/* nome, @ e ícones, com o degradê sobre a foto */
.head{position:relative;width:100%;max-width:100%}
.head::after{content:"";position:absolute;right:0;bottom:0;width:100%;height:clamp(180px,32vw,260px);background:linear-gradient(180deg,#05000000 12%,#00000061 46%,#000000e0 76%,#000 100%)}
.name-row{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;text-align:center}
.name-wrap{position:relative;display:flex;justify-content:center;align-items:center;max-width:100%}
.name{display:inline-block;font-size:32px;font-weight:750;line-height:40px;letter-spacing:.25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.badge{position:absolute;left:100%;top:50%;width:21px;height:21px;margin:-10.5px 0 0 3px}
.user{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding-bottom:8px;font-size:14px;font-weight:500;line-height:15px;color:#ffffff80}
.socials-wrap{position:relative;display:grid;place-items:center;margin:auto;overflow-x:clip}
.socials{position:relative;z-index:2;display:flex;justify-content:center;width:calc(var(--icon) * var(--count,6));padding:2px 0 11px 2px}
.social{display:flex;flex-shrink:0;width:var(--icon);height:var(--icon);padding:1px}
.social > a,.social > span{display:block;width:100%;height:100%;border-radius:25px;overflow:hidden}
.social img{width:100%;height:100%;object-fit:cover}

/* parte preta de baixo */
.body{position:relative;z-index:2;display:flex;flex-wrap:wrap;background:#000}
.followers-row{display:flex;flex-direction:column;align-items:center;width:100%;padding:8px 14px 0}
.followers{display:flex;align-items:center;margin:-8px 0 11px;font-size:16px;line-height:24px;color:#fff}
.followers strong{font-weight:600;margin-right:4px}
.followers svg{margin-left:6px;transform:rotate(180deg)}
.bio{display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:center;width:calc(100% - 28px);margin:0 auto 11px;padding:8px;border-radius:15px;font-size:14px;line-height:18px;text-align:center;color:#fff}
.bio p{width:calc(100% - 7.47vw);white-space:pre-wrap;overflow-wrap:break-word}

/* cards */
.cards{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:12px;width:calc(100% - 28px);margin:0 14px}
.card{position:relative;display:block;width:100%;margin-bottom:10px;border-radius:12px;overflow:hidden;background:#000}
.card-fill{display:block;height:316px;margin-bottom:10px}
.card::after{content:"";position:absolute;left:0;bottom:-1px;z-index:3;width:100%;height:100%;background:var(--gradient-card)}
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-icon{position:absolute;z-index:9;top:9px;left:7px;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;overflow:hidden}
.card-icon img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.card-title{position:absolute;z-index:4;bottom:5px;width:100%}
.card-title span{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;width:95%;margin:0 auto 1px;font-size:20px;font-weight:600;line-height:1.3;text-align:center;color:#fff}

/* campo "Connect with" */
.connect-wrap{width:100%;padding:0 14px}
.connect{position:relative;display:flex;align-items:center;width:100%;height:50px;margin-bottom:10px;padding:6px 7px;border:1px solid #999;border-radius:50px;background:#fff;color:#1f1a35;box-shadow:0 6px 14px #0d0e361a;overflow:hidden}
.connect-row{display:flex;align-items:center;width:100%;height:48px}
.connect input{flex:none;width:calc(100% - 170px);height:100%;padding:0 8px 0 12px;border:none;background:transparent;font-size:16px;line-height:48px;color:#1f1a35;outline:none}
.connect input::placeholder{color:#9ca3af;opacity:1}
.connect button{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;width:160px;height:40px;border-radius:9999px;background:#999;font-weight:600;overflow:hidden;cursor:default}
.connect button > span{display:flex;justify-content:center;align-items:center;min-width:140px;height:100%;color:#fff}
.connect .avatar{flex-shrink:0;width:32px;height:32px;margin-left:8px;border-radius:9999px;overflow:hidden}
.connect .avatar img{width:100%;height:100%;object-fit:cover}

/* e-mail de contato */
.contact-wrap{width:100%;padding:0 14px}
.contact{width:100%;padding:14px;border-radius:16px;background:#ffffff12;color:#fff;box-shadow:0 6px 14px #0d0e361a}
.contact a{display:flex;align-items:center;width:fit-content;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact svg{flex-shrink:0;width:17px;height:24px;margin-right:9px}
.contact span{font-size:14px;font-weight:600;line-height:18px;overflow:hidden;text-overflow:ellipsis}
.gap{width:100%;height:32px}

/* rodapé */
.foot{height:24px;margin:18px auto 28px;color:#fff;opacity:.6;text-align:center;white-space:nowrap;font-size:16px;line-height:24px}
.foot span{font-size:12px;line-height:24px}
.foot-desk{margin:0 auto}
.foot-mob{display:none}

@media (min-width:768px){
  .body{flex:1 1 0%;border-radius:0 0 30px 30px}
}

@media (max-width:767px){
  .bg{display:none}
  .sheet{max-width:100vw;min-height:100dvh;margin-top:0;box-shadow:none}
  .photo-wrap{margin-bottom:6.933vw}
  .photo{width:100vw;height:100vw;border-radius:0}
  .content{top:-44vw;margin-bottom:-44vw}
  .head::after{width:100vw;height:53.3333vw;bottom:-1px}
  .name-row{margin-bottom:.1rem}
  .socials-wrap{width:100vw}
  .socials{padding-bottom:3.733vw}
  .social{padding:.25vw}
  .social > a,.social > span{border-radius:6.667vw}
  .bio{width:calc(100% - 7.47vw);margin-bottom:2.7vw;border-radius:4vw;font-size:3.733vw;line-height:4.8vw}
  .cards{width:100%;margin:0 auto;padding:0 16px}
  .card{margin-bottom:2.667vw;border-radius:3.2vw}
  .card-fill{height:53.333vw;margin-bottom:2.667vw}
  .card::before{content:"";position:absolute;inset:0;z-index:1;background:var(--gradient-card)}
  .card-icon{top:2.4vw;width:10vw;height:10vw}
  .card-icon img{width:8vw;height:8vw}
  .card-title{bottom:1.35vw}
  .card-title span{min-height:23px;margin-bottom:0;font-size:18px}
  .connect{height:46px;margin-bottom:2.667vw;padding:1.6vw 1.86vw;border-radius:40vw;box-shadow:0 1.6vw 3.733vw #0d0e361a}
  .contact{padding:3.733vw;box-shadow:0 1.6vw 3.733vw #0d0e361a}
  .contact a{width:100%}
  .contact svg{width:4.533vw;height:4.533vw;margin-right:2.4vw}
  .contact span{font-size:3.733vw;line-height:4.8vw}
  .foot-desk{display:none}
  .foot-mob{position:relative;z-index:2;display:flex;flex:1 1 0%;flex-direction:column;justify-content:flex-end;align-items:center;margin-top:auto;background:#000}
}

/* no iPhone o número de seguidores fica um pouco maior, igual ao original */
@media (-webkit-touch-callout:none) and (hover:none) and (pointer:coarse){.followers{font-size:clamp(17px,4.1vw,18px)}}