/* tá na bio · design system v2
   Identidade: creme + tinta (linkme.bio) · UX: movimento e interação (beacons.ai)
   Vidro: "liquid glass" no estilo expo-glass-effect / iOS 26 (blur + saturação + refração + brilho que segue o dedo) */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&f[]=clash-display@500,600,700&display=swap');
:root{
 --bg:#faf8f5;--bg2:#f3eee7;--card:#fff;--ink:#150d0b;--ink2:#3d3431;--mut:#7b716c;--line:rgba(21,13,11,.09);
 --yel:#ffc93c;--lime:#d7f25a;--pink:#ff9ad5;--lilac:#b9a6ff;--sky:#8fd3ff;--org:#ff7a45;--grn:#2fbf71;--red:#e5484d;
 --r1:14px;--r2:22px;--r3:32px;--pill:999px;
 --f:'Satoshi',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
 --fd:'Clash Display','Satoshi',ui-sans-serif,system-ui,sans-serif;
 --sh1:0 1px 2px rgba(21,13,11,.05),0 4px 14px rgba(21,13,11,.05);
 --sh2:0 2px 6px rgba(21,13,11,.05),0 18px 50px -12px rgba(21,13,11,.18);
 --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.ds{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.ds a{color:inherit}
.ds h1,.ds h2,.ds h3{font-family:var(--fd);font-weight:600;letter-spacing:-.02em;line-height:1.02;margin:0}
.ds ::selection{background:var(--lime);color:var(--ink)}

/* ---------- vidro líquido ---------- */
.glass{position:relative;isolation:isolate;
 background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
 -webkit-backdrop-filter:blur(18px) saturate(190%);backdrop-filter:blur(18px) saturate(190%);
 border:1px solid rgba(255,255,255,.7);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(21,13,11,.06),inset 0 0 18px rgba(255,255,255,.35),0 10px 30px -10px rgba(21,13,11,.18)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:radial-gradient(160px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.75),transparent 60%);opacity:.75;transition:opacity .3s}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.45),transparent 42%);mix-blend-mode:soft-light}
.glass.dark{background:linear-gradient(135deg,rgba(28,20,18,.62),rgba(28,20,18,.42));border-color:rgba(255,255,255,.14);color:#fff;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 1px rgba(0,0,0,.3),0 12px 34px -10px rgba(0,0,0,.45)}
.glass.dark::before{background:radial-gradient(160px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.18),transparent 60%)}
.lg-refract .glass.refract{-webkit-backdrop-filter:url(#lg-refract) blur(14px) saturate(190%);backdrop-filter:url(#lg-refract) blur(14px) saturate(190%)}

/* ---------- botões ---------- */
.b{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 22px;border-radius:var(--pill);border:0;
 font:700 15px/1 var(--f);text-decoration:none;cursor:pointer;white-space:nowrap;user-select:none;
 transition:transform .45s var(--spring),box-shadow .3s,background .2s,color .2s}
.b:hover{transform:translateY(-2px) scale(1.02)}.b:active{transform:scale(.95);transition-duration:.12s}
.b.ink{background:var(--ink);color:#fff;box-shadow:0 8px 22px -8px rgba(21,13,11,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.b.ink:hover{box-shadow:0 14px 30px -10px rgba(21,13,11,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.b.lime{background:var(--lime);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -8px rgba(120,150,0,.5)}
.b.glass{color:var(--ink)}.b.glass.dark{color:#fff}
.b.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.b.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.b.sm{--h:38px;padding:0 16px;font-size:14px}.b.lg{--h:58px;padding:0 30px;font-size:17px}
.b.ic{width:var(--h);padding:0}
.b .ar{transition:transform .4s var(--spring)}.b:hover .ar{transform:translateX(4px)}

/* ---------- etiquetas inclinadas (linkme) ---------- */
.tag{display:inline-block;padding:6px 14px;border-radius:var(--pill);background:var(--yel);color:var(--ink);font:700 13px/1.2 var(--f);transform:rotate(-4deg);box-shadow:0 4px 12px -4px rgba(21,13,11,.25)}
.tag.lime{background:var(--lime);transform:rotate(3deg)}.tag.pink{background:var(--pink)}.tag.lilac{background:var(--lilac);transform:rotate(2deg)}.tag.sky{background:var(--sky)}
.tag.wob{animation:wob 4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg) translateY(-3px)}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--pill);background:var(--bg2);font:600 12.5px/1.2 var(--f);color:var(--ink2)}
.chip.ok{background:#dcf7e6;color:#126b3c}.chip.warn{background:#fff1c7;color:#7a5600}.chip.off{background:#ffe1e1;color:#9b1c1f}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* ---------- superfícies ---------- */
.card{background:var(--card);border-radius:var(--r3);box-shadow:var(--sh1);border:1px solid var(--line)}
.panel{background:var(--bg2);border-radius:var(--r3)}
.inp,.ds input[type=text],.ds input[type=email],.ds input[type=password],.ds input[type=url],.ds input[type=tel],.ds input[type=number],.ds input:not([type]),.ds select,.ds textarea{
 font:500 15px/1.3 var(--f);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r1);padding:12px 14px;outline:0;transition:border .2s,box-shadow .2s;width:100%}
.ds input:focus,.ds select:focus,.ds textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(215,242,90,.55)}

/* ---------- barra de navegação flutuante ---------- */
.dsnav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 24px));height:64px;border-radius:22px;display:flex;align-items:center;gap:8px;padding:0 10px 0 18px;transition:height .4s var(--ease),top .4s var(--ease),width .5s var(--ease)}
.dsnav.mini{top:8px;height:56px;width:min(980px,calc(100% - 24px))}
.logo{font:700 20px/1 var(--fd);letter-spacing:-.03em;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.logo .lm{width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font:700 15px/1 var(--fd);transform:rotate(-6deg);transition:transform .5s var(--spring)}
.logo:hover .lm{transform:rotate(6deg) scale(1.08)}
.logo b{font-weight:700;background:linear-gradient(90deg,var(--ink),var(--ink));-webkit-background-clip:text}

/* ---------- celular ---------- */
.phone{--w:280px;width:var(--w);aspect-ratio:9/19.3;border-radius:calc(var(--w)*.16);background:#0d0907;padding:calc(var(--w)*.035);box-shadow:0 0 0 1.5px #2b2421,0 40px 80px -30px rgba(21,13,11,.5),inset 0 0 0 2px #3a322e;position:relative;flex:none}
.phone>iframe,.phone>img,.phone>.scr{width:100%;height:100%;border:0;border-radius:calc(var(--w)*.13);background:#fff;display:block;object-fit:cover;overflow:hidden}
.phone::before{content:"";position:absolute;top:calc(var(--w)*.055);left:50%;transform:translateX(-50%);width:30%;height:calc(var(--w)*.075);background:#0d0907;border-radius:99px;z-index:2}
.phone iframe{pointer-events:auto}

/* ---------- movimento ---------- */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-rv="l"]{transform:translateX(-36px)}[data-rv="r"]{transform:translateX(36px)}[data-rv="s"]{transform:scale(.92)}[data-rv="b"]{filter:blur(10px)}
[data-rv].in{opacity:1;transform:none;filter:none}
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.split-w>span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*55ms + var(--d,0s))}
.in .split-w>span,.split-w.in>span{transform:none}
.float{animation:float 6s ease-in-out infinite}.float.d2{animation-delay:-2s}.float.d3{animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}
.marq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq>.tr{display:flex;gap:18px;width:max-content;animation:marq var(--t,40s) linear infinite}
.marq:hover>.tr{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:blob 18s ease-in-out infinite}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-30px,20px) scale(.95)}}
.shine{background:linear-gradient(110deg,var(--ink) 40%,#8a7d77 50%,var(--ink) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:-150% 0}}
.skel{background:linear-gradient(90deg,var(--bg2),#fff,var(--bg2));background-size:200% 100%;animation:skel 1.4s linear infinite;border-radius:var(--r1)}
@keyframes skel{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);opacity:0;z-index:99;padding:12px 18px;border-radius:var(--pill);font-weight:600;transition:all .5s var(--spring)}
.toast.on{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-rv],.split-w>span{opacity:1!important;transform:none!important;filter:none!important}}