body {
  /* Retaining the dark, subtle gradient for the background */
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(to right, #0F0F1A, #1C1C29); /* Deeper, more saturated dark blue/purple */
  color: #E6E6FF; /* Slightly blue-tinted white for main text */
}

header {
  /* Header gets a solid deep color with a subtle, electric gradient accent */
  text-align: center;
  padding: 2.5rem; /* Increased padding */
  background: linear-gradient(to right, #1A1A2E, #2A2A4A); /* Deep indigo/navy */
  color: #B3CCFF; /* Electric blue-white for header text */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); /* Subtle shadow for depth */
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem; /* Increased gap */
  padding: 3rem; /* Increased padding */
}

.card {
  /* Card background: Deep, vibrant purple/blue gradient */
  background: linear-gradient(to bottom right, #2C2A5C, #4B3A88); 
  border-radius: 12px; /* Slightly more rounded */
  padding: 1.5rem;
  width: 280px; /* Slightly wider cards */
  cursor: pointer;
  transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
  /* Enhanced, glowing box shadow */
  box-shadow: 0 6px 15px rgba(100, 100, 200, 0.3), 0 0 10px rgba(75, 58, 136, 0.5); 
  color: #D6CFFF; /* Light purple-blue text */
  border: 1px solid #4B3A88; /* Subtle border matching the dark color */
}

.card:hover {
  /* Hover: More pronounced scale and an electric teal/blue glow accent */
  transform: scale(1.08); 
  background: linear-gradient(to bottom right, #383670, #614F9C);
  box-shadow: 0 10px 20px rgba(0, 200, 255, 0.4), 0 0 15px rgba(100, 255, 255, 0.6); /* Neon blue shadow on hover */
}

.imagen-contenedor {
  width: 100%;
  height: 180px; /* Taller image container */
  overflow: hidden;
  border-radius: 8px;
  margin-top: 1rem;
  /* Subtle border around the image container */
  border: 2px solid #5C6BC0; 
}

.imagen-contenedor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.9); /* Darker overlay for better focus */
}

.modal-content {
  /* Modal: Ultra dark background for contrast */
  background: linear-gradient(to right, #1A1A1A, #0A0A0A); 
  color: #E6E6FF; 
  margin: 10% auto;
  padding: 3rem; /* More padding */
  border-radius: 15px; /* More rounded */
  width: 80%;
  max-width: 700px; /* Wider modal */
  /* Intense, focused border/shadow for the modal */
  box-shadow: 0 0 30px rgba(0, 200, 255, 0.6); 
  border: 1px solid #00BFFF; /* Electric blue border */
}

.close {
  float: right;
  font-size: 2rem; /* Larger close button */
  cursor: pointer;
  color: #00BFFF; /* Neon blue close button */
  transition: color 0.3s;
}

.close:hover {
  color: #FFF; /* White on hover */
}