/*-------------------------------telefono------------------------------------*/

@media (max-width:779px) {
    body {
        background-image: url('fondo.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        margin: 0;
        padding: 0;
        height: 100%; /* Añadido para asegurar que la página ocupe toda la altura del viewport */
    }

    .logo {
        width: 90%; 
        position: absolute;
        top: 5%;
        left: 12%;
        max-width: 80%;
        height: auto;
    }

    .car {
        position: absolute;
        left: 5%;
        top: 15%; 
        max-width: 90%;
        height: auto;
    }   

    .titulo {
        position: absolute;
        top:48%; /* Ajusta según tu diseño */
        left: 8%; /* Ajusta según tu diseño */
        color: rgb(252, 252, 252);
        font-size: 14vw; 
        font-family: 'League Spartan', sans-serif;
        font-weight: bold; 
    }

    .texto_inicio {
        position: absolute;
        top: 77%;
        left: 8%;
        color: rgb(252, 252, 252);
        font-size: 4.5vw; 
        font-family: 'Poppins', sans-serif;
    }

    .info{
        position: absolute;
        top: 102%;
        left: 30%;
        max-width: 50%;
        height: auto;
    }

    .texto_medio {
        position: absolute;
        top: 90%;
        left: 2%; 
        color: rgb(252, 252, 252);
        font-family: 'Poppins', sans-serif;
        text-align: center;
        font-size: 7vw;
        font-weight: bold;
        line-height: 0.9;
        text-indent: 0.5em;
        margin-top: 20vh; /* Mueve el contenido hacia abajo */
    }
    
    #mantenme {
        width: 50%; /* Ajusta el ancho para pantallas aún más pequeñas */
        position: absolute; /* Posición absoluta para ajustar la posición */
        top: 152%; /* 50% desde arriba */
        left: 50%; /* 50% desde la izquierda */
        transform: translate(-50%, -50%); /* Centra el elemento */
        width: 70%; /* 50% del ancho del contenedor padre */
        height: auto; /* Altura automática para mantener la proporción */
    }

    #preowned {
        width: 50%; 
        position: absolute; 
        top: 192%; 
        left: 50%; 
        transform: translate(-50%, -50%);
        width: 70%; 
        height: auto; 
    }

    #motorhub {
        width: 50%; 
        position: absolute; 
        top: 232%; 
        left: 50%; 
        transform: translate(-50%, -50%);
        width: 70%; 
        height: auto; 
    }

    #llantacity{
        width: 50%; 
        position: absolute; 
        top: 272%; 
        left: 50%; 
        transform: translate(-50%, -50%);
        width: 70%; 
        height: auto; 
    }

    #liveroad{
        width: 50%; 
        position: absolute; 
        top: 312%; 
        left: 50%; 
        transform: translate(-50%, -50%);
        width: 70%; 
        height: auto; 
    }

    .texto_final {
        position: absolute;
        top: 335%;
        left: 2%; /* Centra horizontalmente el elemento */
        font-family: 'Montserrat', sans-serif;
        text-align: center;
        font-size: 4vw;
        font-weight: bold;
        color: rgb(248, 243, 243);
        line-height: 1.5;
        
    }

    .contacto { 
        position: absolute;
        top: 350%;
        left: 15%; 
        color: rgb(248, 243, 243);
        font-family: 'Montserrat', sans-serif;
        text-align: center;
        font-size: 4vw;
        font-weight: bold; 
        line-height: 2;
        margin-top: 150px;
        
    }

    .boton {
        background-color: #b6c4c7; 
        border: none; 
        color: rgb(0, 0, 0); 
        padding: 15px 32px; /* Añadir relleno alrededor del texto */
        display: inline-block;
        font-size: 4.5vw; 
        cursor: pointer; /* Cambiar cursor al pasar el ratón */
        border-radius: 10px; 
        margin-top: 50px;
    }

    .cinta {
        position: absolute;
        top: 400%;       
        max-width: 110%; 
        margin-top: 230px; 
        display: block; /* Asegura que la imagen ocupe todo el ancho disponible */
        margin-left: auto; /* Centra la imagen horizontalmente */
        margin-right: auto; /* Centra la imagen horizontalmente */
        height: 7%;
    }
}