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

body{
    background:#050816;
    font-family:'Inter',sans-serif;
}


.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(2,5,20,.92) 0%,
        rgba(2,5,20,.75) 35%,
        rgba(2,5,20,.25) 100%
    );
}

.hero-content{
    position:relative;
    z-index:2;
    width:min(700px,90vw);
    margin-top:-200px;
    margin-left:90px;
}
.hero-content img {
    margin-top: 150px;
}

.hero-logo{
    width:min(450px, 80vw);
}

.hero{

    min-height:100vh;

    display:flex;
    align-items:center;

    background-image:url("../assets/img/hero.png");
    background-size:cover;
    background-position:center right;

    position:relative;
}

.hero-subtitle{
    color:white;
    font-size:3rem;
    font-family:'Caveat',cursive;
    font-weight:600;
    margin-bottom:40px;
}




.countdown{
    display:flex;
    gap:20px;
    margin-top:40px;
    margin-bottom:35px;
}

/* ========================= */
/* CARD */
/* ========================= */

.time-box{
    width:150px;
    height:150px;

    position:relative;

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

    overflow:hidden;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        rgba(18,15,35,.85),
        rgba(8,8,18,.95)
    );

    border:2px solid #8b2cff;

    animation:
        borderPulse 3s ease-in-out infinite,
        borderColor 6s ease-in-out infinite;

    transition:.3s;
    
}

/* ========================= */
/* LINEA SUPERIOR */
/* ========================= */

.time-box::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:
    linear-gradient(
        90deg,
        #7f00ff,
        #00d4ff,
        #7f00ff
    );

    box-shadow:
        0 0 10px #7f00ff,
        0 0 20px #00d4ff;
}

/* ========================= */
/* DESTELLO RECORRIENDO */
/* ========================= */

.time-box::after{

    content:"";

    position:absolute;

    top:-50%;
    left:-120px;

    width:60px;
    height:250%;

    background:
    linear-gradient(
        transparent,
        rgba(255,255,255,.9),
        transparent
    );

    transform:rotate(25deg);

    animation:borderScan 4s linear infinite;
}

/* ========================= */
/* NUMERO */
/* ========================= */

.number{
    font-size:5rem;
    font-weight:800;

    color:white;

    text-shadow:
        0 0 10px rgba(255,255,255,.5),
        0 0 25px rgba(139,44,255,.5);
}

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

.label{
    margin-top:8px;

    font-size:.95rem;

    letter-spacing:2px;

    color:#d9d9d9;

    font-weight:600;
}

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

.time-box:hover{
    transform:translateY(-5px) scale(1.03);

    box-shadow:
        0 0 25px rgba(139,44,255,.9),
        0 0 50px rgba(139,44,255,.6),
        0 0 80px rgba(0,212,255,.3);
}

/* ========================= */
/* ANIMACIONES */
/* ========================= */

@keyframes borderPulse{

    0%,100%{
        box-shadow:
            0 0 10px rgba(139,44,255,.4),
            0 0 20px rgba(139,44,255,.2);
    }

    50%{
        box-shadow:
            0 0 20px rgba(139,44,255,.8),
            0 0 40px rgba(139,44,255,.5),
            0 0 60px rgba(139,44,255,.3);
    }

}

@keyframes borderColor{

    0%{
        border-color:#8b2cff;
    }

    50%{
        border-color:#00d4ff;
    }

    100%{
        border-color:#8b2cff;
    }

}

@keyframes borderScan{

    0%{
        left:-120px;
        opacity:0;
    }

    15%{
        opacity:1;
    }

    50%{
        opacity:1;
    }

    100%{
        left:250px;
        opacity:0;
    }

}


.hero-btn{

    position:relative;

    width:340px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin-top:35px;

    text-decoration:none;

    background:
    rgba(8,12,28,.85);

    border:2px solid #b33cff;

    overflow:hidden;

    backdrop-filter:blur(10px);

    clip-path: polygon(
        14px 0,
        calc(100% - 14px) 0,
        100% 14px,
        100% calc(100% - 14px),
        calc(100% - 14px) 100%,
        14px 100%,
        0 calc(100% - 14px),
        0 14px
    );

    box-shadow:
        0 0 15px rgba(179,60,255,.6),
        0 0 35px rgba(179,60,255,.3);

    transition:.35s;
    background-color: #1a0229;
}

.hero-btn::before{

    content:"";

    position:absolute;

    inset:4px;

    border:1px solid rgba(255,255,255,.12);

    clip-path: inherit;

    pointer-events:none;
}

.btn-text{

    color:white;

    font-family:'Outfit',sans-serif;

    font-size:17px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    z-index:2;
}

.btn-arrow{

    color:#b33cff;

    font-size:22px;

    font-weight:700;

    z-index:2;

    animation:arrowMove 1.5s infinite;
}

.btn-glow{

    position:absolute;

    top:-100%;
    left:-100px;

    width:50px;
    height:300%;

    background:
    linear-gradient(
        transparent,
        rgba(255,255,255,.8),
        transparent
    );

    transform:rotate(25deg);

    animation:btnScan 4s linear infinite;
}

.hero-btn:hover{

    transform:
        translateY(-3px)
        scale(1.02);

    border-color:#d16dff;

    box-shadow:
        0 0 25px rgba(179,60,255,.9),
        0 0 50px rgba(179,60,255,.5),
        0 0 80px rgba(179,60,255,.2);
}


.hero-btn{
    border:2px solid transparent;

    background:
        linear-gradient(#0a0f24,#0a0f24) padding-box,
        linear-gradient(
            90deg,
            #7f00ff,
            #00d4ff,
            #ff00ff,
            #7f00ff
        ) border-box;

    background-size:
        100% 100%,
        300% 100%;

    animation:portalEnergy 4s linear infinite;
}

@keyframes portalEnergy{
    from{
        background-position:0 0,0 0;
    }
    to{
        background-position:0 0,300% 0;
    }
}


/* ========================= */
/* PANTALLA CHICA */
/* ========================= */

@media (max-width:1400px){

    .hero-logo{
        width:380px;
    }
    .hero-content{
        margin-top:-60px;
    }

    .time-box{
        width:120px;
        height:120px;
    }

    .number{
        font-size:3.5rem;
    }

}


@media (max-height:800px){

    .hero-content{

        transform:scale(.9);
        transform-origin:left center;
    }

}



/* ========================= */
/* TABLETS */
/* ========================= */

@media (max-width:1200px){

    .hero-content{
        width:600px;
        margin-left:50px;
    }

    .hero-logo{
        width:420px;
    }

    .hero-subtitle{
        font-size:2.5rem;
    }

    .countdown{
        gap:15px;
    }

    .time-box{
        width:120px;
        height:120px;
    }

    .number{
        font-size:4rem;
    }
}



/* ========================= */
/* TELEFONOS GRANDES */
/* ========================= */

@media (max-width:991px){

    .hero{
        background-position:70% center;
    }

    .hero-content{
        width:100%;
        margin-left:0;
        padding:0 25px;
        text-align:center;
    }

    .hero-logo{
        width:350px;
        max-width:100%;
    }

    .hero-subtitle{
        font-size:2.3rem;
    }

    .countdown{
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }

    .time-box{
        width:130px;
        height:130px;
    }

    .hero-btn{
        margin-left:auto;
        margin-right:auto;
    }
}

/* ========================= */
/* TELEFONOS CHICOS */
/* ========================= */

@media (max-width:576px){

    .hero-content{
        padding:0 15px;
    }

    .hero-logo{
        width:280px;
    }

    .hero-subtitle{
        font-size:2rem;
        line-height:1.1;
    }

    .countdown{
        gap:10px;
    }

    .time-box{
        width:calc(50% - 5px);
        height:110px;
    }

    .number{
        font-size:3rem;
    }

    .label{
        font-size:.75rem;
        letter-spacing:1px;
    }

    .hero-btn{
        width:100%;
        max-width:320px;
        height:65px;
    }

    .btn-text{
        font-size:15px;
    }
}