/* --- Variables (puedes convertir a SCSS fácilmente) --- * /
$bg: #0f172a; $card:#0b1220; $accent:#3b82f6; $muted:#94a3b8; $glass: rgba(255,255,255,0.04)
/*
*/
:root {
  --bg: #161c25;
  --card:#121621;
  --muted:#9aa3c2;
  --accent:#fdfdff;
  --text:white;
  --accent2:#f7daea;
  --radius:14px;
}

:root.light {
  --bg:#f3f4f6;
  --card:white;
  --text:rgb(((163, 180, 204), 180, 209), 165, 184);
  --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);*/ color:white;
}
.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:150px;
	height:150px;
	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: white;    }


    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;    }

    
    .perfil {      background: var(--card);  
			 border-radius: 12px;      overflow: hidden;    }


    .portada {      height: 180px;      
			  background: url('img/studio-rgb-pixel-heart.jpg') center/cover;
			  /*
			  //  background: url('https://avatars.githubusercontent.com/u/212662790?v=4') center/cover; 
			  */
			  position: relative;    }


    .foto-perfil {      position: absolute;      bottom: -40px;      left: 24px;  
				  width: 120px;      height: 120px;      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;      }
    /*  aside {        display: none;      } */
      .datos {        grid-template-columns: 1fr;      }
    }