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

*{

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

body{

    background:#020611;

    overflow-x:hidden;

    font-family:Arial, sans-serif;
}

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

.main-header{

    position:relative;

    z-index:999999;

    width:100%;

    padding:18px 35px 14px;

    background:transparent;
}

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

.header-container{

    width:100%;

    max-width:1700px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;
}

/* =========================================
LOGO
========================================= */

.logo-area{

    width:230px;

    flex-shrink:0;
}

.logo-area img{

    width:100%;

    height:auto;

    display:block;
}
/* =========================================
DESKTOP LABEL ADJUSTMENTS
========================================= */

/* =========================================
NODE 1
SOPORTE REMOTO
========================================= */

.node-1 .brain-node-label{

    margin-left:-60px;

    margin-top:-40px;

    white-space:nowrap;
}

/* =========================================
NODE 2
SIIGO ASPEL
========================================= */

.node-2 .brain-node-label{

    margin-left:12px;
}

/* =========================================
NODE 3
BIG DATA
========================================= */

.node-3 .brain-node-label{

    margin-left:14px;
}

/* =========================================
NODE 4
INFRAESTRUCTURA
========================================= */

.node-4 .brain-node-label{

    margin-left:-195px;
}

/* =========================================
NODE 5
CIBERSEGURIDAD
========================================= */

.node-5 .brain-node-label{

    margin-left:-185px;
}

/* =========================================
NODE 6
CONSULTORIA
========================================= */

.node-6 .brain-node-label{

    margin-left:-160px;
}

/* =========================================
NODE 7
ERP
========================================= */

.node-7 .brain-node-label{

    margin-left:-90px;
}

/* =========================================
NODE 8
PROMOCIONES
========================================= */

.node-8 .brain-node-label{

    margin-left:14px;
}

/* =========================================
NODE 9
EQUIPO IDEAL
========================================= */

.node-9 .brain-node-label{

    margin-left:14px;
}
/* =========================================
MOBILE TOGGLE
========================================= */

.mobile-toggle{

    display:none;

    width:50px;

    height:50px;

    border-radius:14px;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#ffffff;

    font-size:28px;

    position:relative;

    z-index:9999999;

    background:
    linear-gradient(
        180deg,
        rgba(13,25,50,.92),
        rgba(4,10,20,.97)
    );

    border:1px solid rgba(90,170,255,.45);

    box-shadow:
    0 0 18px rgba(0,140,255,.18);
}

/* =========================================
NAV
========================================= */

.main-nav{

    flex:1;

    min-height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 30px;

    border-radius:24px;

    position:relative;

    background:
    linear-gradient(
        180deg,
        rgba(13,25,50,.92),
        rgba(4,10,20,.97)
    );

    border:1px solid rgba(90,170,255,.45);

    box-shadow:
    0 0 18px rgba(0,140,255,.18),
    0 0 35px rgba(0,140,255,.10),
    inset 0 0 25px rgba(0,140,255,.05);

    backdrop-filter:blur(10px);
}

/* =========================================
TOP GLOW
========================================= */

.main-nav::before{

    content:"";

    position:absolute;

    top:-2px;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:3px;

    border-radius:50px;

    background:#3b9cff;

    box-shadow:
    0 0 15px #3b9cff,
    0 0 35px #3b9cff;
}

/* =========================================
MENU
========================================= */

.main-nav ul{

    display:flex;

    align-items:center;

    gap:38px;

    list-style:none;
}

/* =========================================
LINKS
========================================= */

.main-nav ul li a{

    color:#f3f7ff;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    transition:.35s ease;

    position:relative;
}

.main-nav ul li a:hover{

    color:#57a6ff;
}

/* =========================================
ACTIVE LINE
========================================= */

.main-nav ul li:first-child a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:100%;

    height:2px;

    background:#3b9cff;

    box-shadow:
    0 0 10px #3b9cff,
    0 0 25px #3b9cff;
}

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

.tickets-btn{

    padding:14px 30px;

    border-radius:16px;

    background:
    linear-gradient(
        180deg,
        #3e8cff,
        #2567e8
    );

    color:#ffffff !important;

    font-weight:600;

    white-space:nowrap;

    box-shadow:
    0 0 20px rgba(59,156,255,.35);
}

.tickets-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 30px rgba(59,156,255,.60);
}
/* =========================================
MOBILE TICKET
========================================= */

.mobile-ticket{

    display:none;
}
/* =========================================
RESPONSIVE
========================================= */

@media screen and (max-width:1200px){

    .logo-area{

        width:190px;
    }

    .main-nav ul{

        gap:20px;
    }

}

@media screen and (max-width:768px){

    .main-header{

        padding:12px;
    }

    .logo-area{

        width:150px;
    }

    /* =====================================
    HIDE HAMBURGER
    ===================================== */

    .mobile-toggle{

        display:none;
    }

    /* =====================================
    HIDE NAV
    ===================================== */

    .main-nav{

        display:none;
    }

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

   .mobile-ticket{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex:1;
}

    .mobile-ticket .tickets-btn{

        padding:14px 26px;

        border-radius:18px;

        font-size:16px;
    }

    .main-nav.active{

        display:none;
    }

}

/* =========================================
INTERNAL PAGES
========================================= */

.internal-page{

    width:100%;

    min-height:100vh;

    padding:40px 40px 120px;

    background:
    radial-gradient(
        circle at top,
        rgba(20,40,80,.35),
        #020611 55%
    );
}

.internal-container{

    max-width:1400px;

    margin:auto;

    padding-top:40px;
}

.internal-page h1{

    color:#ffffff;

    font-size:48px;

    font-weight:700;

    letter-spacing:2px;

    text-align:center;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(56,189,248,.35);
}
/* =========================================
FOOTER
========================================= */

#main-footer{

    position:relative;

    width:100%;

    height:90px;

    overflow:hidden;

    background:#020611;
}

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

.footer-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    opacity:.95;
}

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

.footer-content{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    max-width:1700px;

    margin:auto;

    padding:0 40px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

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

.footer-left,
.footer-right{

    color:#d7ecff;

    font-size:12px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    text-shadow:
    0 0 12px rgba(56,189,248,.35);
}
/* =========================================
RESPONSIVE
========================================= */

@media screen and (max-width:768px){

    #main-footer{

        height:75px;
    }

    .footer-content{

        padding:0 20px;

        flex-direction:column;

        justify-content:center;

        gap:6px;
    }

    .footer-left,
    .footer-right{

        font-size:10px;

        text-align:center;
    }
}
/* =========================================
HERO SYSTEM
========================================= */

#hero-system{

    position:relative;

    width:100%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#020611;
}
/* =========================================
SIDE
========================================= */

.hero-side{

    position:relative;

    width:100%;

    height:100%;
}

/* =========================================
CENTER
========================================= */

.hero-center{

    position:relative;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:40px;
}

/* =========================================
BRAIN AREA
========================================= */

#brain-area{

    position:relative;

    width:100%;

    max-width:1280px;

   height:560px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* =========================================
SCENE IMAGE
========================================= */

#hero-scene{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    transition:
    opacity .8s ease-in-out;
}
/* =========================================
RESPONSIVE
========================================= */

@media screen and (max-width:768px){

    #brain-area{

        height:420px;
    }
}
/* =========================================
GLOBAL LOCK
========================================= */

html,
body{

    width:100%;

    overflow-x:hidden;
}
/* =========================================
BRAIN NODES
========================================= */

#brain-nodes{

    position:absolute;

    inset:0;

    z-index:20;
}

/* =========================================
NODE
========================================= */

.brain-node{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:140px;
}

/* =========================================
ICON
========================================= */

.brain-node-icon{

    width:clamp(20px, 2.8vw, 42px);
    height:clamp(20px, 2.8vw, 42px);

    object-fit:contain;

    transition:
    transform .3s ease,
    filter .3s ease;
}

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

.brain-node:hover .brain-node-icon{

    transform:scale(1.12);

    filter:
    drop-shadow(0 0 12px #38bdf8)
    drop-shadow(0 0 25px #38bdf8);
}

/* =========================================
NODE LABEL
========================================= */

.brain-node-label{

    width:100%;

    margin-top:8px;

    color:#d7ecff;

    font-size:clamp(7px, .65vw, 12px);

    font-weight:600;

    letter-spacing:1px;

    line-height:1.2;

    text-align:left;

    text-transform:uppercase;

    white-space:nowrap;

    text-shadow:
    0 0 10px rgba(56,189,248,.35);
}

/* =========================================
DESKTOP NODES
========================================= */



/* =========================================
DESKTOP NODE 1
SOPORTE REMOTO
ICON POSITION
========================================= */

.node-1{

    top:42px;

    left:47.5%;

    transform:translateX(-50%);
}

/* =========================================
DESKTOP NODE 1
SOPORTE REMOTO
TEXT LABEL
========================================= */

.node-1 .brain-node-label{

    margin-left:-90px;

    margin-top:-100px;
}



/* =========================================
DESKTOP NODE 2
SIIGO ASPEL
ICON POSITION
========================================= */

.node-2{

    top:100px;

    right:428px;
}



/* =========================================
DESKTOP NODE 3
BIG DATA
ICON POSITION
========================================= */

.node-3{

    top:246px;

    right:330px;
}



/* =========================================
DESKTOP NODE 4
INFRAESTRUCTURA
ICON POSITION
========================================= */

.node-4{

    top:98px;

    left:336px;
}



/* =========================================
DESKTOP NODE 5
CIBERSEGURIDAD
ICON POSITION
========================================= */

.node-5{

    top:397px;

    left:287px;
}



/* =========================================
DESKTOP NODE 6
CONSULTORIA
ICON POSITION
========================================= */

.node-6{

    top:481px;

    left:387px;
}



/* =========================================
DESKTOP NODE 7
ERP
ICON POSITION
========================================= */

.node-7{

    top:245px;

    left:29%;

    transform:translateX(-50%);
}



/* =========================================
DESKTOP NODE 8
PROMOCIONES
ICON POSITION
========================================= */

.node-8{

    top:483px;

    right:448px;
}



/* =========================================
DESKTOP NODE 9
EQUIPO IDEAL
ICON POSITION
========================================= */

.node-9{

    top:398px;

    right:375px;
}



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

@media screen and (max-width:768px){



    /* =====================================
    MOBILE
    BRAIN AREA
    ===================================== */

    #brain-area{

        height:560px;
    }



    /* =====================================
    MOBILE
    HERO SCENE
    ===================================== */

  #hero-scene{

    transform:scale(1.65);

    transform-origin:center;
}



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

    .brain-node{

    width:135px;

    gap:4px;
}



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

    .brain-node-icon{

        width:24px;
        height:24px;
    }



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

    .brain-node-label{

        font-size:7px;

        line-height:1.1;

        letter-spacing:.5px;
    }



    /* =====================================
    MOBILE NODE 1
    SOPORTE REMOTO
    TEXT LABEL
    ===================================== */

    .node-1 .brain-node-label{

        margin-top:-50px;

        margin-left:-50px;

        white-space:nowrap;
    }



    /* =====================================
    MOBILE NODE 2
    SIIGO ASPEL
    TEXT LABEL
    ===================================== */

    .node-2 .brain-node-label{

    margin-left:10px;

    white-space:nowrap;
}


    /* =====================================
    MOBILE NODE 3
    BIG DATA
    TEXT LABEL
    ===================================== */

    .node-3 .brain-node-label{

        margin-left:12px;
    }



    /* =====================================
    MOBILE NODE 9
    EQUIPO IDEAL
    TEXT LABEL
    ===================================== */

    .node-9 .brain-node-label{

        margin-left:08px;
    }



    /* =====================================
    MOBILE NODE 8
    PROMOCIONES
    TEXT LABEL
    ===================================== */

    .node-8 .brain-node-label{

        margin-left:12px;
    }



    /* =====================================
    MOBILE NODE 4
    INFRAESTRUCTURA
    TEXT LABEL
    ===================================== */

    .node-4 .brain-node-label{

        margin-left:-110px;
    }



    /* =====================================
    MOBILE NODE 7
    ERP
    TEXT LABEL
    ===================================== */

    .node-7 .brain-node-label{

        margin-left:-55px;
    }



    /* =====================================
    MOBILE NODE 5
    CIBERSEGURIDAD
    TEXT LABEL
    ===================================== */

    .node-5 .brain-node-label{

        margin-left:-100px;
    }



    /* =====================================
    MOBILE NODE 6
    CONSULTORIA
    TEXT LABEL
    ===================================== */

    .node-6 .brain-node-label{

        margin-left:-90px;
    }



    /* =====================================
    MOBILE NODE 1
    SOPORTE REMOTO
    ICON POSITION
    ===================================== */

    .node-1{

        top:160px;

        left:53.5%;

        transform:translateX(-50%);
    }



    /* =====================================
    MOBILE NODE 2
    SIIGO ASPEL
    ICON POSITION
    ===================================== */

    .node-2{

        top:188px;

        right:25px;
    }



    /* =====================================
    MOBILE NODE 3
    BIG DATA
    ICON POSITION
    ===================================== */

    .node-3{

        top:262px;

        right:-13px;
    }



    /* =====================================
    MOBILE NODE 4
    INFRAESTRUCTURA
    ICON POSITION
    ===================================== */

    .node-4{

        top:188px;

        left:35px;
    }



    /* =====================================
    MOBILE NODE 5
    CIBERSEGURIDAD
    ICON POSITION
    ===================================== */

    .node-5{

        top:338px;

        left:13px;
    }



    /* =====================================
    MOBILE NODE 6
    CONSULTORIA
    ICON POSITION
    ===================================== */

    .node-6{

        top:380px;

        left:63px;
    }



    /* =====================================
    MOBILE NODE 7
    ERP
    ICON POSITION
    ===================================== */

    .node-7{

        top:260px;

        left:87px;

        transform:translateX(-50%);
    }



    /* =====================================
    MOBILE NODE 8
    PROMOCIONES
    ICON POSITION
    ===================================== */

    .node-8{

        top:379px;

        right:40px;
    }



    /* =====================================
    MOBILE NODE 9
    EQUIPO IDEAL
    ICON POSITION
    ===================================== */

    .node-9{

        top:338px;

        right:2px;
    }

}
/* =========================================
INFO MODAL
========================================= */

#info-modal{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding-right:140px;

    z-index:99999999;

    opacity:0;

    visibility:hidden;

    transition:
    opacity .45s ease,
    visibility .45s ease;
}

/* =========================================
ACTIVE
========================================= */

#info-modal.active{

    opacity:1;

    visibility:visible;
}

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

#info-overlay{

    position:absolute;

    inset:0;

   background:
rgba(2,6,17,.40);

backdrop-filter:blur(2px);
}

/* =========================================
MODAL BOX
========================================= */

#info-modal-box{

    position:relative;

    z-index:2;

    width:480px;

    min-height:500px;

    padding:34px;

    border-radius:34px;

    background:
    linear-gradient(
        180deg,
        rgba(13,25,50,.96),
        rgba(4,10,20,.98)
    );

    border:1px solid rgba(0,157,255,.45);

    box-shadow:
    0 0 35px rgba(0,157,255,.22),
    0 0 70px rgba(0,157,255,.12);

    display:flex;

    flex-direction:column;

    gap:18px;

    transform:
    scale(.92);

    transition:
    transform .4s ease;
}

/* =========================================
MODAL OPEN
========================================= */

#info-modal.active #info-modal-box{

    transform:
    scale(1);
}

/* =========================================
CLOSE
========================================= */

#info-close{

    position:absolute;

    top:18px;

    right:22px;

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#ffffff;

    font-size:18px;

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

    transition:.3s ease;
}

#info-close:hover{

    background:
    rgba(0,157,255,.22);

    transform:
    scale(1.08);
}

/* =========================================
LOGO
========================================= */

.info-logo-area{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;
}

#info-logo{

    width:180px;

    height:auto;

    object-fit:contain;
}

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

.info-small-title{

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.7;
}

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

#info-main-title{

    color:#ffffff;

    font-size:34px;

    line-height:1.1;

    font-weight:700;

    text-transform:uppercase;
}

/* =========================================
DESCRIPTION
========================================= */

#info-description{

    color:#ffffff;

    font-size:15px;

    line-height:1.7;

    opacity:.88;
}

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

.info-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding-left:18px;

    color:#ffffff;

    font-size:14px;

    line-height:1.5;
}

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

#info-button{

    margin-top:auto;

    width:100%;

    padding:18px 24px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        #009dff,
        #0066ff
    );

    color:#ffffff;

    text-decoration:none;

    text-align:center;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.35s ease;

    box-shadow:
    0 0 22px rgba(0,157,255,.28);
}

#info-button:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 0 35px rgba(0,157,255,.55);
}
/* =========================================
MOBILE MODAL FIX
========================================= */

@media screen and (max-width:768px){

    #info-modal{

        justify-content:center;

        padding-right:0;
    }

    #info-modal-box{

        width:92%;

        min-height:auto;

        padding:34px 26px;
    }

}
/* =========================================
SUPPORT MODAL
========================================= */

#support-modal{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding-right:140px;

    z-index:99999999;

    opacity:0;

    visibility:hidden;

    transition:
    opacity .45s ease,
    visibility .45s ease;
}

/* ACTIVE */

#support-modal.active{

    opacity:1;

    visibility:visible;
}

/* OVERLAY */

#support-overlay{

    position:absolute;

    inset:0;

    background:
    rgba(2,6,17,.40);

    backdrop-filter:blur(2px);
}

/* MODAL BOX */

#support-modal-box{

    position:relative;

    z-index:2;

    width:480px;

    min-height:500px;

    padding:34px;

    border-radius:34px;

    background:
    linear-gradient(
        180deg,
        rgba(13,25,50,.96),
        rgba(4,10,20,.98)
    );

    border:1px solid rgba(0,157,255,.45);

    box-shadow:
    0 0 35px rgba(0,157,255,.22),
    0 0 70px rgba(0,157,255,.12);

    display:flex;

    flex-direction:column;

    gap:18px;

    transform:scale(.92);

    transition:
    transform .4s ease;
}

/* OPEN */

#support-modal.active #support-modal-box{

    transform:scale(1);
}

/* CLOSE */

#support-close{

    position:absolute;

    top:18px;

    right:22px;

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#ffffff;

    font-size:18px;

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

    transition:.3s ease;
}

#support-close:hover{

    background:
    rgba(0,157,255,.22);

    transform:scale(1.08);
}

/* LOGO */

.support-logo-area{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;
}

#support-logo{

    width:180px;

    height:auto;

    object-fit:contain;
}

/* SMALL TITLE */

.support-small-title{

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.7;
}

/* MAIN TITLE */

#support-main-title{

    color:#ffffff;

    font-size:30px;

    line-height:1.08;

    font-weight:700;

    text-transform:uppercase;

    max-width:340px;
}
/* DESCRIPTION */

#support-description{

    color:#ffffff;

    font-size:15px;

    line-height:1.7;

    opacity:.88;
}

/* LIST */

.support-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding-left:18px;

    color:#ffffff;

    font-size:14px;

    line-height:1.5;
}

/* DOWNLOADS */

.support-downloads{

    display:flex;

    gap:10px;

    margin-top:4px;
}

/* BUTTONS */

.support-downloads a{

    flex:1;

    padding:12px 10px;

    border-radius:14px;

    text-align:center;

    text-decoration:none;

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

/* ANYDESK */

.support-downloads a:nth-child(1){

    background:
    linear-gradient(
        180deg,
        #ff8a00,
        #ff6200
    );
}

/* TEAMVIEWER */

.support-downloads a:nth-child(2){

    background:
    linear-gradient(
        180deg,
        #009dff,
        #0066ff
    );
}

/* RUSTDESK */

.support-downloads a:nth-child(3){

    background:
    linear-gradient(
        180deg,
        #00c16a,
        #00a651
    );
}

/* MAIN BUTTON */

.support-button{

    margin-top:auto;

    width:100%;

    padding:18px 24px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        #009dff,
        #0066ff
    );

    color:#ffffff;

    text-decoration:none;

    text-align:center;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.35s ease;

    box-shadow:
    0 0 22px rgba(0,157,255,.28);
}

.support-button:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 0 35px rgba(0,157,255,.55);
}
/* RANDOM ICONS */

.support-random-icons{

    display:flex;

    gap:12px;

    align-items:center;

    margin-top:-4px;

    margin-bottom:10px;
}

.support-random-icons img{

    width:58px;

    height:58px;

    object-fit:contain;

    border-radius:14px;

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

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

    padding:6px;

    transition:.3s ease;
}

.support-random-icons img:hover{

    transform:scale(1.06);

    border:
    1px solid rgba(0,157,255,.35);

    box-shadow:
    0 0 18px rgba(0,157,255,.18);
}
/* MOBILE */

@media screen and (max-width:768px){

    #support-modal{

        justify-content:center;

        padding-right:0;
    }

    #support-modal-box{

        width:92%;

        min-height:auto;

        padding:34px 26px;
    }

    .support-downloads{

        flex-direction:column;
    }
}
/* =========================================
BACKUP MODAL
========================================= */

#backup-modal{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding-right:140px;

    z-index:99999999;

    opacity:0;

    visibility:hidden;

    transition:
    opacity .45s ease,
    visibility .45s ease;
}

/* ACTIVE */

#backup-modal.active{

    opacity:1;

    visibility:visible;
}

/* OVERLAY */

#backup-overlay{

    position:absolute;

    inset:0;

    background:
    rgba(2,6,17,.40);

    backdrop-filter:blur(2px);
}

/* MODAL BOX */

#backup-modal-box{

    position:relative;

    z-index:2;

    width:480px;

    min-height:500px;

    padding:34px;

    border-radius:34px;

    background:
    linear-gradient(
        180deg,
        rgba(10,20,40,.96),
        rgba(3,8,18,.98)
    );

    border:
    1px solid rgba(0,255,220,.25);

    box-shadow:
    0 0 35px rgba(0,255,220,.16),
    0 0 70px rgba(0,140,255,.10);

    display:flex;

    flex-direction:column;

    gap:18px;

    transform:scale(.92);

    transition:
    transform .4s ease;
}

/* OPEN */

#backup-modal.active #backup-modal-box{

    transform:scale(1);
}

/* CLOSE */

#backup-close{

    position:absolute;

    top:18px;

    right:22px;

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#ffffff;

    font-size:18px;

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

    transition:.3s ease;
}

#backup-close:hover{

    background:
    rgba(0,255,220,.14);

    transform:scale(1.08);
}

/* LOGO */

.backup-logo-area{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;
}

#backup-logo{

    width:180px;

    height:auto;

    object-fit:contain;
}

/* SMALL TITLE */

.backup-small-title{

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.7;
}

/* RANDOM ICONS */

.backup-random-icons{

    display:flex;

    gap:12px;

    align-items:center;

    margin-top:-4px;

    margin-bottom:10px;
}

.backup-random-icons img{

    width:58px;

    height:58px;

    object-fit:contain;

    border-radius:14px;

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

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

    padding:6px;

    transition:.3s ease;
}

.backup-random-icons img:hover{

    transform:scale(1.06);

    border:
    1px solid rgba(0,255,220,.25);

    box-shadow:
    0 0 18px rgba(0,255,220,.16);
}

/* MAIN TITLE */

#backup-main-title{

    color:#ffffff;

    font-size:30px;

    line-height:1.08;

    font-weight:700;

    text-transform:uppercase;

    max-width:360px;
}

/* DESCRIPTION */

#backup-description{

    color:#ffffff;

    font-size:15px;

    line-height:1.7;

    opacity:.88;
}

/* LIST */

.backup-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding-left:18px;

    color:#ffffff;

    font-size:14px;

    line-height:1.5;
}

/* TAGS */

.backup-tags{

    display:flex;

    gap:10px;

    flex-wrap:wrap;
}

.backup-tags span{

    padding:10px 16px;

    border-radius:14px;

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

    border:
    1px solid rgba(0,255,220,.18);

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;
}

/* BUTTON */

.backup-button{

    margin-top:auto;

    width:100%;

    padding:18px 24px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        #00e5ff,
        #004cff
    );

    color:#ffffff;

    text-decoration:none;

    text-align:center;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.35s ease;

    box-shadow:
    0 0 22px rgba(0,255,220,.18);
}

.backup-button:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 0 35px rgba(0,255,220,.35);
}

/* MOBILE */

@media screen and (max-width:768px){

    #backup-modal{

        justify-content:center;

        padding-right:0;
    }

    #backup-modal-box{

        width:92%;

        min-height:auto;

        padding:34px 26px;
    }

    .backup-tags{

        justify-content:center;
    }
}
/* =========================================
EQUIPO MODAL
========================================= */

#equipo-modal{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding-right:140px;

    z-index:99999999;

    opacity:0;

    visibility:hidden;

    transition:
    opacity .45s ease,
    visibility .45s ease;
}

/* ACTIVE */

#equipo-modal.active{

    opacity:1;

    visibility:visible;
}

/* OVERLAY */

#equipo-overlay{

    position:absolute;

    inset:0;

    background:
    rgba(2,6,17,.40);

    backdrop-filter:blur(2px);
}

/* MODAL BOX */

#equipo-modal-box{

    position:relative;

    z-index:2;

    width:480px;

    min-height:500px;

    padding:34px;

    border-radius:34px;

    background:
    linear-gradient(
        180deg,
        rgba(13,25,50,.96),
        rgba(4,10,20,.98)
    );

    border:1px solid rgba(0,157,255,.45);

    box-shadow:
    0 0 35px rgba(0,157,255,.22),
    0 0 70px rgba(0,157,255,.12);

    display:flex;

    flex-direction:column;

    gap:18px;

    transform:scale(.92);

    transition:
    transform .4s ease;
}

/* OPEN */

#equipo-modal.active #equipo-modal-box{

    transform:scale(1);
}

/* CLOSE */

#equipo-close{

    position:absolute;

    top:18px;

    right:22px;

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:#ffffff;

    font-size:18px;

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

    transition:.3s ease;
}

#equipo-close:hover{

    background:
    rgba(0,157,255,.22);

    transform:scale(1.08);
}

/* LOGO */

.equipo-logo-area{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:flex-start;
}

#equipo-logo{

    width:180px;

    height:auto;

    object-fit:contain;
}

/* SMALL TITLE */

.equipo-small-title{

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.7;
}

/* ICONS */

.equipo-random-icons{

    display:flex;

    gap:12px;

    align-items:center;
}

.equipo-random-icons img{

    width:52px;

    height:52px;

    object-fit:contain;

    border-radius:14px;

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

    padding:6px;
}

/* MAIN TITLE */

#equipo-main-title{

    color:#ffffff;

    font-size:34px;

    line-height:1.1;

    font-weight:700;

    text-transform:uppercase;
}

/* DESCRIPTION */

#equipo-description{

    color:#ffffff;

    font-size:15px;

    line-height:1.7;

    opacity:.88;
}

/* LIST */

.equipo-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding-left:18px;

    color:#ffffff;

    font-size:14px;

    line-height:1.5;
}

/* BUTTON */

.equipo-button-main{

    margin-top:auto;

    width:100%;

    padding:18px 24px;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        #009dff,
        #0066ff
    );

    color:#ffffff;

    text-decoration:none;

    text-align:center;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    transition:.35s ease;

    box-shadow:
    0 0 22px rgba(0,157,255,.28);
}

.equipo-button-main:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 0 35px rgba(0,157,255,.55);
}

/* MOBILE */

@media screen and (max-width:768px){

    #equipo-modal{

        justify-content:center;

        padding-right:0;
    }

    #equipo-modal-box{

        width:92%;

        min-height:auto;

        padding:34px 26px;
    }

    .equipo-random-icons{

        flex-wrap:wrap;
    }
}