/* Contenido para popup-video-styles.css */

.container-ico {
    background: #d1d1d1;
    border-radius: 100%;
    padding: 1px 4px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    transition: 0.4s ease;
    cursor: pointer;
    animation: pulse 1.5s infinite ease-in-out;
}

.container-ico:hover {
    animation-play-state: paused; 
    transform: scale(1.12); 
    background: #db1808;
}

.ico-video {
    max-width: 27px;
    padding: 3px;
    image-rendering: -webkit-optimize-contrast;
}

/* Tu animación de icono (puedes añadirla aquí también) */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }
  50% { transform: scale(1.1); box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px; }
  100% { transform: scale(1); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }
}

.container-ico.js-open-video-popup {
  cursor: pointer;
  animation: pulse 2s infinite ease-in-out;
}
.container-ico.js-open-video-popup:hover {
  animation-play-state: paused;
  transform: scale(1.15);
}

/* Estilos del Popup */
.popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75); z-index: 99999;
    display: flex; justify-content: center; align-items: center;
    visibility: hidden; opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup-overlay.active { visibility: visible; opacity: 1; }
.popup-content {
    background: #fff; padding: 5px; border-radius: 8px;
    position: relative; width: 90%; max-width: 800px;
}
.close-btn {
    position: absolute; top: -15px; right: -15px;
    background: #fff; border: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 22px; font-weight: bold; cursor: pointer; color: #DB1808;
    transition: all 0.2s;z-index: 1;
}
.close-btn:hover { background: #DB1808; color: #fff; }
.video-container {
    position: relative; padding-bottom: 56.25%;
    height: 0; overflow: hidden;
}
.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}