/* Desktop (md+): hero um pouco mais baixo que 100dvh. Mobile mantém 100dvh só com a classe Tailwind. */
@media (min-width: 48rem) {
  #inicio {
    min-height: calc(100dvh - 3rem);
  }
}

/* Bloco de texto (badge, título, CTA) — muito abaixo do topo; a imagem mantém-se na coluna certa */
#inicio .hero-text-col,
#inicio [data-hero-text-col] {
  padding-top: 1.75rem;
}

@media (min-width: 40rem) {
  #inicio .hero-text-col,
  #inicio [data-hero-text-col] {
    padding-top: 2.5rem;
  }
}

@media (min-width: 48rem) {
  #inicio .hero-text-col,
  #inicio [data-hero-text-col] {
    /* min ~4.5rem, cresce com a altura do ecrã, até ~11rem de techo */
    padding-top: clamp(4.5rem, 12vh, 11rem);
  }
}

@media (min-width: 64rem) {
  #inicio .hero-text-col,
  #inicio [data-hero-text-col] {
    padding-top: clamp(5rem, 13vh, 12rem);
  }
}

/* Hero: imagem sem caixa, container para inclinação 3D */
.hero-image-tilt-wrap {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Empurra a ilustração um pouco para a direita (coluna md+), sem mexer no tilt da <img> */
@media (min-width: 48rem) {
  #inicio [data-hero-tilt-wrap].hero-image-tilt-wrap {
    transform: translateX(1rem);
  }
}

.hero-image-tilt {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
  box-shadow: none;
  /* cantos ligeiramente arredondados, sem “moldura” */
  border-radius: 0.75rem;
}