/* Overlay oscuro */
.promo-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 99999; /* Muy alto para estar encima de todo */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Caja del contenido */
.promo-modal-content {
    background-color: transparent;
    padding: 0;
    border-radius: 8px;
    position: relative;
    max-width: 600px; /* Tamaño máximo del popup en escritorio */
    width: 90%; /* Ancho flexible */
    max-height: 90vh; /* Para evitar desbordamiento vertical en pantallas cortas */
    overflow: hidden; /* Asegura que el contenido quede dentro del borde redondeado */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    animation: promoFadeIn 0.3s ease-out;
}

/* Botón cerrar */
.promo-close-btn {
    position: absolute;
    /* top: -15px; */
    right: -1px;
    background: #fff;
    color: #333;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #333;
    z-index: 100000;
}

.promo-close-btn:hover {
    background: #333;
    color: #fff;
}

/* Estilo para Imagen */
.promo-modal-body img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* --- ESTILO AÑADIDO: Para el Video --- */
.promo-modal-body .promo-video-element {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer; /* Indica que el video es clickable */
}

/* --- NUEVO: Estilo para cuando la imagen tiene enlace --- */
.promo-modal-body img.has-link:hover {
    cursor: pointer;
    opacity: 0.96; /* Un pequeño efecto visual al pasar el ratón */
    transition: opacity 0.2s ease;
}

/* Animación de entrada */
@keyframes promoFadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
}

/* ================================================= */
/* AJUSTES MÓVILES (Media Query) */
/* ================================================= */

@media (max-width: 768px) {
    
    /* Contenedor del PopUp: Forzamos un tamaño máximo menor */
    .promo-modal-content {
        max-width: 95%; /* Asegurar que no toque los bordes */
        width: 95%; 
    }

    /* Botón cerrar: Lo reubicamos dentro del borde del popup en el móvil */
    .promo-close-btn {
        top: 5px; /* Lo movemos hacia abajo */
        right: 5px; /* Lo movemos hacia la izquierda */
        /* Eliminamos el borde blanco/negro y el background para que se vea bien sobre el video/imagen */
        background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente oscuro */
        color: #fff;
        border: none;
        width: 28px;
        height: 28px;
        line-height: 26px;
    }
    
    /* El video y la imagen ya son 100% gracias a los estilos generales. */
}