/*==================================================
=            MORELL COMERÇ - VIDEO APP             =
==================================================*/

#mc-video-app{

    position:relative;
    width:100%;
    max-width:900px;
    margin:40px auto;
    overflow:hidden;

    border-radius:20px;

    background:#000;

    box-shadow:0 25px 70px rgba(0,0,0,.25);

}

/* VIDEO */

#mc-video-app video{

    display:block;

    width:100%;

    height:auto;

    background:#000;

}

/* OCULTAR CONTROLS NATIUS */

#mc-video-app video::-webkit-media-controls{

    display:none !important;

}

#mc-video-app video::-webkit-media-controls-enclosure{

    display:none !important;

}

#mc-video-app video::-webkit-media-controls-panel{

    display:none !important;

}

/* OVERLAYS */

.mc-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    transition:.45s;

    z-index:30;

}

.mc-hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* TARGETA */

.mc-card{

    width:88%;

    max-width:520px;

    background:#ffffff;

    border-radius:18px;

    padding:40px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

    animation:mcFade .5s ease;

}

/* LOGO */

.mc-logo img{

    max-width:170px;

    margin-bottom:25px;

}

/* TITOLS */

.mc-card h2{

    margin:0 0 15px;

    font-size:34px;

    color:#222;

    font-weight:700;

}

/* TEXT */

.mc-card p{

    font-size:18px;

    line-height:1.7;

    color:#555;

    margin-bottom:35px;

}

/* BOTONS */

.mc-btn{

    display:inline-block;

    width:100%;

    border:none;

    border-radius:50px;

    padding:18px;

    font-size:21px;

    font-weight:700;

    text-decoration:none;

    cursor:pointer;

    transition:.30s;

    margin-bottom:15px;

}

.mc-btn:hover{

    transform:translateY(-3px);

}

/* PRINCIPAL */

.mc-btn-primary{

    background:#0d6efd;

    color:#fff;

}

.mc-btn-primary:hover{

    background:#0b5ed7;

}

/* VERD */

.mc-btn-success{

    background:#28a745;

    color:#fff;

}

.mc-btn-success:hover{

    background:#1f8a38;

}

/* GRIS */

.mc-btn-secondary{

    background:#ececec;

    color:#333;

}

.mc-btn-secondary:hover{

    background:#d9d9d9;

}

/* TEXT SO */

.mc-sound{

    margin-top:20px;

    color:#777;

    font-size:15px;

}

/* CHECK FINAL */

.mc-check{

    width:90px;

    height:90px;

    margin:auto auto 25px;

    border-radius:50%;

    background:#28a745;

    color:#fff;

    font-size:48px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* BARRA PROGRÉS */

.mc-progress{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:8px;

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

    z-index:40;

}

.mc-progress-bar{

    width:0;

    height:100%;

    background:#ffc107;

    transition:width .15s linear;

}

/* ANIMACIÓ */

@keyframes mcFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* RESPONSIVE */

@media(max-width:980px){

.mc-card{

padding:30px;

}

.mc-card h2{

font-size:28px;

}

.mc-card p{

font-size:17px;

}

.mc-btn{

font-size:18px;

padding:16px;

}

}

@media(max-width:767px){

#mc-video-app{

margin:20px auto;

border-radius:12px;

}

.mc-card{

width:92%;

padding:25px;

}

.mc-logo img{

max-width:130px;

}

.mc-card h2{

font-size:24px;

}

.mc-card p{

font-size:16px;

line-height:1.5;

margin-bottom:25px;

}

.mc-btn{

font-size:17px;

padding:15px;

}

.mc-check{

width:70px;

height:70px;

font-size:36px;

}

.mc-progress{

height:6px;

}

}