Spotlight on hover. Padding mínimo 32px.

O card é a unidade de conteúdo padrão. Sempre 20px de raio, 32px de padding mínimo, índice mono opcional, e spotlight radial seguindo o cursor no hover.

Bento 2x2 com card destaque

A escuta entrelaçada

Espaço onde a clínica encontra a estrutura. Nem só técnica, nem só negócio — uma travessia inteira.

Nossa missão

Capacitar, conectar, evoluir. Três verbos. Uma só prática: a recuperação da dignidade profissional da psicóloga brasileira.

Por que existimos · contra a precarização

A precarização da psicóloga já foi normalizada por tempo demais. O ato de cobrar com dignidade deixou de ser ético e virou subversivo. A Entrelaços existe para reverter esse vetor — uma prática autoral por vez.

Anatomia

Raio: 20px (xl) — sempre.
Padding: mínimo 32px no eixo curto, 36–40px no eixo longo.
Header: índice mono (01, 02...) opcional + título .h-card.
Spotlight: radial gradient roxo seguindo o cursor no --mx, --my.
Hover lift: translateY(-2px) + sombra --e-sh-card-hover.

// JS para o spotlight
document.querySelectorAll('[data-spotlight]').forEach(card => {
  card.addEventListener('mousemove', e => {
    const r = card.getBoundingClientRect();
    card.style.setProperty('--mx', ((e.clientX - r.left)/r.width*100) + '%');
    card.style.setProperty('--my', ((e.clientY - r.top)/r.height*100) + '%');
  });
});

Snippet · pronto pra colar

HTML · cole no seu projeto

<article class="e-card" data-spotlight>
  <div class="e-card-spot"></div>
  <header class="e-card-head">
    <span class="e-card-idx">01</span>
    <h3 class="h-card">A escuta <em>entrelaçada</em></h3>
  </header>
  <p>Espaço onde a clínica encontra a estrutura. Nem só técnica, nem só negócio — uma travessia inteira.</p>
</article>

<!-- Card destaque (ocupa 2 colunas no bento-2x2) -->
<article class="e-card e-card-big" data-spotlight>
  <div class="e-card-spot"></div>
  <header class="e-card-head">
    <span class="e-card-idx">03</span>
    <h3 class="h-card">Por que existimos · <em>contra a precarização</em></h3>
  </header>
  <p>...</p>
</article>

<script>
// JS obrigatório para o spotlight seguir o cursor
document.querySelectorAll('[data-spotlight]').forEach(card => {
  card.addEventListener('mousemove', e => {
    const r = card.getBoundingClientRect();
    card.style.setProperty('--mx', ((e.clientX - r.left)/r.width*100) + '%');
    card.style.setProperty('--my', ((e.clientY - r.top)/r.height*100) + '%');
  });
});
</script>