:root{
--primary:#0f172a;
--accent:#2563eb;
--accent-soft:#3b82f6;
--bg:#f5f7fb;
--card:#ffffff;
--text:#1e293b;
--muted:#64748b;
}

/* RESET */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:'Montserrat',sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}


/* HEADER */

.top-bar{
background:var(--primary);
color:white;
padding:2.5rem 1rem;
text-align:center;
}

.top-bar h1{
font-size:2.5rem;
font-weight:900;
letter-spacing:1px;
margin-bottom:0.5rem;
}

.subtitle{
font-size:0.9rem;
color:#cbd5f5;
}


/* NAV */

.main-nav{
display:flex;
justify-content:center;
gap:2rem;
background:white;
padding:1rem;
box-shadow:0 2px 10px rgba(0,0,0,0.08);
position:sticky;
top:0;
z-index:100;
}

.main-nav a{
text-decoration:none;
font-weight:600;
color:var(--text);
transition:0.2s;
}

.main-nav a:hover{
color:var(--accent);
}


/* LAYOUT */

.container{
max-width:1000px;
margin:auto;
padding:3rem 1.2rem;
display:grid;
gap:2rem;
}


/* PROFILE */

.profile-section{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:2rem;
align-items:center;
}

.profile-text{
background:var(--card);
padding:2rem;
border-radius:10px;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
}

.profile-text h2{
margin-bottom:1rem;
font-size:1.5rem;
color:var(--primary);
}

.profile-text p{
margin-bottom:1rem;
color:var(--muted);
}

.profile-image img{
    max-width:100%;
    max-height:380px;
    border-radius:50%;  /* Cambié de 12px a 50% para hacerlo más redondo */
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.profile-image img{
max-width:100%;
max-height:380px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
}


/* CARDS */

.card{
background:var(--card);
padding:2rem;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.card h2{
margin-bottom:1rem;
color:var(--primary);
font-size:1.4rem;
}

.card p{
color:var(--muted);
margin-bottom:1rem;
}

.card ul{
padding-left:1.2rem;
}

.card li{
margin-bottom:0.4rem;
}


/* CONTACT */

.contact{
background:#f1f5f9;
padding:0.7rem;
margin-bottom:0.5rem;
border-radius:6px;
font-weight:600;
}

.contact.ok{
border-left:4px solid var(--accent);
}


/* FOOTER */

footer{
text-align:center;
margin-top:2rem;
padding:2rem;
font-size:0.8rem;
color:var(--muted);
}


/* RESPONSIVE */

@media (max-width:768px){

.profile-section{
grid-template-columns:1fr;
text-align:center;
}

.profile-image img{
max-height:260px;
}

.main-nav{
flex-wrap:wrap;
gap:1rem;
}

}