/* ================= RESET ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body{
    width:100%;
    overflow-x:hidden;
}

body{
    background:#050816;
    font-family:Arial, sans-serif;
    color:white;
}

/* ================= HERO ================= */

.apply-closed{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-image:url("../assets/img/hero2.png");
    background-size:cover;
    background-position:center right;
    position:relative;
    box-shadow: 0 0 50px #06041A;
}





/* ================= OVERLAY ================= */

.closed-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(5,8,22,.95),
        rgba(5,8,22,.7),
        rgba(5,8,22,.3)
    );
    z-index:0;
}



/* ================= CONTENIDO ================= */

.closed-content{
    position:relative;
    z-index:2;
    max-width:700px;
    padding:20px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}

/* TAG */

.closed-tag{
    display:inline-block;
    color:#ff4d4d;
    border:1px solid rgba(255,77,77,.4);
    padding:10px 20px;
    border-radius:999px;
    font-weight:700;
}

/* TITULOS */

.closed-content h1{
    font-size:clamp(2.8rem,5vw,4.2rem);
    letter-spacing:1px;
}

.closed-content span{
    color:#b33cff;
    text-shadow:0 0 20px rgba(179,60,255,.5);
}

.closed-content h2{
    font-size:1.3rem;
    color:#cfcfe8;
}

/* ================= TIMER ================= */

#timer{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin:20px 0;
}

#timer div{
    background:rgba(17,24,45,.6);
    backdrop-filter:blur(10px);

    padding:18px 22px;
    border-radius:16px;

    min-width:80px;

    border:1px solid rgba(179,60,255,.2);

    box-shadow:
        0 0 15px rgba(179,60,255,.15),
        inset 0 0 10px rgba(179,60,255,.05);

    transition:.3s;
}

#timer div:hover{
    transform:translateY(-4px) scale(1.05);
    box-shadow:
        0 0 25px rgba(179,60,255,.4),
        0 0 60px rgba(179,60,255,.2);
}

#timer b{
    display:block;
    font-size:1.8rem;
    color:#b33cff;
    font-weight:800;

    text-shadow:
        0 0 10px rgba(179,60,255,.6),
        0 0 20px rgba(179,60,255,.4);
}

#timer small{
    font-size:.75rem;
    color:#aaa;
    letter-spacing:.5px;
}

/* ================= TEXTO ================= */

.hype-text{
    color:#9aa0c3;
    font-size:.95rem;
    margin-bottom:10px;
}

/* ================= BOTONES ================= */

.closed-actions{
    display:flex;
    gap:20px;
    justify-content:center;
    margin-top:10px;
}

/* BOTÓN PRINCIPAL */
.btn-primary{
    position:relative;
    padding:14px 34px;
    border-radius:14px;

    background:linear-gradient(135deg,#7f00ff,#b33cff);
    color:white;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.6px;

    box-shadow:
        0 0 15px rgba(179,60,255,.4),
        0 0 40px rgba(179,60,255,.2);

    transition:.3s;
    overflow:hidden;
}

.btn-primary::before{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

    transition:.5s;
}

.btn-primary:hover::before{
    left:100%;
}

.btn-primary:hover{
    transform:translateY(-4px) scale(1.05);

    box-shadow:
        0 0 25px rgba(179,60,255,.7),
        0 0 60px rgba(179,60,255,.4);
}

/* BOTÓN SECUNDARIO */
.btn-secondary{
    position:relative;
    padding:14px 34px;
    border-radius:14px;

    color:white;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.6px;

    border:1px solid rgba(179,60,255,.5);
    background:rgba(255,255,255,.03);
    backdrop-filter:blur(8px);

    transition:.3s;
    overflow:hidden;
}

.btn-secondary::after{
    content:"";
    position:absolute;
    inset:0;

    border-radius:14px;

    box-shadow:
        inset 0 0 10px rgba(179,60,255,.3);

    opacity:0;
    transition:.3s;
}

.btn-secondary:hover::after{
    opacity:1;
}

.btn-secondary:hover{
    transform:translateY(-4px) scale(1.05);

    border-color:#b33cff;
    background:rgba(179,60,255,.08);

    box-shadow:
        0 0 20px rgba(179,60,255,.5),
        0 0 40px rgba(179,60,255,.2);
}



/* ================= RESPONSIVE ================= */

@media(max-width:768px){

    .closed-content{
        padding:10px;
    }

    .closed-content h1{
        font-size:2.3rem;
    }

    #timer{
        gap:10px;
    }

    #timer div{
        padding:12px;
        min-width:65px;
    }
}