:root{
  --white:#fff;
  --text:#f5f5f5;
  --muted:#d8d8d8;
  --glass: rgba(0,0,0,.35);
  --stroke: rgba(255,255,255,.35);
  --btn:#ffffff;
  --btnText:#111;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:#0a0a0a; color:var(--text);
}

.hero{position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center;}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.7);
}
.overlay{
  position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.7) 100%);
}

.profile{
  position:relative; z-index:2; width:min(1100px, 92vw);
  display:grid; grid-template-columns: 80px 1fr auto; gap:20px; align-items:center;
  padding-top:40px;
}
.avatar{
  width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid var(--stroke);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.info h1{margin:0; font-weight:700; letter-spacing:.2px;}
.info .site{color:var(--muted); text-decoration:none}
.info .site:hover{text-decoration:underline}

.actions{display:flex; gap:12px; flex-wrap:wrap; justify-self:end}
.btn{
  padding:10px 18px; border-radius:12px; border:1.5px solid var(--stroke);
  background:transparent; color:var(--white); font-weight:600; cursor:pointer;
  backdrop-filter: blur(8px);
}
.btn.outline:hover{background:var(--glass)}

.gallery{
  position:relative; z-index:2; margin:28px auto 60px; width:min(1100px, 92vw);
  display:grid; gap:12px;
  grid-template-columns: repeat(3, 1fr);
}
.gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Responsivo */
@media (max-width: 900px){
  .profile{grid-template-columns:64px 1fr; gap:14px}
  .actions{grid-column:1 / -1; justify-self:start}
}
@media (max-width: 640px){
  .gallery{grid-template-columns: repeat(2, 1fr);}
}