/*======================================
BODY
======================================*/

html{

    overflow-x:hidden;

}

body{

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

    color:var(--white);

    overflow-x:hidden;

    background:

        radial-gradient(circle at top right,#164dff33,transparent 35%),

        radial-gradient(circle at bottom left,#00d5ff22,transparent 30%),

        #050816;

}

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

img{

    display:block;

    max-width:100%;

}

/*======================================
CONTENEDOR
======================================*/

.container{

    width:min(var(--container),92%);

    margin:auto;

}

/*======================================
SECCIONES
======================================*/

section{

    position:relative;

    padding:120px 0;

}

/*======================================
TIPOGRAFÍA
======================================*/

h1{

    font-size:72px;

    font-weight:900;

    line-height:1.05;

}

h2{

    font-size:48px;

}

p{

    color:var(--text);

    line-height:1.8;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transition:var(--transition);

}

.btn-primary{

    padding:18px 34px;

    border-radius:18px;

    color:#fff;

    background:linear-gradient(90deg,#ff7a00,#ff5200);

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-outline{

    padding:18px 34px;

    border-radius:18px;

    border:1px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/*======================================
FONDO DECORATIVO
======================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background-image:

        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.35;

}

/*======================================
TOAST
======================================*/

.toast{

    position:fixed;

    top:30px;

    right:30px;

    width:360px;

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px 20px;

    border-radius:18px;

    background:#10192d;

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

    border-left:5px solid transparent;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    color:#fff;

    z-index:99999;

    opacity:0;

    transform:translateX(420px);

    transition:.45s;

}

.toast.show{

    opacity:1;

    transform:translateX(0);

}

.toast.success{

    border-left-color:#22c55e;

}

.toast.error{

    border-left-color:#ef4444;

}

.toast-icon{

    font-size:30px;

}

.toast.success .toast-icon{

    color:#22c55e;

}

.toast.error .toast-icon{

    color:#ef4444;

}

.toast-content h4{

    margin-bottom:6px;

    font-size:18px;

    font-weight:700;

}

.toast-content p{

    margin:0;

    font-size:14px;

    line-height:1.5;

    color:#bfc9da;

}

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

@media(max-width:768px){

    .toast{

        top:20px;

        left:15px;

        right:15px;

        width:calc(100% - 30px);

        transform:translateY(-150px);

    }

    .toast.show{

        transform:translateY(0);

    }

}