.div-content {
  width: 100%;
  padding-left: 5rem;
  height: 500px;
  perspective: 800px;
  position: relative;
  margin: 100px auto;
  overflow: hidden;
}


.robot {
  position: absolute;
  width: 50%;
  height: auto;
  transition: opacity 0.2s ease;
  margin: 0 auto;
  transform: translateY(20px); /* ← esto lo sube 20px */
}


.oculto {
  opacity: 0;
  pointer-events: none;
}

.visible {
  opacity: 1;
}

.padre{
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 80vh;
    overflow: hidden;
    padding-top: 16rem;
}
.hijo-a{
    width: 60%;
}

.hijo{
    width: 100%;
    text-align: center;
    padding-bottom: 5rem;
    padding-left: 3rem;
    font-size: 300;
}

.tabla-ejemplo th,
.tabla-ejemplo td {
  border: 1px solid #ccc;
  padding: 0 10px; /* 0 arriba/abajo, 10px izquierda/derecha */
  text-align: left;
  vertical-align: middle;
}


/* Desktop por defecto */
.padre{
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:80vh;
  overflow:hidden;
  padding-top:16rem;
}



@media (max-width: 768px){
  .padre{ flex-direction: column-reverse; padding-top:0rem; max-height:none; }
  .hijo, .hijo-a{ width:100%; }

  .div-content{
    height: 360px;
    padding-left: 0;
    margin: 1rem auto 0;
    position: relative;
  }

  .div-content{
    height: 360px;
    padding-left: 0;
    margin: 1rem auto 0;
    position: relative;
  }

  .robot{
    position: absolute;
    width: 65%;
    max-width: 300px;
    left: 50%;
    transform: translate(-50%, 20px); /* el JS lo respeta ahora */
    transform-origin: center center;
  }
    .hijo{
    text-align: center;
    margin-top: 2rem;
    padding: 0 1rem 2rem;  /* sacamos el padding-left, solo dejamos márgenes horizontales chicos */
  }
  
}