/* ==========================================================
   Vitor Santos | Link da bio
   style.css  (todos os estilos da página)
   ========================================================== */

@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(assets/fonts/poppins-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-latin-700-normal.woff2) format('woff2')}
:root{
  --lime:#D6FF01;
  --black:#000;
  --white:#fff;
  --red:#FF0000;
  --ease:cubic-bezier(.2,.8,.2,1);
  --col:480px;
  --u:calc(min(100vw,var(--col)) / 100);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--black);
  color:var(--white);
  min-height:100vh;min-height:100svh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
button{font:inherit}
svg{display:block}

/* ============ COLUNA CENTRAL ============ */
.page{
  position:relative;z-index:1;
  width:100%;max-width:var(--col);
  margin-inline:auto;
  background:var(--black);
  overflow:hidden;
  isolation:isolate;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:58px 20px 0;
  text-align:center;
  height:393px;
  background:
    radial-gradient(ellipse 85% 70% at 50% 0%,rgba(110,140,0,.75) 0%,rgba(60,78,0,.45) 45%,transparent 80%),
    #000;
}
.hero .rays{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .rays i{
  position:absolute;top:-20%;width:90px;height:140%;
  background:linear-gradient(180deg,rgba(214,255,1,.22),transparent 70%);
  transform:rotate(18deg);filter:blur(14px);opacity:.35;
  animation:ray 7s ease-in-out infinite alternate;
}
.hero .rays i:nth-child(1){left:-4%}
.hero .rays i:nth-child(2){left:30%;animation-delay:-2s;width:60px}
.hero .rays i:nth-child(3){left:62%;animation-delay:-4s}
.hero .rays i:nth-child(4){left:90%;animation-delay:-1s;width:70px}
@keyframes ray{from{opacity:.12;transform:rotate(18deg) translateX(-14px)}to{opacity:.5;transform:rotate(18deg) translateX(18px)}}
.hero .mesh{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 85%);
}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.avatar{position:relative;width:132px;height:132px;margin:0 auto;animation:float 6s ease-in-out infinite}
.avatar>img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar .halo{position:absolute;inset:0;border-radius:50%;animation:halo 3.2s ease-out infinite}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(214,255,1,.5)}100%{box-shadow:0 0 0 24px rgba(214,255,1,0)}}
.name{
  margin-top:8px;
  font-weight:700;
  font-size:clamp(38px,10.4vw,50px);
  line-height:1.05;letter-spacing:-.02em;
}
.handle{
  margin-top:-.22em;line-height:1.2;font-weight:300;
  font-size:clamp(18px,4.8vw,23px);
  color:rgba(255,255,255,.88);
  letter-spacing:.01em;
}
.socials{display:flex;justify-content:center;gap:8px;margin-top:44px}
.socials a{
  width:30px;height:30px;border-radius:8px;
  background:var(--lime);color:#000;
  display:grid;place-items:center;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
}
.socials a svg{width:18px;height:18px}
.socials a:hover,.socials a:focus-visible{transform:translateY(-4px) scale(1.12) rotate(-4deg);background:#fff;box-shadow:0 10px 22px rgba(214,255,1,.28)}

/* ---------- SHEET BRANCA ---------- */
.sheet{
  position:relative;
  background:#fff;
  border-radius:0 0 50px 50px;
  padding:0 clamp(16px,calc((100% - 420px)/2),30px) 52px;
  z-index:2;
}
.notch{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*20.625);pointer-events:none}
.notch svg{display:block;width:100%;height:100%}
.sheet-title{position:relative;z-index:1;height:calc(var(--u)*20.625);color:#fff;text-align:center}
.sheet-title h2{position:absolute;left:0;right:0;top:calc(var(--u)*1.162);font-size:calc(var(--u)*4.908);line-height:1.625;font-weight:700;letter-spacing:0;white-space:nowrap}
.sheet-title .chev{position:absolute;left:50%;top:calc(var(--u)*11.278);width:calc(var(--u)*5.047);height:calc(var(--u)*3.197);overflow:visible;transform:translateX(-50%);animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.75}50%{transform:translate(-50%,calc(var(--u)*1.6));opacity:1}}

.links{display:flex;flex-direction:column;align-items:stretch;gap:0}

/* ---------- CTA "Explore minhas soluções" (valores do Figma) ---------- */
.cta{
  --c:214,255,1;--u1:.2;--u2:.48;
  position:relative;isolation:isolate;
  margin:calc(var(--u)*6.04) auto 0;
  width:100%;min-height:82.86px;
  border-radius:15.49px;
  padding:10px 20px 10px 35px;
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(97.4deg,rgba(var(--c),.9) 4%,rgba(var(--c),.2) 100%),linear-gradient(180deg,rgba(var(--c),var(--u1)) 0%,rgba(var(--c),var(--u2)) 75%),#fff;
  color:#000;
  overflow:hidden;
  box-shadow:0 2.14px 1.71px rgba(var(--c),.096),0 5.15px 4.12px rgba(var(--c),.137),0 9.7px 7.76px rgba(var(--c),.17),0 17.3px 13.84px rgba(var(--c),.203);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.cta .go{flex:none;width:43.73px;height:43.73px;transition:transform .45s var(--ease)}
.cta .go svg{width:100%;height:100%;overflow:visible}
.cta .go .arw{transition:transform .45s var(--ease)}
.cta strong{display:block;font-size:13.85px;font-weight:700;line-height:21px;letter-spacing:0}
.cta small{display:block;margin-top:1.5px;font-size:8.3px;line-height:9px;font-weight:400;color:#000}
.cta::after,.btn::after,.yt::after,.hs::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.cta::after{animation:sweep 4.2s ease-in-out infinite 1.2s}
@keyframes sweep{0%{left:-70%}45%,100%{left:130%}}
.cta:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 2.14px 1.71px rgba(var(--c),.12),0 5.15px 4.12px rgba(var(--c),.17),0 9.7px 7.76px rgba(var(--c),.22),0 17.3px 13.84px rgba(var(--c),.26),0 28px 30px rgba(var(--c),.25)}
.cta:hover .go{transform:rotate(-8deg) scale(1.06)}
.cta:hover .go .arw{transform:translateX(2.5px)}
/* borda em degradê (igual ao stroke do Figma) */
.cta::before,.yt::before,.hs::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.55px;pointer-events:none;z-index:1;
  background:linear-gradient(202deg,var(--b1) 48%,var(--b2) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.cta{--b1:#D6FF01;--b2:rgba(214,255,1,0)}

/* ---------- CARDS GRANDES ---------- */
.cards{display:flex;flex-direction:column;gap:14px;margin-top:38px;scroll-margin-top:20px}
.card{
  position:relative;
  display:grid;grid-template-columns:1fr 42.5%;
  min-height:176px;
  border-radius:16px;overflow:hidden;
  background:#000;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  transform-style:preserve-3d;
  transition:box-shadow .4s var(--ease),transform .5s var(--ease);
  --rx:0deg;--ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
}
.card:hover{box-shadow:0 22px 44px rgba(0,0,0,.34)}
.card .txt{position:relative;z-index:2;padding:18px 6px 18px 20px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:9px}
.card .brand{display:flex;align-items:center;gap:7px;height:20px;margin-bottom:4px}
.card .brand .mini{width:20px;height:20px;border-radius:50%;overflow:hidden;background:#222;flex:none;display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--lime)}
.card .brand .mini img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.card .brand .who{font-size:8px;line-height:1.15;font-weight:600}
.card .brand .who span{display:block;font-weight:300;opacity:.7;font-size:7px}
.card h3{font-size:clamp(14.5px,3.95vw,17px);font-weight:300;line-height:1.12;letter-spacing:-.01em}
.card h3 b{font-weight:700;display:block}
.card p{font-size:10.5px;line-height:1.4;font-weight:300;color:rgba(255,255,255,.82);max-width:100%}
.card .media{position:relative;overflow:hidden}
.card .media img.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.btn{
  position:relative;overflow:hidden;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 9px 6px 11px;border-radius:5px;
  font-size:8px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;line-height:1.25;max-width:100%;
  transition:transform .35s var(--ease),filter .3s;
}
.btn::after{animation:none}
.btn:hover::after{animation:sweep .9s ease}
.btn i{flex:none;width:1px;align-self:stretch;min-height:11px;background:currentColor;opacity:.4}
.btn svg{flex:none;width:11px;height:11px;transition:transform .35s var(--ease)}
.card:hover .btn{transform:translateY(-2px)}
.card:hover .btn svg{transform:translate(2px,-2px)}

/* WhatsApp */
.c-wa .media{background:#161616}

.c-wa .media img.fill{transform:scale(1.04);transition:transform .8s var(--ease)}
.c-wa:hover .media img.fill{transform:scale(1.12)}
.c-wa .btn{background:#fff;color:#000}

/* Prosper */
.c-pr .media{background:var(--lime)}
.card .wordmark{height:26px;width:auto;margin-bottom:6px;align-self:flex-start}
.c-pr .btn{background:var(--lime);color:#000}

/* Futures */
.c-fu .media{background:radial-gradient(circle at 70% 40%,#c00 0%,#5a0000 45%,#120000 80%)}
.c-fu .wordmark{height:22px}
.c-wa h3 b{display:inline}
.card .media img.fill{transition:transform .8s var(--ease)}
.c-pr:hover .media img.fill,.c-fu:hover .media img.fill{transform:scale(1.07)}
.c-fu .btn{background:var(--red);color:#fff}

/* ---------- BOTÕES YOUTUBE / HOSTINGER ---------- */
.mini-links{display:flex;flex-direction:column;gap:30px;margin-top:38px}
.yt,.hs{
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;margin-inline:auto;
  display:flex;align-items:center;gap:25.6px;
  padding:10px 20px 10px 28px;min-height:83.4px;border-radius:15.59px;
  color:#fff;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.yt{
  --c:255,69,70;--u1:.25;--u2:.6;--b1:#FF7473;--b2:rgba(255,161,160,0);
  background:linear-gradient(97.4deg,rgba(var(--c),.9) 4%,rgba(var(--c),.2) 100%),linear-gradient(180deg,rgba(var(--c),var(--u1)) 0%,rgba(var(--c),var(--u2)) 75%),#fff;
  box-shadow:0 2.16px 1.73px rgba(var(--c),.096),0 5.18px 4.15px rgba(var(--c),.137),0 9.76px 7.81px rgba(var(--c),.17),0 17.41px 13.93px rgba(var(--c),.203),0 32.57px 26.05px rgba(var(--c),.244);
}
.hs{
  --c:103,61,230;--u1:.25;--u2:.6;--b1:#673DE6;--b2:rgba(103,61,230,0);
  background:linear-gradient(97.4deg,rgba(var(--c),.9) 4%,rgba(var(--c),.2) 100%),linear-gradient(180deg,rgba(var(--c),var(--u1)) 0%,rgba(var(--c),var(--u2)) 75%),#fff;
  box-shadow:0 2.16px 1.73px rgba(153,119,255,.096),0 5.18px 4.15px rgba(153,119,255,.137),0 9.76px 7.81px rgba(153,119,255,.17),0 17.41px 13.93px rgba(103,61,230,.203),0 32.57px 26.05px rgba(103,61,230,.244);
}
.yt::after,.hs::after{animation:none}
.yt:hover::after,.hs:hover::after{animation:sweep 1s ease}
.yt:hover,.hs:hover{transform:translateY(-5px) scale(1.02)}
.yt .ico,.hs .ico{flex:none;width:57px;display:grid;place-items:center;transition:transform .45s var(--ease)}
.yt:hover .ico{transform:scale(1.12) rotate(-4deg)}
.hs:hover .ico{transform:scale(1.12) rotate(4deg)}
.yt strong,.hs strong{display:block;font-size:13.9px;font-weight:700;line-height:21px}
.yt small,.hs small{display:block;margin-top:1.5px;font-size:11.2px;line-height:16px;font-weight:400}

/* ---------- RODAPÉ ---------- */
.foot{
  padding:30px 28px calc(34px + env(safe-area-inset-bottom));
  text-align:center;font-size:11px;font-weight:300;line-height:1.5;
  color:rgba(255,255,255,.92);
}

/* ============ ENTRADA EM CASCATA ============ */
.rise{opacity:0;transform:translateY(26px) scale(.98);filter:blur(6px)}
.ready .rise{animation:rise .9s var(--ease) forwards;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.reveal{opacity:0;transform:translateY(34px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.card.reveal.in{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.card.reveal{transform:translateY(34px)}

/* ============ DESKTOP ============ */
/* ---------- Tablet: fundo de ponta a ponta, conteúdo em coluna de 420px ---------- */
@media (min-width:600px){
  :root{--u:4.8px}
  .page{max-width:none}
  .hero{height:auto;padding:64px 24px 72px}
  .notch{left:50%;right:auto;width:calc(var(--u)*100);transform:translateX(-50%)}
  .sheet{padding:0 max(24px,calc((100% - 420px) / 2)) 56px;border-radius:0 0 56px 56px}
}

/* ---------- Computador e MacBook: tudo ampliado, cards em grade ---------- */
@media (min-width:1024px){
  :root{--u:6.24px}
  .hero{padding:80px 40px 92px}
  .avatar{width:170px;height:170px}
  .name{font-size:64px;margin-top:12px}
  .handle{font-size:29px}
  .socials{margin-top:52px;gap:12px}
  .socials a{width:40px;height:40px;border-radius:11px}
  .socials a svg{width:23px;height:23px}
  .sheet{padding:0 max(40px,calc((100% - 980px) / 2)) 80px;border-radius:0 0 72px 72px}
  .links{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:24px;align-items:stretch}
  .cta{grid-column:1 / -1;width:min(100%,546px);min-height:104px;padding:14px 26px 14px 44px;gap:14px;border-radius:20px;margin-bottom:26px}
  .cta .go{width:56px;height:56px}
  .cta strong{font-size:18px;line-height:26px}
  .cta small{font-size:11px;line-height:13px}
  .cards{display:contents}
  .card{min-height:228px;border-radius:20px}
  .card .txt{padding:22px 10px 22px 26px}
  .card h3{font-size:21px}
  .card p{font-size:12.5px}
  .card .btn{font-size:9.5px;padding:8px 11px 8px 13px}
  .card .brand .who{font-size:10px}.card .brand .who span{font-size:8.5px}
  .card .brand .mini{width:24px;height:24px}
  .card .wordmark{height:30px}.c-fu .wordmark{height:26px}
  .mini-links{margin-top:0;justify-content:center;gap:20px}
  .yt,.hs{flex:1;max-height:116px;border-radius:20px;gap:30px;padding-left:34px}
  .yt .ico,.hs .ico{width:68px}
  .yt .ico svg{width:68px;height:48px}.hs .ico svg{width:49px;height:57px}
  .yt strong,.hs strong{font-size:17px;line-height:25px}
  .yt small,.hs small{font-size:13.5px;line-height:19px}
  .foot{font-size:13px;padding-top:40px}
}
@media (max-width:360px){
  .card{grid-template-columns:1fr 40%}
  .card .txt{padding-left:16px}
}

/* ============ MODAL DE SOLUÇÕES ============ */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px 16px;visibility:hidden;pointer-events:none}
.modal.open{visibility:visible;pointer-events:auto}
.modal .scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);opacity:0;transition:opacity .35s var(--ease)}
.modal.open .scrim{opacity:1}
.sheet-m{
  position:relative;width:100%;max-width:540px;max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain;
  background:#0A0A0A;border:1px solid rgba(255,255,255,.08);border-radius:36px;
  padding:28px 32px 32px;color:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);
  opacity:0;transform:translateY(24px) scale(.96);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
  scrollbar-width:none;
}
.sheet-m::-webkit-scrollbar{display:none}
.modal.open .sheet-m{opacity:1;transform:none}
.m-close{
  position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:14px;border:0;cursor:pointer;
  background:#1A1A1A;color:#fff;display:grid;place-items:center;
  transition:background .25s,transform .35s var(--ease);
}
.m-close svg{width:18px;height:18px}
.m-close:hover{background:#262626;transform:rotate(90deg)}
.m-title{margin-top:0;padding-right:56px;font-size:clamp(24px,6.4vw,30px);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.m-sub{margin-top:12px;font-size:14px;line-height:1.5;font-weight:300;color:rgba(255,255,255,.6)}
.m-list{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:10px}
.m-opt{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:10px 12px 10px 10px;border-radius:20px;
  background:#141416;border:1px solid rgba(255,255,255,.07);color:#fff;
  opacity:0;transform:translateY(12px);
  transition:background .25s,border-color .25s,transform .35s var(--ease),opacity .35s var(--ease);
}
.modal.open .m-opt{opacity:1;transform:none;transition-delay:calc(var(--k) * 45ms + 120ms),calc(var(--k) * 45ms + 120ms),0s,0s}
.modal.open .m-opt:hover{transition-delay:0s}
.m-ic{
  flex:none;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:rgba(214,255,1,.08);border:1px solid rgba(214,255,1,.28);color:var(--lime);
  transition:background .25s,transform .35s var(--ease);
}
.m-ic svg{width:22px;height:22px}
.m-name{flex:1;min-width:0;font-size:16px;font-weight:500;line-height:1.3}
.m-go{flex:none;width:52px;height:52px;border-radius:14px;background:#1E1E20;color:#fff;display:grid;place-items:center;transition:background .25s,color .25s,transform .35s var(--ease)}
.m-go svg{width:16px;height:16px}
.m-opt:hover,.m-opt:focus-visible{background:#18181B;border-color:rgba(214,255,1,.35);outline:none}
.m-opt:hover .m-ic,.m-opt:focus-visible .m-ic{background:rgba(214,255,1,.16);transform:scale(1.05)}
.m-opt:hover .m-go,.m-opt:focus-visible .m-go{background:var(--lime);color:#000;transform:translate(2px,-2px)}
body.lock{overflow:hidden}
@media (max-width:599px){
  .modal{place-items:end center;padding:0}
  .sheet-m{max-width:none;border-radius:28px 28px 0 0;padding:28px 18px calc(22px + env(safe-area-inset-bottom));max-height:92vh;max-height:92svh;transform:translateY(100%)}
  .m-close{top:18px;right:16px;width:42px;height:42px}
  .m-opt{gap:12px;border-radius:18px}
  .m-ic,.m-go{width:46px;height:46px}
  .m-name{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.m-opt{opacity:1!important;transform:none!important}}

/* ============ TOQUE E DESEMPENHO ============ */
@media (hover:none){
  .cta:hover,.yt:hover,.hs:hover{transform:none}
  .cta:hover .go,.yt:hover .ico,.hs:hover .ico,.card:hover .btn,.card:hover .btn svg,.socials a:hover{transform:none}
  .c-wa:hover .media img.fill{transform:scale(1.04)}
  .c-pr:hover .media img.fill,.c-fu:hover .media img.fill{transform:none}
  .socials a:hover{background:var(--lime);box-shadow:none}
  .cta:active,.yt:active,.hs:active,.card:active{transform:scale(.98)}
}

/* ============ ACESSIBILIDADE ============ */
a:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.sheet a:focus-visible{outline-color:#000}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.reveal{opacity:1!important;transform:none!important;filter:none!important}
}