/* contacto ------------------------------------------------------ */

#contacto{
    padding: 4vh 5.3vw 2vh 4.2vw;
}

article {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: #1e2122;
    border: 2px solid white;
    border-radius: 15px;
    box-sizing: border-box;
}

#presupuesto{
    text-align: center;
    font-size: 2.0vw;
    background: none;
    color: #5296a9;
    padding: 2vh 5vw;
    font-family:"Calibri", sans-serif;
    color: white;

    h1{
        font-weight: 300;
    }

    *{
        margin: 6vh 0;
    }
    
}

#whatsapp{
    background-color: green;
    color: white;
    text-decoration: none;
    border-radius: 15px;
    padding: 1vh 2.5vw;
    margin: 4vh 0;
}

#formulario{
    background-color: #2b324e;
    border-radius: 0 12px 12px 0;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5vh;
    padding: 4vh 2vw;
}

#formulario *{
    margin: 2vh 1.7vw;
    color: #ffffff;
    display: flex;
}

#formulario div{
    border-bottom: 0.1vw solid #ffffff;

    label{
        font-size: 1.3vw;
        width: 5vw;
    }

    *{
        margin: 0 0.4vw 0 0;
    }

}

#formulario input {
    font-size: 1.2vw;
    border: none;
    background: none;
    padding: 0 0.5vw 0 0.5vw;
    color: #ffffff;
    resize: none;
    overflow: hidden;
}

#formulario input:focus {
    outline: none;
}

#l_descripcion{
    display: block;
    grid-column: span 2;
    text-align: left;
    margin-top: 5vh;
    margin-bottom: 0;
    font-size: 1.3vw !important;
}

#descripcion{
    grid-column: span 2;
    font-size: 1.2vw;
    height: 24vh;
    overflow: auto;
    resize: none;
    border: 0.1vw solid white;
    background: none;
    color: #ffffff;
}

#descripcion:focus{
    outline: none;
}

#descripcion::-webkit-scrollbar {
    width: 0.4vw;
  }
  
#descripcion::-webkit-scrollbar-track {
    background: none; 
  }
   
#descripcion::-webkit-scrollbar-thumb {
    background: #ffffff; 
}
  
#descripcion::-webkit-scrollbar-thumb:hover {
    cursor: default;
}

#image_s{
    grid-column: span 2 ;
    border: none;
    background: 0;
    margin: 2vh 0 6vh 0;
}

#l_file, #enviar{
    /* background-color: #2ea5cd; */
    background-color: #f7b176;
    color: #312f2e;
    width: 12.7vw;
    cursor: pointer;
    padding: 0.9vh 1vw;
    box-shadow: 0 0 6px 0 #dfc39983, 0 0 6px 0  #dfc39983;
    font-weight: normal;
    font-size: 1.3vw;
    text-align: center;
}

#l_file{
    margin: 0 1vw 0 1.6vw;
}

#file_error{
    margin: 0;
    font-size: 1.2vw;
    padding: 1vw;
}

#enviar{
    grid-column: span 2;
    border: none;
    width: 50vw;
    
}

@media (max-width: 800px) { 

    article {
        display: flex;
        flex-direction: column;
    }

    #formulario{
        border-radius: 0 0 12px 12px;
        gap: 0.5vh;
        padding: 2vh 2vw;
        width: 95%;

        *{
            font-size: 1.9vw
        }
    }
    
    #presupuesto{
        font-size: 2.0vw;
        padding: 2.5vh 5vw;
        width: 90%;

        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 3vw;
    
        h1{
            font-weight: 700;
            padding: 0;
            font-size: 2.8vw;
            grid-column: span 2;
        }
    
        *{
            margin: 0;
        }
        p{
            padding: 0;
        }

    }


    #formulario div{
    
        label{
            font-size: 1.8vw;
            width: 5vw;
        }
    
        *{
            margin: 0 0.4vw 0 0;
        }
    
    }

    #formulario input {
        font-size: 1.8vw;
        padding: 0 0.5vw 0 0.5vw;
    }

    #l_descripcion{
        font-size: 1.8vw !important;
        margin: 0 0 0 2vw;
    }

    #descripcion{
        height: 15vh;
        font-size: 1.8vw ;
    }

    #image_s{
        grid-column: span 2 ;
        margin: 2vh 0 ;
        display: flex;
        flex-direction: row;
    }

    #l_file, #enviar{
        width: 12.7vw;
        padding: 0.9vh 1vw;
    }
    
    #l_file{
        margin: 0 1vw 0 1.6vw;
        width: 19vw;
    }

    #enviar{
        grid-column: span 2;
        border: none;
        width: 95%;
        
    }

}