:root{

/* ===== TEXTO REDES ===== */

/* texto */
--redes-x:0px;
--redes-y:47px;
--redes-size:18px;

/* rueda carga */
--loader-x:72px;
--loader-y:47px;
--loader-size:18px;

}


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

#redesTitle{

position:absolute;

left:15%;

z-index:9999;

transform:
translateX(-50%)
translateX(var(--redes-x))
translateY(var(--redes-y));

font-family:
-apple-system,
BlinkMacSystemFont,
"SF Pro",
sans-serif;

font-size:var(--redes-size);

font-weight:700;

color:#8e8e93;

letter-spacing:-0.5px;

white-space:nowrap;

pointer-events:none;

}


/* ===== SPINNER ===== */

#wifiLoader{

position:absolute;

left:10%;

z-index:10000;

opacity:0;

width:var(--loader-size);
height:var(--loader-size);

transform:
translateX(-50%)
translateX(var(--loader-x))
translateY(var(--loader-y));

border-radius:50%;

border:2px solid rgba(142,142,147,.25);

border-top:2px solid #8e8e93;

animation:
spin .7s linear infinite;

pointer-events:none;

}


/* visible */

#wifiLoader.show{

opacity:1;

}


/* oculto */

#wifiLoader.hide{

display:none;

}


/* giro */

@keyframes spin{

0%{

transform:
translateX(-50%)
translateX(var(--loader-x))
translateY(var(--loader-y))
rotate(0deg);

}

100%{

transform:
translateX(-50%)
translateX(var(--loader-x))
translateY(var(--loader-y))
rotate(360deg);

}

}