/* Estilo para el contenedor de la lista de newsletters */
.tnp-archive {
  display: flex;
  flex-wrap: wrap;
  gap: 6em; /* Triple de separación entre las cajas */
  justify-content: center;
}

/* Estilo para cada elemento de la lista de newsletters */
.tnp-archive li {
  background-color: #f9f9f9;
  border-radius: 20px; /* Más redondeado en todas las cajas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Añadimos sombra más fuerte */
  padding: 15px;
  width: 600px; /* Duplicamos el ancho de las cajas */
  text-align: center;
  transition: transform 0.3s ease, margin-left 0.3s ease, border-radius 0.3s ease; /* Transición para margen y hover */
  list-style: none; /* Elimina los puntos de lista */
  margin-left: 0; /* Inicialmente sin margen */
}

/* Letras en color negro */
.tnp-archive li a, .tnp-archive li .tnp-archive-date {
  color: #000000 !important;
}

/* Efecto hover */
.tnp-archive li:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombras más fuertes en hover */
}

/* Movimiento zigzag */
.tnp-archive li:nth-child(odd) {
  margin-left: -30px; /* Desplazamos las impares a la izquierda */
}

.tnp-archive li:nth-child(even) {
  margin-left: 30px; /* Desplazamos las pares a la derecha */
}

/* Bordes más redondeados en cada caja */
.tnp-archive li {
  border-radius: 30px; /* Redondeo más pronunciado en todas las cajas */
}

/* Aún más redondeado cada 4 cajas */
.tnp-archive li:nth-child(4n) {
  border-radius: 50px; /* Bordes aún más redondeados cada 4 cajas */
}

/* Colores diferentes para cada caja */
.tnp-archive li:nth-child(1) {
  background-color: #FFEB3B; /* Amarillo */
}

.tnp-archive li:nth-child(2) {
  background-color: #4CAF50; /* Verde */
}

.tnp-archive li:nth-child(3) {
  background-color: #2196F3; /* Azul */
}

.tnp-archive li:nth-child(4) {
  background-color: #F5F5DC; /* Crema blanquecino */
}

.tnp-archive li:nth-child(5) {
  background-color: #F44336; /* Rojo */
}

.tnp-archive li:nth-child(6) {
  background-color: #9C27B0; /* Violeta */
}

.tnp-archive li:nth-child(7) {
  background-color: #FF9800; /* Naranja */
}

.tnp-archive li:nth-child(8) {
  background-color: #ADD8E6; /* Azul muy claro */
}

.tnp-archive li:nth-child(9) {
  background-color: #F5F5F5; /* Gris claro */
}

.tnp-archive li:nth-child(10) {
  background-color: #FFC0CB; /* Rosa */
}

.tnp-archive li:nth-child(11) {
  background-color: #B87333; /* Cobre metálico brillante */
}

/* Repite los colores para las siguientes cajas */
.tnp-archive li:nth-child(12) {
  background-color: #FFEB3B; /* Amarillo */
}

.tnp-archive li:nth-child(13) {
  background-color: #4CAF50; /* Verde */
}

.tnp-archive li:nth-child(14) {
  background-color: #2196F3; /* Azul */
}

.tnp-archive li:nth-child(15) {
  background-color: #F5F5DC; /* Crema blanquecino */
}

.tnp-archive li:nth-child(16) {
  background-color: #F44336; /* Rojo */
}

.tnp-archive li:nth-child(17) {
  background-color: #9C27B0; /* Violeta */
}

.tnp-archive li:nth-child(18) {
  background-color: #FF9800; /* Naranja */
}

.tnp-archive li:nth-child(19) {
  background-color: #ADD8E6; /* Azul muy claro */
}

.tnp-archive li:nth-child(20) {
  background-color: #F5F5F5; /* Gris claro */
}

.tnp-archive li:nth-child(21) {
  background-color: #FFC0CB; /* Rosa */
}

.tnp-archive li:nth-child(22) {
  background-color: #B87333; /* Cobre metálico brillante */
}