* {
    transition: all 0.3s;
}

input[type="text"]{
    width: 100%;
    padding:10px;
    letter-spacing: 0.5px;
    color:var(--color4);
    border-radius: var(--br);
    border: 1px solid transparent;
    background-color: var(--opa1);
    font-family: inherit;
  
}

input[type="text"]:focus{
    border: 1px solid var(--color4);
    background-color: var(--opa2);
    
}

input[type="text"]:hover{
    border: 1px solid var(--color3);
}

input[type="button"], button{
    background-color: var(--color1);;
    color: var(--color4);
    font-family: inherit;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid transparent;
    border-radius: var(--br);
    width: 100%;
    cursor: pointer;
    display: block;
    max-width: 70px;
}

input[type="button"]:hover, button:hover {
    /* Estilo al pasar el cursor sobre el botón */
    background-color: var(--color1);
    border: 1px solid var(--color3);
  }