/* =====================================================
   ESTILOS PARA ARTÍCULOS - VERSIÓN SIMPLE
   ===================================================== */

/* Sección principal de contenido */
.content-section {
  padding: 40px 0; /* Espacio arriba y abajo */
  margin-bottom: 30px; /* Espacio debajo de la sección */
}

/* Contenedor de artículos */
.articles-grid {
  display: flex; /* Los elementos se alinean en fila */
  flex-wrap: wrap; /* Permite que se muevan a la siguiente línea */
  gap: 30px; /* Espacio entre las tarjetas */
}

/* Título principal */
.articles-grid h2 {
  width: 100%; /* Ocupa todo el ancho disponible */
  text-align: center; /* Centrar el texto */
  font-size: 2.5rem; /* Tamaño de letra grande */
  margin-bottom: 20px; /* Espacio debajo del título */
  color: #00ffc2; /* Color verde claro */
}

/* Tarjetas individuales de productos */
.product-card {
  display: flex; /* Los elementos internos se apilan */
  flex-direction: column; /* Elementos en columna (uno debajo del otro) */
  align-items: center; /* Centrar horizontalmente */
  text-align: center; /* Centrar el texto */
  padding: 30px; /*Espacio interno de la tarjeta */
  border: 2px solid #00ffc2; /* Borde verde claro */
  border-radius: 10px; /* Esquinas redondeadas */
  background-color: #1a1a1a; /* Fondo oscuro */
  min-width: 300px; /* Ancho mínimo de la tarjeta */
  flex: 1; /* Las tarjetas se expanden por igual */
}

/* Efecto cuando pasas el mouse por encima */
.product-card:hover {
  background-color: #2a2a2a; /* Fondo un poco más claro */
  border-color: #ffffff; /* Borde blanco */
}

/* Títulos dentro de las tarjetas */
.product-card h3 {
  margin-bottom: 15px; /* Espacio debajo del título */
  color: #00ffc2; /* Color verde claro */
  font-size: 1.5rem; /* Tamaño de letra mediano */
}

/* Texto descriptivo */
.product-card p {
  color: #cccccc; /* Color gris claro */
  margin-bottom: 20px; /* Espacio debajo del párrafo */
  line-height: 1.5; /* Espaciado entre líneas */
  flex-grow: 1; /* Ocupa el espacio disponible */
}

/* Texto "Más" */
.product-card a {
  padding: 10px 20px; /* Espacio interno del botón */
  background-color: #00ffc2; /* Fondo verde claro */
  color: #000000; /* Texto negro */
  text-decoration: none; /* Sin subrayado */
  border-radius: 5px; /* Esquinas redondeadas */
  font-weight: bold; /* Texto en negrita */
  text-transform: uppercase; /* Letras mayúsculas */
}

/* Efecto hover en los enlaces */
.product-card a:hover {
  background-color: #ffffff; /* Fondo blanco al pasar el mouse */
  color: #000000; /* Texto negro */
}