body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
  }

/*----------------- NAV --------------------*/

  .gradient-background {
    background-color: #2d6326;
  }

  .nav-wrapper{
    position: sticky;
  }
  
  .logo {
    height: 50px; 
    border-radius: 5px;
    display: flex;
    justify-content: center;
  }

  

  /**************** HAMBURGER ******************/

.hamburger {
  display: flex;
  flex-direction: column; /* direccion de la colocacion de las rayas del hamburger*/
  gap: 5px; /* separacion de cada raya del hamburger*/
  cursor: pointer;  /*cambia de flecha a dedo en hover sobre las rayas*/
  /* align-items: center; */
  margin-right: 300px;
  
}

/* header > .logo {
    margin: 0;
  } */

.hamburger span {
  width: 25px;  /*largo de cada raya*/
  height: 3px;
  background: white;
}

/* WRAPPER */
.nav-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  /* justify-content: space-between; */
}

/* MÓVIL */
@media (max-width: 1200px) {

  .nav-wrapper {
    position: relative;
    top: 100%;
    left: 0;
    /* width:50%; */
    background: #2d6326;
    flex-direction: column;
    display: none;
    padding: 10px 0;
    /* z-index: 999; */
  }

  .nav-wrapper.active {
    display: flex;
  }


}



/**************** NOTICIAS Y TENDENCIAS ******************/

.NewsTitle{
  margin-top: 30px;
  font-family: 'Times New Roman', Times, serif;
}

.NewsTitle a{
  text-decoration: none;
  color: inherit;
}

.containerNews{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2%;

  max-width:1200px;
  margin:auto;
  padding-left:5px;
  padding-right:5px;
}

.dateNews{
  display: flex;
  align-items: flex-end;
  height: 80px;
}

/* DIMENSIONES */
.row1{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
}

.row3{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 30px;
}


/* NAVBAR DE NEWS  */
.navNews{
  display: flex;
  justify-content: center;
}

.navbarNews{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 40px;
  border-bottom:1px solid #ddd;
  font-family: Arial, sans-serif;
  width: 100%;
}

.menu{
  display:flex;
  gap:30px;
  
  justify-content:space-evenly;
  width:100%;
}

.menu a{
  text-decoration:none;
  color:#222;
  font-size:14px;
  letter-spacing:0.5px;
  padding-bottom:10px;
}

.menu a:hover{
  color:black;
}

.menu .active{
  border-bottom:3px solid black;
}

.menu a{
  position:relative;
}

.menu a::after{
  content:"";
  position:absolute;
  width:0;
  height:2px;
  background:black;
  bottom:0;
  left:0;
  transition:0.3s;
}

.menu a:hover::after{
  width:100%;
}


/* NEWS ITEMS */

.newsItem{
    padding: 15px;
    border-bottom: 1px solid #D1D1D1;
}

.recentNews a{
    text-decoration: none; /* Quita el underline de <a> */
    color: inherit; /* Quita el color azil del <a>*/
}

.featuredNews a{
  text-decoration: none;
  color: inherit;
}

.trends a{
  text-decoration: none;
  color: inherit;
}


/* Foto de feature */

.featPhoto{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius: 2%;
}

/* Cards de feature */
.cards-container {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
}

.card h5 {
  font-size: 14px;
  margin-top: 5px;
}


/*-----------------------
-------------------------
      ARTICLE
-------------------------
------------------------*/
 

/* LAYOUT GENERAL */
.articleContainer{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns: 3fr 1fr;
    gap:40px;
    padding:40px 20px;
}

@media (max-width: 768px) {
  .articleContainer{
    grid-template-columns: 1fr;
  }
}

/* ARTÍCULO */
.articleMain{
    font-family: Georgia, serif;
}

.articleCategory{
    font-size:12px;
    font-weight:bold;
    letter-spacing:1px;
    color:#666;
}

.articleTitle{
    font-size:36px;
    margin:10px 0 20px 0;
}

.articleMeta{
    font-size:12px;
    color:#777;
    margin-bottom:20px;
}

.articleImage{
    width:100%;
    margin-bottom:20px;
}

.articleContent{
    font-size:18px;
    line-height:1.7;
}

/* SIDEBAR */

.sidebar{
    border-left:1px solid #ddd;
    padding-left:20px;
}

.sidebarTitle{
    font-size:18px;
    font-weight:bold;
    margin-bottom:20px;
}

.editorItem{
    display:flex;
    gap:10px;
    margin-bottom:15px;
}

.editorItem img{
    width:80px;
    height:60px;
    object-fit:cover;
}

.editorItem h4{
    font-size:14px;
    margin:0;
}