/* =========================================================
   Componente compartilhado: CTA final com "bolhas" dos pets
   =========================================================
   Usado IGUAL na home/Sobre (css/style.css) e no Observatório
   (css/observatorio.css). Depende apenas dos tokens de tema
   (--color-brand-soft, --radius-lg, etc.), que ambas as folhas
   definem no :root. Só o TEXTO muda entre as páginas.

   ⚠️ Fonte única: qualquer ajuste visual neste componente deve
   ser feito AQUI — reflete automaticamente nos dois lugares.
   O comportamento (física/captura) fica em js/bolhas-cta.js.
   ========================================================= */

.petcta {
  text-align: center;
  background: var(--color-brand-soft);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 52px) 24px;
  margin-top: 56px;
}
.petcta h2 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 30px); }
.petcta p { margin: 0 auto 22px; max-width: 48ch; color: var(--color-text-muted); font-size: 15px; }
.petcta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* Variante com as bolhas ao fundo. */
.petcta--bolhas {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.petcta-bolhas { position: absolute; inset: 0; z-index: 0; }

.petbolha {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 18px rgba(28, 33, 23, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.petbolha:hover { box-shadow: 0 8px 22px rgba(28, 33, 23, 0.24), 0 0 0 3px var(--color-brand-accent); }
/* Bolha capturada pelo cursor: destaca-se e fica firme → alvo de clique claro. */
.petbolha.held {
  z-index: 5;
  box-shadow: 0 10px 26px rgba(28, 33, 23, 0.32), 0 0 0 4px var(--color-brand-accent);
}
.petbolha.held img { transform: scale(1.06); transition: transform 0.18s ease; }
.petbolha img { width: 100%; height: 100%; object-fit: cover; }
.petbolha-emoji { font-size: calc(var(--r) * 0.95); line-height: 1; }

.petcta-conteudo { position: relative; z-index: 1; pointer-events: none; }
.petcta-conteudo .btn { pointer-events: auto; }
.petcta--bolhas h2,
.petcta--bolhas p { text-shadow: 0 1px 12px var(--color-brand-soft), 0 1px 3px var(--color-brand-soft); }

@media (max-width: 640px) {
  .petcta { margin-top: 40px; padding: 32px 20px; }
  .petcta-actions { flex-direction: column; align-items: stretch; }
  .petcta-actions .btn { width: 100%; }
  /* No mobile o componente deixa de ser "bolhas ao fundo": vira um empilhado —
     conteúdo em cima e as bolhas numa faixa curta embaixo (nunca sobre o botão).
     Uso order p/ jogar as bolhas pra baixo (no HTML elas vêm antes). */
  .petcta--bolhas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 28px 20px 18px;
  }
  .petcta-conteudo { order: 1; }
  .petcta-bolhas {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: 104px;
    margin-top: 16px;
    flex: 0 0 auto;
  }
}