/*==================================================
PRUEBA SOLUCIONES TI
==================================================*/

html,
body{

    width:100%;
    min-height:100%;
    background:#050B16;

}

/*==================================================
ESCENARIO
==================================================*/

.empresa-app{

    position:relative;

    width:100%;

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

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:0;

}

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

.empresa-container{

    position:relative;

    width:min(1700px,90vw);

}

/*==================================================
IMAGEN
==================================================*/

#empresa{

    display:block;

    width:100%;

    height:auto;

}

/*==================================================
NARRADOR
==================================================*/

#narrador{

    position:absolute;

    width:16px;

    height:16px;

    background:#00ff66;

    border-radius:50%;

    box-shadow:

        0 0 10px #00ff66,

        0 0 20px #00ff66;
        
    transform:translate(-50%,-50%);

    pointer-events:none;

    z-index:1000;

}

/*==================================================
PANEL DEL NARRADOR
==================================================*/

#panelNarrador{

    position:absolute;

    left:28%;

    top:18%;

    width:250px;

    padding:16px;

    display:none;

    border-radius:20px;

    background:rgba(20,20,20,.20);

    backdrop-filter:blur(10px);

    border:2px solid rgba(255,255,255,.55);

    color:#ffffff;

    z-index:2000;

}

#panelNarrador h2{

    margin:0 0 10px;

    color:#69d84f;

    font-size:23px;

}

#panelNarrador p{

    margin:0;

    font-size:15px;

    line-height:1.35;

    color:#ffffff;

}
/*==================================================
ESTELA DEL NARRADOR
==================================================*/

.particula{

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00ff66;

    pointer-events:none;

    transform:translate(-50%,-50%);

    box-shadow:

        0 0 8px #00ff66,

        0 0 16px #00ff66;

    animation:desvanecer .70s linear forwards;

    z-index:999;

}

/*==================================================
ANIMACIÓN ESTELA
==================================================*/

@keyframes desvanecer{

    from{

        opacity:1;

        transform:translate(-50%,-50%) scale(1);

    }

    to{

        opacity:0;

        transform:translate(-50%,-50%) scale(.20);

    }

}