:root {
  --primary: #5a4fcf;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; background: #f8f9fa; }
.logo { height: 50px; }
.hero-section {
  position: relative; height: 80vh;
  background: url('imagenes/videos-fondo.jpg') center/cover fixed;
}
.overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.hero-content {
  position: relative; z-index: 2; color: #fff;
}
.hero-content h1 {
  font-size: 3rem; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}