/*==================================================
    ARC SOLUCIONES ELÉCTRICAS S.A.S.
    STYLE.CSS v3.0
==================================================*/

/*==============================
VARIABLES
==============================*/

:root{

    --primary:#27D3FF;
    --secondary:#009DFF;

    --background1:#071C36;
    --background2:#103E71;
    --background3:#2A86E0;

    --white:#FFFFFF;

    --text:#EAF5FF;

    --glass:rgba(255,255,255,.08);

}

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

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

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

    background:

    linear-gradient(
        135deg,
        var(--background1),
        var(--background2),
        var(--background3)
    );

    color:var(--white);

    overflow-x:hidden;

    min-height:100vh;

}

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

.background{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at top left,
    rgba(0,200,255,.20),
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(0,120,255,.18),
    transparent 35%);

    z-index:-5;

}

.particles{

    position:fixed;

    inset:0;

    z-index:-4;

}

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

.container{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:50px 20px;

}

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

.card{

    position:relative;

    width:min(980px,100%);

    overflow:hidden;

    border-radius:30px;

    padding:80px 65px;

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.10),
        rgba(255,255,255,.05)
    );

    backdrop-filter:blur(24px);

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

    box-shadow:

    0 25px 70px rgba(0,0,0,.40);

}

/*==============================
MARCA DE AGUA
==============================*/

.watermark{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

}

.watermark img{

    width:88%;

    opacity:.035;

    filter:

    drop-shadow(0 0 10px rgba(0,210,255,.18));

}

/*==============================
CONTENIDO
==============================*/

.content{

    position:relative;

    z-index:10;

    text-align:center;

}

/*==============================
TÍTULO
==============================*/

h1{

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

    font-size:3.5rem;

    font-weight:700;

    line-height:1.2;

    margin-bottom:30px;

    color:#FFF;

    text-shadow:

    0 0 15px rgba(0,210,255,.25);

}

/*==============================
DESCRIPCIÓN
==============================*/

.description{

    max-width:760px;

    margin:auto;

    font-size:1.12rem;

    line-height:2;

    color:var(--text);

}

/*==============================
BARRA
==============================*/

.progress{

    position:relative;

    width:80%;

    max-width:650px;

    height:18px;

    margin:45px auto;

    border-radius:60px;

    background:

    rgba(255,255,255,.10);

    overflow:hidden;

    box-shadow:

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

}

.progress-bar{

    position:absolute;

    left:0;

    top:0;

    width:72%;

    height:100%;

    border-radius:60px;

    background:

    linear-gradient(

        90deg,

        #00D9FF,

        #66E0FF,

        #00A5FF,

        #66E0FF,

        #00D9FF

    );

    background-size:300% 100%;

}
/*==============================
ESTADO
==============================*/

.working{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:50px;

    color:#A9E5FF;

    font-size:1.1rem;

    font-weight:600;

}

.dot{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#00D7FF;

    box-shadow:
    0 0 18px rgba(0,215,255,.75);

}

/*==============================
CONTACTO
==============================*/

.contact{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:20px;

}

.item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:24px;

    border-radius:20px;

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

    transition:.35s ease;

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

}

.item:hover{

    transform:translateY(-6px);

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

    box-shadow:

    0 18px 35px rgba(0,200,255,.12);

}

.icon{

    width:64px;

    height:64px;

    min-width:64px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,210,255,.15);

    color:#FFFFFF;

    font-size:28px;

    transition:.35s;

}

.item:hover .icon{

    transform:scale(1.12);

    background:#00CFFF;

    color:#07233D;

}

.item small{

    display:block;

    color:#7FDBFF;

    letter-spacing:2px;

    margin-bottom:6px;

}

.item p{

    color:#FFFFFF;

    font-size:.95rem;

    line-height:1.5;

    word-break:break-word;

}

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

footer{

    width:100%;

    margin-top:45px;

    text-align:center;

}

.line{

    width:220px;

    height:2px;

    margin:0 auto 25px;

    background:#00D9FF;

    box-shadow:

    0 0 15px rgba(0,217,255,.6);

}

footer h3{

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

    font-size:1.15rem;

    letter-spacing:2px;

    margin-bottom:12px;

}

footer p{

    color:#D5EBFF;

    font-size:.92rem;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#071C36;

}

::-webkit-scrollbar-thumb{

    background:#00CFFF;

    border-radius:20px;

}

/*==============================
SELECCIÓN
==============================*/

::selection{

    background:#00CFFF;

    color:#07233D;

}

/*==============================
EFECTO GLASS
==============================*/

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.08),

        transparent 45%

    );

    pointer-events:none;

}

.card::after{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:30px;

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

    pointer-events:none;

}

/*==============================
TRANSICIONES
==============================*/

.card,
.item,
.icon,
.progress-bar,
.watermark img{

    transition:.35s ease;

}