/* HERO */

.nav-links{
display:flex;
gap:30px;
list-style:none;
}

/* HERO */

/* HERO */

.blog-hero{
position:relative;
background:linear-gradient(135deg,#b7a6af,#c1acac);
padding:180px 20px 150px;
text-align:center;
color:rgb(232, 232, 232);
overflow:hidden;
}

/* FORMAS DECORATIVAS */

.blog-hero::before{
content:"";
position:absolute;
width:500px;
height:500px;
background:rgba(255,255,255,0.06);
border-radius:50%;
top:-200px;
right:-150px;
}

.blog-hero::after{
content:"";
position:absolute;
width:400px;
height:400px;
background:rgba(255,255,255,0.04);
border-radius:50%;
bottom:-200px;
left:-120px;
}

.hero-content{
max-width:900px;
margin:auto;
position:relative;
animation:heroFade 1.2s ease;
}

.blog-hero h1{
font-family:'Playfair Display',serif;
font-size:60px;
line-height:1.2;
margin-bottom:25px;
letter-spacing:-1px;
}

.blog-hero p{
font-family:'Inter',sans-serif;
font-size:19px;
max-width:650px;
margin:auto;
opacity:0.9;
line-height:1.7;
}

/* ANIMACION */

@keyframes heroFade{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ARTICLE */

.article-container{
padding:90px 20px;
max-width:1100px;
margin:auto;
}

.article-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.article-text{
font-size:17px;
line-height:1.8;
color:#45525c;
}

.article-text h2{
font-size:30px;
margin:20px 0;
color:#3d5f78;
}

.intro{
font-size:19px;
margin-bottom:20px;
}


.article-image img{
width:100%;
border-radius:14px;
box-shadow:0 20px 40px rgba(0,0,0,0.1);
}


/* BENEFICIOS */

.benefits-section{
background:#f7f9fc;
padding:100px 20px;
}

.benefits-section h2{
text-align:center;
font-size:36px;
margin-bottom:60px;
color:#3d5f78;
}


.benefits-grid{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}


.benefit-card{
background:white;
padding:40px 30px;
border-radius:14px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:0.3s;
}

.benefit-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 35px rgba(0,0,0,0.1);
}

.icon{
font-size:30px;
margin-bottom:12px;
}

.benefit-card h3{
margin-bottom:10px;
color:#3d5f78;
}


/* ANIMACION */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* RESPONSIVE */

@media (max-width:900px){

.article-grid{
grid-template-columns:1fr;
}

.benefits-grid{
grid-template-columns:repeat(2,1fr);
}

}


@media (max-width:600px){

.blog-hero h1{
font-size:34px;
}

.benefits-grid{
grid-template-columns:1fr;
}

}

@media (max-width:900px){

.blog-hero{
padding:140px 20px 110px;
}

.blog-hero h1{
font-size:40px;
}

.blog-hero p{
font-size:16px;
}

}

@media (max-width:500px){

.blog-hero h1{
font-size:32px;
}

}