/* =========================================================
   DIVISOR ENTRE SEÇÕES: faixa escura fina, filetes dos dois lados e
   um selo central com a assinatura profissional.

     <div class="divider" data-reveal="fade" aria-hidden="true">
       <span class="divider__label">Johny Santos · CRP 06/146891</span>
     </div>

   Vai entre duas <section> dentro do <main>. Os filetes "se desenham"
   do selo para as bordas quando o divisor entra na tela (data-reveal);
   sem JS ou com movimento reduzido, já aparecem prontos.
   Filetes e borda em creme (mesmo tratamento dos selos do Sobre mim).
   Para testar a versão dourada da referência: --divider-line: #b8964f.
   ========================================================= */
@layer components {
  .divider {
    --divider-line: rgba(241, 234, 216, .42);
    position: relative;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    min-height: clamp(34px, 2.6vw, 42px);
    padding-inline: clamp(12px, 3vw, 40px);
    background: linear-gradient(180deg, #0f1c16, var(--c-green-night) 50%, #0f1c16);
    border-block: 1px solid rgba(241, 234, 216, .06);
  }
  .divider::before, .divider::after {
    content: ""; height: 1px; min-width: 18px;
    transition: transform 1.1s var(--ease-out) .15s;
  }
  .divider::before { background: linear-gradient(90deg, transparent, var(--divider-line) 30%); transform-origin: right; }
  .divider::after  { background: linear-gradient(90deg, var(--divider-line) 70%, transparent); transform-origin: left; }

  .divider__label {
    margin-inline: clamp(10px, 1.6vw, 18px);
    padding: .5em 1.3em .45em 1.54em;           /* +.24em à esquerda compensa o tracking */
    border: 1px solid var(--divider-line);
    font-family: var(--ff-small); font-size: clamp(10px, .8vw, 11.5px); line-height: 1.2;
    letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
    color: var(--c-cream-warm);
  }

  @media (prefers-reduced-motion: no-preference) {
    html.reveal-ready .divider[data-reveal]:not(.is-inview)::before,
    html.reveal-ready .divider[data-reveal]:not(.is-inview)::after { transform: scaleX(0); }
  }
}