html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.container {
  position: fixed;
  inset: 0;
  background: #000 center/cover no-repeat;
  background-image: url("fundo.png");
}

.clickable {
  position: absolute;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.clickable img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.clickable:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 20px rgba(255,255,255,.9));
}

/* Desktop */
.whatsapp { left: 43.7%; top: 72%; width: 6.9%; height: 12.4%; }
.email    { left: 53.5%; top: 72%; width: 7%;   height: 12.4%; }

/* Mobile geral (portrait e landscape pequeno) - valores do teu mobile portrait */
@media (max-width: 768px) {
  .whatsapp { left: 42.43%; top: 27.59%; width: 7.46%; height: 4.22%; }
  .email    { left: 53.27%; top: 27.59%; width: 7.5%;  height: 4.22%; }
}

/* Mobile landscape - ajuste fino se necessário */
@media (max-width: 768px) and (orientation: landscape) {
  .whatsapp { left: 40%; top: 70%; width: 8%; height: 14%; } /* exemplo */
  .email    { left: 52%; top: 70%; width: 8%; height: 14%; }
}

/* Tablet portrait */
@media (min-width: 769px) and (max-width: 1200px) and (orientation: portrait) {
  .whatsapp { left: 43%; top: 37%; width: 8%; height: 15%; }
  .email    { left: 53%; top: 37%; width: 8%; height: 15%; }
}

/* Tablet landscape - restrito para tablets reais */
@media (min-width: 1024px) and (max-width: 1400px) and (orientation: landscape) {
  .whatsapp { left: 43%; top: 61%; width: 7%; height: 13%; }
  .email { left: 53%; top: 61%; width: 7%; height: 13%; }
}