.hero {
  background-color: #0a0a0c;
  padding: 100px 20px;
  text-align: center;
  color: #ffffff;
}
.hero__title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #a0a0a0;
  max-width: 700px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

.hero__button {
  display: inline-block;
  padding: 12px 30px;
  background-color: #007bff; /* Tu color de marca */
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.hero__button:hover {
  background-color: #0056b3;
}
/* Destacados */
.destacados {
  padding: 60px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.destacados__titulo {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2rem;
}

.destacados__grid {
  display: grid;
  /* Esto crea 3 columnas en escritorio, 1 en celular */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.card {
  background-color: #1a1a1e; /* Un poco más claro que el fondo para que resalten */
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #333; /* Un borde sutil para dar definición */
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px); /* Efecto de elevación al pasar el mouse */
  border-color: #007bff; /* El borde brilla con tu color de marca */
}

.card img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 15px;
}