/* Estilos base (ya adaptables) */
.modal {
   display: none;
   position: fixed;
   z-index: 1000;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(50,50,50,0.8));
   justify-content: center;
   align-items: center;
   padding: 20px;
}

.modal-content {
   position: relative;
   width: 100%;
   max-width: 800px;
   background: transparent;
}

.video-wrapper {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
}

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

/* Botón de cierre */
.close-button {
   position: absolute;
   top: -10px;
   right: -10px;
   width: 50px;
   height: 50px;
   font-size: 32px;
   color: white;
   cursor: pointer;
   background: rgba(0,0,0,0.6);
   border-radius: 50%;
   z-index: 1001;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Miniaturas */
.video-thumbnail {
   cursor: pointer;
}

.video-thumbnail img {
   transition: transform 0.2s;
}

.video-thumbnail:hover img {
   transform: scale(1.05);
}
 

@media (max-width: 600px) {
   .video-thumbnail img {
      width: 100%;
      max-width: 100%;
   }
 
   .modal-content {
      width: 100%;
   }
 
   .close-button {
      font-size: 28px;
      top: 5px;
      right: 5px;
      width: 35px;
      height: 35px;
   }
}