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

html{
    scroll-behavior:smooth;
}

body{

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

    color:#fff;

    background:
    radial-gradient(circle at top,#2c2208 0%,#141414 35%,#080808 100%);

    min-height:100vh;

    overflow-x:hidden;

}

/*==============================
    CONTAINER
==============================*/

.container{

    width:min(92%,1200px);

    margin:auto;

}

/*==============================
    HEADER
==============================*/

header{

    padding:30px 0;

}

.logo{

    font-size:clamp(28px,4vw,42px);

    font-weight:700;

    color:#FFD54A;

    letter-spacing:2px;

}

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

.hero{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px 0 80px;

    min-height:calc(100vh - 120px);

}

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

.card{

    width:100%;

    max-width:820px;

    padding:clamp(25px,4vw,55px);

    border-radius:28px;

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

    border:1px solid rgba(255,212,74,.15);

    backdrop-filter:blur(22px);

    box-shadow:

        0 20px 60px rgba(0,0,0,.45),

        inset 0 1px 1px rgba(255,255,255,.08);

}

/*==============================
    TITLES
==============================*/

h1{

    font-size:clamp(30px,5vw,46px);

    margin-bottom:18px;

    line-height:1.2;

}

h2{

    margin-top:40px;

    margin-bottom:18px;

    color:#FFD54A;

    font-size:clamp(20px,3vw,28px);

}

.subtitle{

    color:#d6d6d6;

    line-height:1.9;

    font-size:clamp(15px,2vw,18px);

}

/*==============================
    LIST
==============================*/

ul{

    padding-left:22px;

    color:#d2d2d2;

    line-height:2;

}

li{

    margin-bottom:8px;

}

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

form{

    margin-top:45px;

}

.field{

    margin-bottom:24px;

}

label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:#FFD54A;

}

input,
textarea{

    width:100%;

    background:#121212;

    color:#fff;

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

    border-radius:16px;

    padding:18px;

    font-size:16px;

    transition:.3s;

}

textarea{

    resize:vertical;

    min-height:160px;

}

input:focus,
textarea:focus{

    outline:none;

    border-color:#FFD54A;

    box-shadow:

        0 0 0 4px rgba(255,213,74,.12),

        0 0 20px rgba(255,213,74,.18);

}

/*==============================
    BUTTON
==============================*/

button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:16px;

    background:linear-gradient(

        135deg,

        #FFD54A,

        #F4B400

    );

    color:#111;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:

        0 12px 35px rgba(244,180,0,.35);

}

button:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 45px rgba(244,180,0,.55);

}

/*==============================
    INFO BOX
==============================*/

.info{

    margin-top:45px;

    padding:24px;

    border-radius:18px;

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

    border-left:5px solid #FFD54A;

    color:#d7d7d7;

    line-height:1.9;

}

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

footer{

    padding:40px 20px;

    text-align:center;

    color:#8d8d8d;

    font-size:14px;

}

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

@media (max-width:992px){

    .hero{

        padding:30px 20px 70px;

    }

}

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

@media (max-width:768px){

    header{

        text-align:center;

    }

    .hero{

        min-height:auto;

        padding:10px 15px 50px;

    }

    .card{

        border-radius:22px;

        padding:28px;

    }

    ul{

        padding-left:18px;

    }

    input,
    textarea{

        padding:16px;

        font-size:15px;

    }

    button{

        padding:16px;

        font-size:16px;

    }

}

/*==============================
    SMALL DEVICES
==============================*/

@media (max-width:480px){

    .card{

        padding:22px;

    }

    .info{

        padding:18px;

    }

    h1{

        text-align:center;

    }

    .subtitle{

        text-align:center;

    }

}

/*==============================
    LARGE SCREENS
==============================*/

@media (min-width:1600px){

    .card{

        max-width:950px;

    }

}

/*=========================================
      PREMIUM ALERT NEW COIN / CITMEDIC
=========================================*/

.alert-modal{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:flex-start;
    padding-top:35px;
    z-index:999999;
    pointer-events:none;
}

.alert{

    width:min(92%,470px);

    display:flex;
    align-items:center;
    gap:18px;

    padding:18px;

    border-radius:22px;

    position:relative;
    overflow:hidden;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    background:
    linear-gradient(145deg,
    rgba(24,29,42,.96),
    rgba(13,18,29,.92));

    box-shadow:
    0 30px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04);

    animation:alertShow .45s cubic-bezier(.18,.89,.32,1.28);

    pointer-events:auto;

}


/* brillo */

.alert::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform:skewX(-25deg);

    animation:alertGlow 3.2s linear infinite;

}


/* linea superior */

.alert::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:linear-gradient(
        90deg,
        #1DA1F2,
        #FFD15C,
        #2CEAA3
    );

}



.alert-i{

    width:70px;

    min-width:70px;

    height:70px;

    border-radius:20px;

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

    background:linear-gradient(
    145deg,
    rgba(255,209,92,.20),
    rgba(255,209,92,.06));

    border:1px solid rgba(255,209,92,.18);

    box-shadow:0 0 35px rgba(255,209,92,.18);

}

.alert-i img{

    width:40px;
    height:40px;
    object-fit:contain;

    animation:iconPulse 2s infinite;

}


.alert-text{

    display:flex;
    flex-direction:column;
    gap:6px;

}

#txt1{

    font-size:1.08rem;

    color:#fff;

    font-weight:800;

}

#txt2{

    color:#c7d2e4;

    line-height:1.6;

    font-size:.94rem;

}


/*=====================
        LIGHT
=====================*/

body.light-theme .alert{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.92),
    rgba(246,248,252,.96));

    border:1px solid rgba(0,0,0,.05);

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

}

body.light-theme #txt1{

    color:#111827;

}

body.light-theme #txt2{

    color:#4b5563;

}

body.light-theme .alert-i{

    background:linear-gradient(
    145deg,
    rgba(255,209,92,.25),
    rgba(255,209,92,.12));

}


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

@keyframes alertShow{

0%{

opacity:0;

transform:
translateY(-45px)
scale(.85);

}

100%{

opacity:1;

transform:
translateY(0)
scale(1);

}

}

@keyframes iconPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.12);

}

}

@keyframes alertGlow{

0%{

left:-120%;

}

100%{

left:150%;

}

}
/* Barra inferior */

.alert-progress{

    position:absolute;

    bottom:0;
    left:0;

    width:100%;
    height:3px;

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

}

.alert-progress span{

    display:block;

    width:100%;
    height:100%;

    background:linear-gradient(
    90deg,
    #1DA1F2,
    #FFD15C,
    #2CEAA3);

}