/* Reset e estrutura */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #000;
  overflow-x: hidden;
}

/* Seção principal */
.hero {
  position: relative;
  width: 100%;
  min-height: 120vh;
  background: url("assets/prancheta1.png") no-repeat center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 100px;
}

/* Botões absolutos */
.btn {
  position: absolute;
  display: block;
  z-index: 2;
}

.btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* Posições exatas (ajuste conforme sua arte) */
.principal {
  top: 30%;
  left: 50%;
  width: 67%;
  transform: translate(-50%, -50%);
}

.midias {
  top: 48%;
  left: 33%;
  width: 34%;
  transform: translate(-50%, -50%);
}

.grupo {
  top: 48%;
  left: 69%;
  width: 34%;
  transform: translate(-50%, -50%);
}

.vendedora {
  top: 65%;
  left: 33%;
  width: 34%;
  transform: translate(-50%, -50%);
}

.suporte {
  top: 65%;
  left: 69%;
  width: 34%;
  transform: translate(-50%, -50%);
}

/* Animação pulsante */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); }
}