/*==============================
  404
==============================*/

.coming-soon{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.88)),
               url("../img/hero-bg.jpg") center/cover no-repeat;

    padding:140px 0 100px;

}

.coming-logo{

    width:170px;

    margin-bottom:30px;

}

.display-1{

    font-size:7rem;

    color:#F2B705;

    text-shadow:0 0 20px rgba(242,183,5,.25);

}

.btn-outline-warning{

    border-width:2px;

}

.btn-outline-warning:hover{

    color:#111;

}


/*==============================
  COMING SOON en trabajo!
==============================*/


body{
    background:#f8f9fa;
}

header{
    background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
    url('../img/proyectos/banner.jpg') center/cover no-repeat;
}

header h1{
    font-weight:700;
}

.card{
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.18)!important;
}

.card-img-top{
    height:250px;
    object-fit:cover;
}

.card-body{
    display:flex;
    flex-direction:column;
}

.card-body p{
    flex:1;
    color:#666;
}

.btn-brand{
    background:#ffc107;
    color:#111;
    border:none;
    font-weight:700;
    transition:.3s;
}

.btn-brand:hover{
    background:#ffcf3b;
    transform:scale(1.02);
}

.modal-content{
    border:none;
    border-radius:18px;
}

.modal-header{
    background:#111;
    color:#fff;
}

.modal-body img{
    border-radius:12px;
}

footer{
    margin-top:70px;
}

@media(max-width:991px){

header{
padding:90px 0!important;
}

.card-img-top{
height:220px;
}

}

@media(max-width:768px){

.card-img-top{
height:200px;
}

header h1{
font-size:2rem;
}

}

/*==============================
GALERÍA DEL MODAL
===============================*/

.galeria-principal{

    width:100%;
    height:550px;

    object-fit:contain;

    border-radius:15px;

    margin-bottom:15px;

}


.galeria-miniaturas{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-bottom:10px;

    scroll-behavior:smooth;

}


.galeria-miniaturas::-webkit-scrollbar{

    height:8px;

}

.galeria-miniaturas::-webkit-scrollbar-thumb{

    background:#ffc107;

    border-radius:10px;

}

.galeria-miniaturas img{

    width:140px;

    height:90px;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

    flex-shrink:0;

}

.galeria-miniaturas img:hover{

    transform:scale(1.05);

    opacity:.9;

}


/* ==========================
BOTÓN CERRAR MODAL
========================== */

.modal-header .btn-close{

    filter: invert(78%) sepia(82%) saturate(1132%) hue-rotate(355deg)
            brightness(103%) contrast(103%);

    opacity: 1;

    transition: .3s;

}

.modal-header .btn-close:hover{

    transform: rotate(90deg) scale(1.1);

    opacity: .8;

}