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

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
}


/* =========================================
   BACKGROUND
========================================= */

body {
    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(232, 186, 91, 0.45),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #3d9ba8 0%,
            #287d92 45%,
            #205c78 100%
        );

    background-attachment: fixed;
}


/* =========================================
   MAIN
========================================= */

.construction {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    padding: 40px 20px;

    position: relative;

    overflow: hidden;
}


/* =========================================
   DECORACIÓN
========================================= */

.stars {

    display: flex;

    gap: 7px;

    margin-bottom: 12px;

    color: rgba(24, 67, 82, 0.65);

    font-size: 10px;

}

.stars span {

    display: inline-block;

    animation: floating 3s ease-in-out infinite;

}

.stars span:nth-child(2) {
    animation-delay: .3s;
}

.stars span:nth-child(3) {
    animation-delay: .6s;
}


/* =========================================
   SEPARATOR
========================================= */

.separator {

    width: 250px;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    opacity: .45;
}

.separator span {

    height: 1px;

    flex: 1;

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

}

.separator i {

    width: 4px;
    height: 4px;

    border-radius: 50%;

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

}


/* =========================================
   TITLE
========================================= */

h1 {

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

    font-size: clamp(
        38px,
        6vw,
        68px
    );

    font-weight: 300;

    letter-spacing: 5px;

    line-height: 1.1;

    text-transform: uppercase;

    color: #ffffff;

    text-shadow:
        1px 1px 0 rgba(0,0,0,.15);

}


/* =========================================
   SUBTITLE
========================================= */

.subtitle {

    margin-top: 20px;

    font-size: 15px;

    font-weight: 300;

    color: rgba(255,255,255,.78);

    letter-spacing: .2px;

}


/* =========================================
   FORM
========================================= */

.notify-form {

    width: min(100%, 340px);

    height: 48px;

    display: flex;

    margin-top: 30px;

    background: #ffffff;

    border-radius: 30px;

    overflow: hidden;

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

}


/* INPUT */

.notify-form input {

    flex: 1;

    min-width: 0;

    border: none;

    outline: none;

    padding: 0 20px;

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

    font-size: 11px;

    color: #555;

}

.notify-form input::placeholder {

    color: #aaa;

}


/* BUTTON */

.notify-form button {

    width: 55px;

    border: none;

    background: transparent;

    color: #aaa;

    cursor: pointer;

    transition: .25s;

}

.notify-form button:hover {

    color: #277d91;

    transform: translateX(3px);

}


/* =========================================
   SOCIAL
========================================= */

.social {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin-top: 45px;

}

.social a {

    color: rgba(255,255,255,.8);

    font-size: 13px;

    text-decoration: none;

    transition:
        transform .25s ease,
        color .25s ease;

}

.social a:hover {

    color: #ffffff;

    transform: translateY(-3px);

}


/* =========================================
   FOOTER
========================================= */

footer {

    margin-top: 35px;

    font-size: 9px;

    color: rgba(255,255,255,.45);

    letter-spacing: .3px;

}


/* =========================================
   ANIMATION
========================================= */

@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }

}


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

@media (max-width: 768px) {

    .construction {
        padding: 30px 20px;
    }

    h1 {

        font-size: clamp(
            34px,
            8vw,
            52px
        );

        letter-spacing: 3px;

    }

    .subtitle {

        font-size: 13px;

    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 480px) {

    .construction {

        min-height: 100svh;

        padding: 25px 18px;

    }

    .separator {

        width: 180px;

    }

    h1 {

        font-size: 34px;

        letter-spacing: 2px;

        max-width: 100%;

    }

    .subtitle {

        max-width: 310px;

        line-height: 1.7;

        font-size: 12px;

    }

    .notify-form {

        width: 100%;

        max-width: 330px;

    }

    .social {

        gap: 18px;

        margin-top: 38px;

    }

    footer {

        margin-top: 30px;

        font-size: 8px;

    }

}