:root {
  --bg: #0b0e14;
  --card:#121621;
  --text:#eef3ff;
  --muted:#9aa3c2;
  --accent:#4f46e5;
  --accent2:#fbbf24;
  --radius:14px;
}

:root.light {
  --bg:#f3f4f6;
  --card:white;
  --text:#1f2937;
  --muted:#6b7280;
}

*{box-sizing:border-box;font-family:Inter,system-ui}
body{margin:0;background:var(--bg);color:var(--text);transition:.25s}

header{
  display:flex;justify-content:space-between;
  padding:16px;align-items:center;
  background:var(--card);position:sticky;top:0;z-index:10
}
nav a{
  margin-left:12px;text-decoration:none;color:var(--muted);
}
.btn{
  background:var(--accent);border-radius:var(--radius);
  color:white;padding:6px 12px;text-decoration:none;
}
.container{max-width:1100px;margin:auto;padding:16px;}

.profile-pic{
  width:110px;height:110px;border-radius:var(--radius);
  object-fit:cover;border:3px solid rgba(255,255,255,.1)
}
.cover{
  width:100%;border-radius:var(--radius);height:180px;
  background-size:cover;background-position:center;margin-bottom:12px
}
.card{
  background:var(--card);padding:16px;border-radius:var(--radius);
  margin-bottom:16px;
}
.feed-item{
  display:flex;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05)
}
.thumb{width:120px;height:80px;object-fit:cover;border-radius:8px}

	    header {      position: fixed;      top: 0;      left: 0;      right: 0;      background: var(--card);      padding: 12px 24px;      display: flex;      justify-content: space-between;      align-items: center;      z-index: 1000;    }
    header h1 {      margin: 0;      font-size: 18px;      color: var(--accent);    }
    nav a {      margin-left: 16px;      color: var(--muted);      text-decoration: none;      font-weight: 500;    }
        .layout {      display: grid;      grid-template-columns: 220px 1fr 220px;      gap: 18px;      padding: 100px 24px 24px;    }
    aside {      background: var(--card);      padding: 12px;      border-radius: 8px;    }
        .layout {      display: grid;      grid-template-columns: 220px 1fr 220px;      gap: 18px;      padding: 100px 24px 24px;    }
    aside {      background: var(--card);      padding: 12px;      border-radius: 8px;    }
    .perfil {      background: var(--card);      border-radius: 12px;      overflow: hidden;    }
    .portada {      height: 180px;      background: url('https://avatars.githubusercontent.com/u/212662790?v=4') center/cover;      position: relative;    }
    .foto-perfil {      position: absolute;      bottom: -40px;      left: 24px;      width: 80px;      height: 80px;      border-radius: 50%;      border: 4px solid var(--card);      /*background: url('https://i.imgur.com/1X1X1X1.jpg') center/cover;*/      background: url('https://avatars.githubusercontent.com/u/227050307?v=4') center/cover;    }
    .info {      padding: 60px 24px 24px;    }
    .info h2 {      margin: 0;      font-size: 22px;    }
    .info p {      margin: 6px 0;      color: var(--muted);    }
    .datos {      margin-top: 12px;      display: grid;      grid-template-columns: 1fr 1fr;      gap: 12px;    }
    .dato {      background: rgba(255,255,255,0.03);      padding: 10px;      border-radius: 8px;      font-size: 14px;    }
      a {  color:white;      }
	  
    @media (max-width: 768px) {
      .layout {        grid-template-columns: 1fr;      }
      .datos {        grid-template-columns: 1fr;      }
    /*  aside {        display: none;      } */
		 aside {        display: ; grid-template-columns: ;      } */
    }