/* Solución para la pantalla verde cuando todos los elementos tienen d-none */
body {
  /* Asegurar que el fondo sea negro en lugar de verde cuando no hay contenido visible */
  background-color: #000000;
}

/* Asegurar que estos contenedores tomen el fondo apropiado cuando estén visibles */
#body-form.d-none + #section-ty:not(.d-none) {
  display: block !important;
  visibility: visible !important;
}

/* Establece un fondo visible para cuando todos los contenedores principales están ocultos */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/fondo-escritorio.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Versión móvil del fondo */
@media (max-width: 768px) {
  body::before {
    background-image: url("../assets/img/fondo-celular.webp");
  }
}

/* Ocultar el fondo cuando alguno de los contenedores principales es visible */
#body-form:not(.d-none) ~ body::before,
#section-ty:not(.d-none) ~ body::before {
  display: none;
}

/* Asegurar que la clase d-none realmente oculte el elemento */
.d-none {
  display: none !important;
  visibility: hidden !important;
}