/* ==========================================================
   Lucas Mairink | @tufazmairink  -  link in bio
   ========================================================== */

/* ==========================================================
   IDENTIDADE VISUAL MAIRINK - tokens compartilhados (v1)
   Bloco IDENTICO em lucas-mairink-bio e mairink-ofertas.
   Alterar cor da marca = alterar aqui nos dois repos.
   ========================================================== */
:root{
  /* --- marca --- */
  --brand-700: #B8123A;   /* pressed / gradiente profundo */
  --brand-600: #E11D48;   /* rosa em texto e icone sobre fundo claro (AA) */
  --brand-500: #FF3D68;   /* rosa em superficie e gradiente */
  --accent-500:#FF8A3D;   /* laranja unico */

  --grad:      linear-gradient(120deg, var(--brand-500) 0%, var(--accent-500) 100%);
  --grad-deep: linear-gradient(140deg, var(--brand-700) 0%, var(--brand-500) 100%);
  --grad-ink:  #12060A;   /* texto sobre o gradiente */

  /* --- neutros escuros (footer, CTA final, marquee) --- */
  --dark-900: #0B0D12;
  --dark-800: #12151C;

  /* --- canais: cor oficial da plataforma, mantida de proposito --- */
  --wa:      #25D366;
  --wa-ink:  #04321A;
  --wa-dark: #128C7E;
  --tg:      #229ED9;

  /* --- foco (a11y) igual nos dois sites --- */
  --focus: var(--brand-500);
}

/* aliases locais -> tokens da marca */
:root{
  --bg:        var(--dark-900);
  --bg-2:      var(--dark-800);
  --surface:   rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --stroke:    rgba(255,255,255,.09);
  --stroke-2:  rgba(255,255,255,.16);

  --ink:       #F5F6F8;
  --ink-2:     #A8AEBB;
  --ink-3:     #6D7484;

  --a1:        var(--brand-500);
  --a2:        var(--accent-500);

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;

  --shadow: 0 18px 44px -18px rgba(0,0,0,.85);
  --max: 620px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- fundo ---------- */
.aurora{
  position:fixed; inset:-20% -20% auto -20%; height:75vh; z-index:0;
  background:
    radial-gradient(46% 52% at 22% 8%,  rgba(255,61,104,.30), transparent 62%),
    radial-gradient(44% 48% at 82% 2%,  rgba(255,138,61,.24), transparent 60%),
    radial-gradient(60% 60% at 50% 42%, rgba(255,61,104,.12), transparent 70%);
  filter:blur(18px);
  pointer-events:none;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.28;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode:overlay;
}

/* ---------- shell ---------- */
.shell{
  position:relative; z-index:2;
  width:100%; max-width:var(--max);
  margin:0 auto;
  padding:clamp(28px,7vw,56px) clamp(18px,5vw,24px) 48px;
}

/* ---------- hero ---------- */
.hero{ text-align:center; }

.avatar-wrap{
  position:relative; width:124px; height:124px; margin:0 auto 20px;
}
.avatar{
  width:124px; height:124px; border-radius:50%;
  object-fit:cover; position:relative; z-index:2;
  border:3px solid var(--bg);
}
.avatar-ring{
  position:absolute; inset:-5px; border-radius:50%;
  background:var(--grad); z-index:1;
  filter:blur(.4px);
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.name{
  font-family:'Sora',sans-serif;
  font-size:clamp(1.9rem,7vw,2.5rem);
  font-weight:800; letter-spacing:-.03em;
  margin:0 0 6px; line-height:1.1;
}

.handle{
  display:inline-block;
  font-weight:600; font-size:.95rem;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.role{
  margin:12px 0 0; color:var(--ink-2);
  font-size:.92rem; font-weight:500;
}

.tagline{
  margin:16px auto 0; max-width:440px;
  color:var(--ink-2); font-size:1rem;
}
.tagline strong{ color:var(--ink); font-weight:600; }

.chips{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px; padding:0; margin:20px 0 0;
}
.chips li{
  font-size:.76rem; font-weight:600; letter-spacing:.02em;
  padding:6px 12px; border-radius:999px;
  background:var(--surface); border:1px solid var(--stroke);
  color:var(--ink-2);
}

.local{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:18px 0 0; font-size:.82rem; color:var(--ink-3);
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--wa);
  box-shadow:0 0 0 0 rgba(37,211,102,.65);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ---------- botoes ---------- */
.cta-block{ display:grid; gap:12px; margin-top:32px; }

.btn{
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 20px; border-radius:var(--r);
  font-family:'Sora',sans-serif; font-weight:700; font-size:1rem;
  letter-spacing:-.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change:transform;
}
.btn:active{ transform:scale(.985); }

.btn-primary{
  background:var(--grad); color:var(--grad-ink);
  box-shadow:0 14px 34px -14px rgba(255,61,104,.7);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(255,61,104,.8); }

.btn-ghost{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--stroke-2);
}
.btn-ghost:hover{ background:var(--surface-2); transform:translateY(-2px); }

.btn-wide{ width:100%; }

.btn .ico{ width:21px; height:21px; flex:none; }

.btn-sub{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-family:'Inter',sans-serif; font-size:.68rem; font-weight:500;
  opacity:.65; letter-spacing:0;
}
@media (max-width:560px){ .btn-sub{ display:none; } }

/* ---------- secoes ---------- */
.sec-title{
  font-family:'Sora',sans-serif;
  font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--ink-3);
  margin:0 0 16px;
}
.sec-sub{ margin:-8px 0 20px; color:var(--ink-2); font-size:.95rem; }
.hl{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; font-weight:700;
}

.links{ margin-top:44px; display:grid; gap:10px; }

.link-card{
  display:flex; align-items:center; gap:14px;
  padding:15px 16px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--stroke);
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.link-card:hover{
  background:var(--surface-2); border-color:var(--stroke-2);
  transform:translateX(3px);
}
.lc-emoji{
  width:42px; height:42px; flex:none; border-radius:12px;
  display:grid; place-items:center; font-size:1.15rem;
  background:rgba(255,255,255,.05); border:1px solid var(--stroke);
}
.lc-text{ display:flex; flex-direction:column; min-width:0; }
.lc-text strong{
  font-family:'Sora',sans-serif; font-size:.97rem; font-weight:600;
  letter-spacing:-.01em;
}
.lc-text small{ color:var(--ink-3); font-size:.79rem; }
.lc-arrow{ margin-left:auto; color:var(--ink-3); font-size:1.05rem; }

/* ---------- servicos ---------- */
.services{ margin-top:52px; }

.grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.card{
  padding:20px 18px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--stroke);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.card:hover{
  transform:translateY(-3px); border-color:var(--stroke-2);
  background:var(--surface-2);
}
.card-ico{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:11px; font-size:1.1rem;
  background:var(--grad); margin-bottom:13px;
}
.card h3{
  font-family:'Sora',sans-serif; font-size:1rem; font-weight:700;
  letter-spacing:-.015em; margin:0 0 6px;
}
.card p{ margin:0; color:var(--ink-2); font-size:.87rem; line-height:1.55; }

/* ---------- sobre ---------- */
.about{ margin-top:52px; }
.about-box{
  padding:24px 22px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--stroke);
}
.about-box p{ margin:0 0 14px; color:var(--ink-2); font-size:.94rem; }
.about-move{ color:var(--ink) !important; margin-top:20px !important; }
.bullets{ margin:0 0 14px; padding-left:18px; color:var(--ink-2); font-size:.94rem; }
.bullets li{ margin-bottom:7px; }
.bullets li::marker{ color:var(--a1); }
.about-close{ margin-bottom:0 !important; }

/* ---------- cta final ---------- */
.final{
  margin-top:52px; text-align:center;
  padding:34px 22px; border-radius:var(--r-lg);
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255,61,104,.16), transparent 62%),
    var(--bg-2);
  border:1px solid var(--stroke);
}
.final h2{
  font-family:'Sora',sans-serif; font-size:1.45rem; font-weight:800;
  letter-spacing:-.03em; margin:0 0 8px;
}
.final p{ margin:0 0 22px; color:var(--ink-2); font-size:.94rem; }

/* ---------- footer ---------- */
.foot{ margin-top:48px; text-align:center; }
.socials{ display:flex; justify-content:center; gap:10px; margin-bottom:20px; }
.socials a{
  width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--stroke);
  color:var(--ink-2);
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}
.socials a:hover{ color:var(--ink); border-color:var(--stroke-2); transform:translateY(-2px); }
.socials svg{ width:19px; height:19px; }

.sig{
  font-family:'Sora',sans-serif; font-weight:800; font-size:1rem;
  letter-spacing:-.02em; margin:0 0 6px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.copy{ margin:0; font-size:.75rem; color:var(--ink-3); }

/* ---------- reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:8px;
}