/* ==========================================================================
   Divisor entre seções
   Uma linha vermelha (--sharingan) de ponta a ponta, com o símbolo do
   Sharingan (3 tomoe) no centro. A linha abre um vão em volta do símbolo.
   Altura zero no fluxo: fica em cima da emenda das duas seções sem mudar
   a altura delas (hero e sobre continuam com a tela inteira).
   Uso: copiar o bloco <div class="divisor">…</div> do index.html
   entre duas <section>.
   ========================================================================== */

.divisor{
  --simbolo:clamp(22px,2vw,30px);              /* tamanho do símbolo */
  --vao:calc(var(--simbolo) / 2 + 12px);       /* espaço da linha até o símbolo */
  position:relative;
  z-index:1;                                   /* por cima das bordas das seções; abaixo da navbar */
  height:0;
  pointer-events:none;
}

/* a linha: duas metades, com o vão no meio */
.divisor::before,
.divisor::after{
  content:"";
  position:absolute;
  top:-1px;
  height:2px;
  background:var(--sharingan);
}
.divisor::before{left:0;right:calc(50% + var(--vao))}
.divisor::after{right:0;left:calc(50% + var(--vao))}

/* o símbolo */
.divisor__simbolo{
  position:absolute;
  left:50%;top:0;
  width:var(--simbolo);height:var(--simbolo);
  transform:translate(-50%,-50%);
  display:block;
  overflow:visible;
}
.divisor__simbolo .disco{fill:var(--sharingan)}
.divisor__simbolo .anel{fill:none;stroke:var(--void);stroke-width:2.5}
.divisor__simbolo .tomoe{fill:var(--void)}