/* HERO */

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

/* HERO */

/* HERO */

.blog-hero{
position:relative;
background:linear-gradient(135deg,#eae0d8,#ddcfc6);
color:#0a1929;
padding:180px 20px 150px;
text-align:center;
color:rgb(5, 15, 87);
overflow:hidden;
}

/* FORMAS DECORATIVAS */

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

.blog-hero::after{
content:"";
position:absolute;
width:400px;
height:400px;
background:rgba(103, 48, 14, 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;
}

}

/* ========================= */
/* BLOG / ARTICULO */
/* ========================= */

.blog-text {
  max-width: 560px;
  font-size: 17px;
  line-height: 1.8;
  color: #4a5a67;
}

.blog-text p {
  margin-bottom: 18px;
}

/* ========================= */
/* PALABRAS CLAVE */
/* ========================= */

.highlight {
  font-weight: 600;
  color: #2f4f6a;
}

/* ========================= */
/* FRASE IMPORTANTE */
/* ========================= */

.key-phrase {
  font-weight: 600;
  color: #2f4f6a;
  font-size: 18px;
}

/* ========================= */
/* BLOQUE DESTACADO */
/* ========================= */

.medical-note {
  border-left: 3px solid #7fa6c3;
  padding-left: 16px;
  margin: 20px 0;
  color: #44535f;
  font-style: italic;
}

/* ========================= */
/* SUBTITULO DEL ARTICULO */
/* ========================= */

.blog-subtitle {
  font-size: 28px;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #2f4f6a;
  line-height: 1.3;
}

/* ========================= */
/* MEJORAR TITULOS EN MOBILE */
/* ========================= */

@media (max-width: 768px) {

  .blog-text {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.7;
  }

  .blog-subtitle {
    font-size: 24px;
  }

  .key-phrase {
    font-size: 17px;
  }

}

/* ========================= */
/* AJUSTE PARA CELULARES */
/* ========================= */

@media (max-width: 480px) {

  .blog-text {
    font-size: 15.5px;
    line-height: 1.7;
  }

  .blog-subtitle {
    font-size: 22px;
  }

}