/* === VIDEO CIBERSEGURIDAD === */
.video-container {
  text-align: center;
  background: linear-gradient(135deg, #141e30, #243b55);
  padding: 4rem 2rem;
  color: white;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  margin: 2rem auto;
  max-width: 1200px;
}

.video-container h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00ffcc;
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 56.25%;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 255, 204, 0.5);
  border: 1px solid #00ffcc;
  background: #0a0a0a;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* === GALERÍA RESEÑAS === */
.video-gallery {
  text-align: center;
  background: linear-gradient(135deg, #141e30, #243b55);
  padding: 4rem 2rem;
  color: white;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  margin: 2rem auto;
  max-width: 1200px;
}

.video-gallery h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00ffcc;
}

/* Reproductor principal */
.main-video {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 2rem;
  padding-top: 56.25%;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 255, 204, 0.5);
  border: 1px solid #00ffcc;
  background: #0a0a0a;
}

.main-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Miniaturas */
.video-thumbnails {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.video-thumbnails img {
  width: clamp(120px, 20vw, 180px);
  height: auto;
  cursor: pointer;
  border-radius: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 255, 204, 0.3);
  border: 2px solid transparent;
}

.video-thumbnails img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 255, 204, 0.6);
  border-color: #00ffcc;
}

.video-thumbnails img.active {
  border: 3px solid #00ffcc;
  box-shadow: 0 0 10px #00ffcc;
}

/* === MEDIA QUERIES === */
@media (max-width: 768px) {
  .video-container,
  .video-gallery {
    padding: 3rem 1rem;
  }

  .video-thumbnails {
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .video-container h2,
  .video-gallery h2 {
    font-size: 1.5rem;
  }

  .video-thumbnails img {
    width: 100%;
    max-width: 100%;
  }
}

.video-section {
  background: linear-gradient(135deg, #141e30, #243b55);
  padding: 3rem 1rem;
  color: white;
}

.video-section h2 {
  color: white;
  text-align: center;
}