/* ERGA MUNDUM · esferas 3D das bandeiras (antes do nome de cada país) */
.esfera{display:inline-block;position:relative;width:1.18em;height:1.18em;border-radius:50%;flex:0 0 auto;
  background:#ddd center/112% no-repeat;vertical-align:-.22em;margin-right:.5em;
  box-shadow:0 .06em .08em rgba(10,15,30,.38),0 .14em .32em rgba(10,15,30,.2)}
.esfera::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.9) 0,rgba(255,255,255,.42) 14%,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,.16) 74%,rgba(0,0,0,.42) 100%);
  box-shadow:inset 0 0 0 .04em rgba(20,25,40,.28),inset -.07em -.11em .16em rgba(0,0,0,.3),inset .05em .06em .1em rgba(255,255,255,.55)}
.esfera.lg{width:3.2em;height:3.2em;margin:0}

/* nos títulos de seção a esfera é um pouco maior (+30%) */
.sec-hd h2 .esfera,.sgrid h3 .esfera{width:1.55em;height:1.55em;vertical-align:-.45em;margin-right:.55em}
.rpage h1 .esfera{width:.82em;height:.82em;vertical-align:-.04em;margin-right:.28em}
.sf .esfera{margin-right:.4em}