/* ==================================================
   PÁGINA DE NOTICIA
================================================== */

.articlePage{
  padding:5rem 0;
}

#articleContent{
  width:100%;
  max-width:900px;
  margin:0 auto;
}

/* Categoría */

#articleContent .eyebrow{
  color:var(--colorPrimary);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:.75rem;
}

/* Título */

#articleContent h1{
  margin:0 0 1rem;
  text-transform:uppercase;
  line-height:1.15;
}

/* Fecha */

#articleContent .newsDate{
  color:var(--textSecondary);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:2rem;
}

/* Imagen principal */

.articleHeroImage{
  width:100%;
  height:auto;
  display:block;
  border-radius:1rem;
  margin-bottom:2rem;
  object-fit:cover;
}

/* Imágenes dentro del artículo */

.articleImage{
  width:100%;
  height:auto;
  display:block;
  border-radius:.75rem;
  margin:2rem 0;
  object-fit:cover;
}

/* Pie de imagen */

.articleContent figure{
  margin: 2rem 0;
}

.articleContent figcaption{
  margin-top: .75rem;
  font-size: .9rem;
  color: #333333;
  text-align: center;
  line-height: 1.5;
  font-style: italic;
}

/* Texto */

#articleContent p{
  color:var(--textPrimary);
  line-height:1.85;
  margin-bottom:1.4rem;
}

#articleContent strong{
  color:var(--textPrimary);
}

/* Subtítulos */

#articleContent h2,
#articleContent h3,
#articleContent h4{
  margin:2.8rem 0 1rem;
  color:var(--textPrimary);
  text-transform:uppercase;
  line-height:1.3;
}

/* Listas */

#articleContent ul,
#articleContent ol{
  margin:1.5rem 0 1.8rem 1.5rem;
  line-height:1.8;
}

#articleContent li{
  margin-bottom:.6rem;
}

/* Citas */

#articleContent blockquote{
  margin:2rem 0;
  padding:1.5rem 2rem;
  border-left:4px solid var(--colorPrimary);
  background:var(--bgSecondary);
  font-style:italic;
  line-height:1.8;
}

/* Separador */

#articleContent hr{
  border:none;
  border-top:1px solid var(--borderColor);
  margin:3rem 0;
}

/* Botón volver */

.articlePage .btnDarkOutline{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:var(--colorPrimary);
  transition:var(--transitionBase);
}

.articlePage .btnDarkOutline:hover{
  transform:translateX(-3px);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:768px){

  .articlePage{
    padding:3.5rem 0;
  }

  #articleContent{
    max-width:100%;
  }

  #articleContent h1{
    font-size:2rem;
  }

  #articleContent h2{
    font-size:1.5rem;
  }

  #articleContent h3{
    font-size:1.25rem;
  }

  .articleHeroImage{
    border-radius:.75rem;
  }

  .articleImage{
    border-radius:.5rem;
    margin:1.5rem 0;
  }

}