/* ========================= */
/* VIDEOS */
/* ========================= */

.video-play{

    pointer-events: auto;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:95px;
    height:95px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    border:2px solid rgba(255,255,255,.25);

    backdrop-filter:blur(10px);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:3;

    transition:opacity 0.3s ease, transform 0.3s ease;
}

.video-play i{

    font-size:42px;

    color:#fff;

    margin-left:5px;
}

/* ========================= */
/* HOVER PREMIUM */
/* ========================= */

.industry-card:hover .video-play{

    transform:
    translate(-50%,-50%)
    scale(1.12);

    background:var(--amarillo);

    border-color:var(--amarillo);

    box-shadow:
    0 15px 40px rgba(0,0,0,.20);
}

.industry-card:hover .video-play i{

    color:var(--azul);
}

/* ========================= */
/* CURSOR */
/* ========================= */

.industry-card{

    cursor:pointer;
}

/* ========================= */
/* RESPONSIVE MÓVIL */
/* ========================= */

@media(max-width:768px){

.video-play{

    width:75px;
    height:75px;
}

.video-play i{

    font-size:32px;
}

}

/* ========================= */
/* ADICIONAL VIDEOS */
/* ========================= */

.video-play::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.25),
        transparent 70%
    );

    opacity:.8;
}

/* PLAY PERSONALIZADO — VIDEO */

/* Mientras reproduce, ocultamos el botón */
.industry-card.is-playing .video-play{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.85);
}

/* Al pasar el mouse sobre el video, mostramos pausa */
.industry-card.is-playing:hover .video-play{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

/* OCULTAR INFORMACIÓN MIENTRAS EL VIDEO SE REPRODUCE */

.industry-card.is-playing .industry-content{
    opacity:0;
    transform:translateY(20px);
    pointer-events:none;
    transition:opacity 0.3s ease, transform 0.3s ease;
}

.industry-card.is-playing:hover .industry-content{
    opacity:1;
    transform:translateY(0);
}

.industry-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    background:#081833;

    transition:0.8s ease;

    z-index:0;
}

.industry-card:hover .industry-video{
    transform:scale(1.04);
}