/* ========================================= */
/* VISTA PREVIA DEL VIDEO (MINIATURA)        */
/* ========================================= */
.video-preview {
    cursor: pointer;
    width: 100%;
    /* 👇 AQUÍ CAMBIAS EL TAMAÑO. 250px es pequeño, 400px es mediano */
    max-width: 250px; 
    margin: 0 auto;
    position: relative;
    transition: transform 0.3s ease;
}

.video-preview:hover {
    transform: scale(1.05); /* Pequeño zoom al pasar el mouse */
}

.video-preview img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Botón de Play adaptado al tamaño pequeño */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(166, 149, 0, 0.9); /* Tu color dorado */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: background 0.3s ease;
}

.video-preview:hover .play-btn {
    background: #25D366; /* Cambia a verde WhatsApp al pasar el mouse */
}

/* ========================================= */
/* EFECTOS DE COLOR AL PASAR EL MOUSE (HOVER) */
/* ========================================= */

/* Al pasar sobre el contenedor, oscurecemos un poco la imagen */
.video-preview:hover img {
    filter: brightness(0.7); /* Oscurece la imagen al 70% */
    transform: scale(1.05);  /* Mantiene el zoom suave */
    transition: all 0.3s ease;
}

/* Cambio de color del botón de reproducción */
.video-preview:hover .play-btn {
    background: #25D366; /* Cambia a verde WhatsApp */
    color: #fff;         /* Asegura que el icono sea blanco */
    transform: translate(-50%, -50%) scale(1.2); /* Crece un poco más que la imagen */
    box-shadow: 0 0 25px rgba(37, 211, 102, 0.6); /* Resplandor verde */
}

/* Efecto cuando se hace clic (Active) */
.video-preview:active {
    transform: scale(0.95); /* Efecto de pulsación */
}
/* Al pasar sobre el contenedor, oscurecemos suavemente la imagen */
.video-preview:hover img {
    filter: brightness(0.6); /* Oscurece un poco más para que resalte el botón */
    transition: all 0.3s ease;
}

/* Cambio de color del botón a un dorado más claro y brillante */
.video-preview:hover .play-btn {
    background: #d4c000; /* Un dorado más claro que el original */
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(212, 192, 0, 0.5); /* Resplandor dorado suave */
}