body {
    margin: 0;
    padding: 0;;
}

.fondo {
    background: linear-gradient(to right, rgba(0, 62, 145, 0.8), rgba(0, 38, 87, 1));
    width: 100%;
    height: 100vh; /* Ajusta la altura según tus necesidades */
    position: relative; /* Para posicionar elementos dentro */
    overflow: hidden; /* Oculta el confeti que se salga */
}
  
.imagen-de-fondo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Envía la imagen al fondo */
    object-fit: contain; /* Ajusta la imagen al tamaño del fondo */
}

.coche {
    position: absolute;
    bottom: 420px;
    left: 50%;
    transform: translateX(-20%); /* Centra el coche */
    width: 60%; /* Ajusta el ancho del coche */
}
  
.coche img {
    width: 100%;
}

.img-coche {
    position: absolute;
    right: -30%; 
    animation: entrada 2s ease-in-out forwards;
  }

  @keyframes entrada {
    to {
      right: 0; /* La imagen se desplaza hasta el centro del contenedor */
    }
  }

.logo {
    position: absolute;
    top: 20px;
    left: 14%;
    width: 20%; /* Ajusta el ancho del logo */
}

.logo img {
    width: 100%;
}

.img-logo {
    position: absolute;
    left: -30;
    animation: entrada-logo 2s ease-in-out forwards;
}

@keyframes entrada-logo {
    to {
      left: 0; /* La imagen se desplaza hasta el centro del contenedor */
    }
  }


@media (max-width: 1000px) {
    .coche {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-45%); /* Centra el coche */
        width: 90%; /* Ajusta el ancho del coche */
    }
}

@media (max-width: 600px) {
    .coche {
        position: absolute;
        bottom: 370px;
        left: 50%;
        transform: translateX(-40%); /* Centra el coche */
        width: 150%; /* Ajusta el ancho del coche */
    }

    .logo {
        position: absolute;
        top: 20px;
        left: 20%;
        width: 270px; /* Ajusta el ancho del logo */
    }
}