/* Override exclusivo da HERO – seguro (sem transforms) */
#hero-visual { position: relative; }

/* CAIXA DE TRÁS (tile flow) — empurra levemente p/ direita e um tico p/ cima */
#heroBackCard {
  position: relative;
  left: 60px;   /* antes: transform translate; agora, deslocamento estável */
  top: 116
px;
  z-index: 2;    /* atrás do WhatsApp Bot */
  filter: drop-shadow(0 22px 56px rgba(2, 6, 23, .42));
}

/* WHATSAPP BOT (tile chat) — destaca na frente e separa visualmente */
#heroWhatsCard {
  position: relative;
  left: 58px;
  top: 232px;
  z-index: 4;    /* acima da caixa de trás */
  box-shadow: 0 14px 40px rgba(2, 6, 23, .55);
  border: 1px solid rgba(255,255,255,.14);
  /* evita “pulos” se houver hover transform nas classes base */
  will-change: auto;
}

/* Micro hover (opcional e suave) — sem transform: usa leve sombra */
@media (hover:hover) and (pointer:fine) {
  #heroWhatsCard:hover { box-shadow: 0 18px 52px rgba(2, 6, 23, .6); }
  #heroBackCard:hover  { filter: drop-shadow(0 26px 60px rgba(2, 6, 23, .46)); }
}

/* Responsivo — vai reduzindo o offset para não recortar em telas menores */
@media (max-width: 1200px) {
  #heroBackCard { left: 78px;  top: -6px; }
  #heroWhatsCard { left: 6px;  top: 24px; }
}
@media (max-width: 980px) {
  #heroBackCard { left: 40px;  top: -4px; }
  #heroWhatsCard { left: 0;    top: 20px; }
}
@media (max-width: 640px) {
  /* em mobile, praticamente empilha para não cortar nada */
  #heroBackCard { left: 0; top: 0; margin-top: 8px; }
  #heroWhatsCard { left: 0; top: 16px; }
}