/* vida.css — UM efeito, TODAS as páginas. Uma linha de `<link>` por modelo.
 *
 * 🔴 DESENHO DELE, 01/09/2026, e ele acertou o que eu errei três vezes:
 *      "mas a gente vai apanhar assim toda vez? então vai ter que fazer a página do
 *       cliente na página do Xavier? qual o sentido disso?"
 *      "não consegue só fazer um efeito pra cada página?"
 *
 * ⛔ O QUE EU IA FAZER E NÃO ESCALA: converter a página do Xavier em modelo. Medido,
 *    das 44 classes do modelo só 3 existiam no CSS dele — então "copiar" exigiria
 *    refazer cada cliente em cima da página de um cliente. Sem sentido, como ele disse.
 *
 * ⭐ O QUE MEDIU CERTO: 28 dos 32 modelos têm `<img>`, `<a>` e `class="btn"`. O efeito
 *    se ancora NISSO — em tag e atributo, nunca em classe de uma página — e entra em
 *    qualquer modelo com um `<link>`, sem tocar no HTML.
 *
 * ⭐ OS VALORES SÃO OS DO XAVIER, copiados de saidas/prospects/chaveiro-xavier:
 *      botão   -> translateY(-3px) + box-shadow 0 14px 40px rgba(...,.5)
 *      imagem  -> scale(1.08) + brightness(1.1), transition .5s ease
 *      pulso   -> scale(1.3), opacity .5, 1.5s infinite  (@keyframes pulseRed)
 *      base    -> transition: all .3s ease   (a assinatura, 6× na página dele)
 *
 * ⚠️ `:active` ao lado de `:hover`: no CELULAR não existe hover, e é no celular que ele
 *    olha. Sem isso o efeito sumiria justamente no aparelho dele.
 */

/* ═══ 1. TODO BOTÃO responde ao toque — sobe e acende ════════════════════════════ */
[class*="btn"], a[data-whats], a[data-tel] {
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
[class*="btn"]:hover, [class*="btn"]:active,
a[data-whats]:hover, a[data-whats]:active {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(34, 197, 94, .45);
}
/* ⭐ o de ligação usa o vermelho de urgência do Xavier */
[class*="btn-tel"]:hover, [class*="btn-tel"]:active,
a[data-tel]:hover, a[data-tel]:active {
  box-shadow: 0 14px 40px rgba(239, 68, 68, .45);
}

/* ═══ 2. TODA IMAGEM em moldura dá zoom ═════════════════════════════════════════ */
/* ⛔ `overflow:hidden` no pai é o que impede o zoom de vazar. Sem ele a imagem cresce
      para fora e cria rolagem lateral — defeito que o dono pegou hoje num print. */
[class*="card"], [class*="cartao"], [class*="foto"], [class*="palco"], figure {
  overflow: hidden;
}
[class*="card"] img, [class*="cartao"] img, [class*="foto"] img,
[class*="palco"] img, figure img {
  transition: transform .5s ease, filter .5s ease;
}
[class*="card"]:hover img, [class*="card"]:active img,
[class*="cartao"]:hover img, [class*="cartao"]:active img,
[class*="foto"]:hover img, [class*="foto"]:active img,
[class*="palco"]:hover img, [class*="palco"]:active img,
figure:hover img, figure:active img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

@media (prefers-reduced-motion: no-preference) {

  /* ═══ 3. O PULSO de urgência — `@keyframes pulseRed` do Xavier ════════════════ */
  @keyframes vida-pulso {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.3); opacity: .5; }
    100% { transform: scale(1);   opacity: 1; }
  }
  /* ⛔ NUNCA em elemento de largura total: `scale(1.3)` numa faixa de 390 px vira
     507 px e CRIA ROLAGEM LATERAL — medido no print que ele mandou do celular,
     `div.urgencia [-53, 443]` numa tela de 390. Por isso só em conteúdo curto. */
  .vida-pulso {
    animation: vida-pulso 1.5s infinite;
    display: inline-block;
    max-width: 100%;
  }

  /* ═══ 4. OS LADOS da página — ordem dele: "deve pegar os lados tbm" ═══════════ */
  /* ⚠️ ACRÉSCIMO declarado: o Xavier NÃO tem isto. Entra por ordem dele. */
  @keyframes vida-borda { 0%, 100% { opacity: .18 } 50% { opacity: .7 } }
  body::before, body::after {
    content: '';
    position: fixed; top: 0; bottom: 0; width: 3px;
    z-index: 40; pointer-events: none;
    animation: vida-borda 3.2s infinite ease-in-out;
    background: linear-gradient(to bottom, transparent,
                var(--cor-secundaria, #facc15), transparent);
  }
  body::before { left: 0 }
  body::after  { right: 0; animation-delay: 1.6s }
}