/* Feito pela Salll · salll.com.br */
:root{
  --ink:#171513;--paper:#f8f2e8;--orange:#f15a2b;--gold:#f2ad2e;--purple:#7F61A4;--blue:#5E50C1;
  --text-2:#d6ccbf;--muted:#b9afa1;
  --surface:rgba(248,242,232,.045);--surface-hover:rgba(248,242,232,.085);
  --line:rgba(248,242,232,.12);--line-hover:rgba(248,242,232,.26);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--ink);color:var(--paper);font-family:Inter,system-ui,Arial,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.pular{position:absolute;left:-9999px;top:12px;z-index:10;background:var(--paper);color:var(--ink);padding:12px 16px;border-radius:10px;font-weight:600}
.pular:focus{left:12px}

.pagina{position:relative;isolation:isolate;max-width:480px;margin:0 auto;padding:56px 20px 40px}

/* brilho suave atrás da foto (no fluxo, nada fixo) */
.pagina:before{content:"";position:absolute;z-index:-1;left:50%;top:-40px;width:440px;height:360px;max-width:120%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(241,90,43,.30),rgba(127,97,164,.16) 55%,transparent 100%);filter:blur(30px);pointer-events:none}

/* perfil */
.perfil{text-align:center}
.foto{width:152px;height:152px;margin:0 auto 24px;padding:4px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--orange),var(--gold),var(--purple),var(--orange));
  box-shadow:0 18px 50px -12px rgba(241,90,43,.45)}
.recorte{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:4px solid var(--ink);background:#2a2521}
.foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:scale(1.4);transform-origin:50% 12%}
.perfil h1{font-family:Newsreader,Georgia,serif;font-weight:500;font-size:46px;line-height:1;letter-spacing:-.025em;margin:0 0 14px}
.bio{margin:0;font-size:16px;line-height:1.6;color:var(--text-2)}

/* links */
.lista{display:grid;gap:12px;margin-top:40px}
.link{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 16px 14px 14px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(248,242,232,.07);color:var(--gold)}
.ico svg{width:22px;height:22px}
.txt{flex:1;min-width:0;display:block}
.txt b{display:block;font-family:Outfit,system-ui,sans-serif;font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.005em}
.txt span{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--muted)}
.seta{flex:none;width:20px;height:20px;color:var(--muted);transition:transform .25s var(--ease),color .25s var(--ease)}

.link:hover{background:var(--surface-hover);border-color:var(--line-hover);transform:translateY(-2px)}
.link:hover .seta{transform:translate(2px,-2px);color:var(--paper)}

/* destaque único (P1) */
.link.p1{background:var(--orange);border-color:var(--orange);color:var(--ink);box-shadow:0 14px 34px -14px rgba(241,90,43,.7)}
.link.p1 .ico{background:rgba(23,21,19,.12);color:var(--ink)}
.link.p1 .txt span,.link.p1 .seta{color:#2a1a12}
.link.p1:hover{background:#f46a3e;border-color:#f46a3e;box-shadow:0 18px 40px -14px rgba(241,90,43,.85)}
.link.p1:hover .seta{color:var(--ink)}

/* foco visível */
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.link.p1:focus-visible{outline-color:var(--paper)}

/* contato */
.contato{margin-top:44px;text-align:center}
.contato h2{margin:0 0 14px;font-family:"Space Mono",monospace;font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mail{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line);
  font-family:Outfit,system-ui,sans-serif;font-weight:500;font-size:16px;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.mail svg{width:18px;height:18px;color:var(--gold)}
.mail:hover{background:var(--surface-hover);border-color:var(--line-hover)}
.redes{display:flex;justify-content:center;gap:12px;margin-top:14px}
.redes a{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);color:var(--text-2);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.redes svg{width:20px;height:20px}
.redes .ponto{fill:currentColor}
.redes a:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);transform:translateY(-2px)}

/* rodapé */
.rodape{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.rodape a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:96px;border-radius:10px}
.rodape img{display:block;width:78px;height:auto;opacity:.92}
.rodape p{margin:4px 0 0;font-size:12px;color:var(--muted)}

/* entrada suave */
@media (prefers-reduced-motion:no-preference){
  .perfil,.lista li,.contato,.rodape{animation:sobe .6s var(--ease) both}
  .lista li:nth-child(1){animation-delay:.08s}
  .lista li:nth-child(2){animation-delay:.14s}
  .lista li:nth-child(3){animation-delay:.20s}
  .lista li:nth-child(4){animation-delay:.26s}
  .contato{animation-delay:.34s}
  .rodape{animation-delay:.4s}
}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

@media (min-width:600px){
  .pagina{padding-top:80px}
  .perfil h1{font-size:52px}
}